css - Is it possible to apply color to part of a character? -

css - Is it possible to apply color to part of a character? -

what looking apply color part of letter throught css, html canvas or other technique.

i've found article paint half of letter.

is possible apply css half of character?

my question if can paint letter on parts of various colors throught apply class part.

you create utilize svg, may helpful you:

class="snippet-code-html lang-html prettyprint-override"><?xml version="1.0" encoding="utf-8" ?> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="500pt" height="500pt" viewbox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path fill="#ffffff" d=" m 0.00 0.00 l 500.00 0.00 l 500.00 500.00 l 0.00 500.00 l 0.00 0.00 z" /> <path fill="#89bf67" d=" m 211.24 74.49 c 221.11 72.38 231.12 71.02 241.19 70.52 c 244.26 93.44 247.75 116.32 250.45 139.28 c 243.84 139.11 237.17 139.64 230.82 141.60 c 230.69 141.18 230.44 140.33 230.31 139.91 c 224.13 118.57 217.98 97.23 211.68 75.93 l 211.24 74.49 z" /> <path fill="#bad165" d=" m 241.19 70.52 c 250.92 70.32 260.68 70.12 270.36 71.29 c 270.19 75.77 270.05 80.25 269.89 84.73 c 268.43 94.48 268.81 104.45 269.13 114.28 c 269.05 115.45 268.97 116.62 268.89 117.79 c 268.22 125.38 268.44 133.01 268.22 140.62 c 262.34 139.81 256.40 139.26 250.45 139.28 c 247.75 116.32 244.26 93.44 241.19 70.52 z" /> <path fill="#f8b356" d=" m 270.36 71.29 c 280.65 72.19 290.90 73.88 300.91 76.47 c 296.92 99.42 292.55 122.30 288.69 145.26 c 282.08 143.33 275.38 141.67 268.55 140.71 c 268.62 133.07 268.90 125.43 268.89 117.79 c 268.97 116.62 269.05 115.45 269.13 114.28 c 270.24 104.48 270.22 94.58 269.89 84.73 c 270.05 80.25 270.19 75.77 270.36 71.29 z" /> <path fill="#84d0f0" d=" m 183.78 84.00 c 191.79 80.05 200.36 77.34 208.97 75.06 c 210.19 74.51 211.09 74.80 211.68 75.93 c 217.98 97.23 224.13 118.57 230.31 139.91 l 230.72 141.38 c 225.25 143.77 219.45 146.15 215.52 150.86 c 215.26 150.64 214.73 150.18 214.46 149.96 c 204.08 128.26 193.87 106.47 183.44 84.80 l 183.78 84.00 z" /> <path fill="#eb6645" d=" m 300.91 76.47 c 310.58 78.68 320.06 81.74 329.31 85.34 c 322.01 107.70 314.70 130.04 307.38 152.39 c 301.27 149.70 295.07 147.22 288.69 145.26 c 292.55 122.30 296.92 99.42 300.91 76.47 z" /> <path fill="#eb6878" d=" m 151.24 106.32 c 160.47 97.15 171.47 89.88 183.15 84.23 l 183.44 84.80 c 193.87 106.47 204.08 128.26 214.46 149.96 l 214.99 151.09 c 211.28 154.81 209.10 159.61 207.34 164.47 c 188.62 145.11 170.00 125.65 151.24 106.32 z" /> <path fill="#dec786" d=" m 269.13 114.28 c 268.81 104.45 268.43 94.48 269.89 84.73 c 270.22 94.58 270.24 104.48 269.13 114.28 z" /> <path fill="#f09fc0" d=" m 329.31 85.34 c 340.42 89.50 351.09 94.85 361.19 101.08 c 360.51 102.84 359.80 104.58 359.13 106.35 c 348.63 125.35 337.47 143.99 326.75 162.88 c 320.47 159.07 313.98 155.61 307.38 152.39 c 314.70 130.04 322.01 107.70 329.31 85.34 z" /> <path fill="#ac8cbd" d=" m 361.87 101.61 c 369.06 105.84 375.69 110.99 382.14 116.28 c 381.90 116.75 381.41 117.68 381.17 118.15 c 368.34 136.69 355.40 155.16 342.65 173.76 c 337.39 170.07 332.18 166.32 326.75 162.88 c 337.47 143.99 348.63 125.35 359.13 106.35 c 360.03 104.76 360.97 103.20 361.87 101.61 z" /> <path fill="#e95d0e" d=" m 126.90 157.78 c 129.21 138.60 137.61 120.11 151.24 106.32 c 170.00 125.65 188.62 145.11 207.34 164.47 l 207.59 164.76 c 206.86 167.50 206.73 170.34 206.67 173.17 c 180.10 167.91 153.51 162.78 126.90 157.78 z" /> <path fill="#98bf0e" d=" m 126.04 181.70 c 125.96 173.72 125.67 165.69 126.90 157.78 c 153.51 162.78 180.10 167.91 206.67 173.17 c 206.87 175.49 206.68 177.93 207.77 180.07 c 206.10 181.30 203.93 181.14 201.97 181.14 c 183.65 180.80 165.32 181.40 147.00 181.28 c 142.61 181.32 138.22 181.10 133.84 181.53 c 131.24 181.66 128.64 181.67 126.04 181.70 z" /> <path fill="#8e9aca" d=" m 207.77 180.07 l 208.14 179.03 c 207.51 182.42 207.98 186.94 211.66 188.35 l 211.43 188.72 c 209.94 188.98 209.87 190.61 209.60 191.78 l 209.10 191.92 c 209.45 188.45 208.18 185.20 207.05 181.99 c 204.37 181.67 201.70 181.21 199.00 181.21 c 177.28 181.19 155.56 181.53 133.84 181.53 c 138.22 181.10 142.61 181.32 147.00 181.28 c 165.32 181.40 183.65 180.80 201.97 181.14 c 203.93 181.14 206.10 181.30 207.77 180.07 z" /> <path fill="#fff160" d=" m 126.04 181.70 c 128.64 181.67 131.24 181.66 133.84 181.53 c 155.56 181.53 177.28 181.19 199.00 181.21 c 201.70 181.21 204.37 181.67 207.05 181.99 c 208.18 185.20 209.45 188.45 209.10 191.92 c 207.49 192.24 205.88 192.55 204.28 192.94 c 202.49 193.11 200.70 193.22 198.92 193.46 c 175.58 197.06 152.26 200.77 128.91 204.31 c 127.23 196.89 126.22 189.31 126.04 181.70 z" /> <path fill="#e4007b" d=" m 209.60 191.78 c 209.87 190.61 209.94 188.98 211.43 188.72 c 213.09 190.26 214.37 192.19 216.06 193.71 c 215.63 194.53 215.20 195.35 214.79 196.19 c 214.21 196.51 213.05 197.16 212.47 197.48 c 192.57 213.74 172.76 230.11 152.78 246.27 c 148.12 242.24 144.09 237.54 140.54 232.51 c 161.58 219.00 183.28 206.51 204.28 192.94 c 205.88 192.55 207.49 192.24 209.10 191.92 l 209.60 191.78 z" /> <path fill="#c693be" d=" m 128.91 204.31 c 152.26 200.77 175.58 197.06 198.92 193.46 c 200.70 193.22 202.49 193.11 204.28 192.94 c 183.28 206.51 161.58 219.00 140.54 232.51 c 134.87 223.99 131.12 214.29 128.91 204.31 z" /> <path fill="#8e9aca" d=" m 216.06 193.71 c 222.92 199.22 231.20 202.37 239.36 205.36 c 233.98 219.12 226.68 232.03 220.44 245.40 c 215.99 255.13 211.09 264.63 206.48 274.28 l 206.32 274.61 c 198.44 271.72 190.57 268.77 183.01 265.13 c 193.62 242.16 204.27 219.20 214.79 196.19 c 215.20 195.35 215.63 194.53 216.06 193.71 z" /> <path fill="#f8b356" d=" m 212.47 197.48 c 213.05 197.16 214.21 196.51 214.79 196.19 c 204.27 219.20 193.62 242.16 183.01 265.13 c 172.25 260.06 161.82 254.05 152.78 246.27 c 172.76 230.11 192.57 213.74 212.47 197.48 z" /> <path fill="#ac8cbd" d=" m 239.36 205.36 c 244.65 207.11 249.96 208.84 255.30 210.44 c 251.95 221.39 248.69 232.38 245.40 243.35 c 244.42 246.35 243.83 249.50 242.37 252.34 l 242.80 252.65 c 240.46 258.88 238.79 265.34 236.90 271.71 c 235.94 275.24 234.83 278.73 234.10 282.31 c 231.72 282.81 229.40 281.48 227.09 281.02 c 220.20 278.88 213.03 277.33 206.48 274.28 c 211.09 264.63 215.99 255.13 220.44 245.40 c 226.68 232.03 233.98 219.12 239.36 205.36 z" /> <path fill="#f09fc0" d=" m 255.30 210.44 c 261.83 212.39 268.47 213.96 274.99 215.91 c 272.93 241.34 270.52 266.73 268.46 292.15 c 257.28 288.75 245.99 285.71 234.59 283.10 c 234.64 279.26 236.69 275.62 236.90 271.71 c 238.79 265.34 240.46 258.88 242.80 252.65 l 242.37 252.34 c 243.83 249.50 244.42 246.35 245.40 243.35 c 248.69 232.38 251.95 221.39 255.30 210.44 z" /> <path fill="#eb6645" d=" m 274.99 215.91 c 280.44 217.22 285.90 218.56 291.32 219.99 c 290.13 246.57 289.23 273.18 287.67 299.73 c 281.50 296.65 274.98 294.37 268.46 292.15 c 270.52 266.73 272.93 241.34 274.99 215.91 z" /> <path fill="#ac8cbd" d=" m 291.32 219.99 c 302.15 222.95 312.85 226.52 323.10 231.14 c 311.49 254.04 300.09 277.06 288.41 299.92 c 288.21 299.98 287.82 300.09 287.63 300.14 l 287.67 299.73 c 289.23 273.18 290.13 246.57 291.32 219.99 z" /> <path fill="#fff160" d=" m 288.41 299.92 c 300.09 277.06 311.49 254.04 323.10 231.14 c 328.81 233.56 334.34 236.39 339.70 239.50 c 337.62 242.28 336.17 245.46 334.19 248.30 c 321.62 266.15 309.83 284.54 297.18 302.33 c 296.74 302.74 295.88 303.57 295.45 303.98 c 293.31 302.28 290.65 301.45 288.41 299.92 z" /> <path fill="#98bf0e" d=" m 334.19 248.30 c 336.17 245.46 337.62 242.28 339.70 239.50 c 346.44 243.48 353.06 247.77 358.91 253.00 l 358.22 253.73 c 339.49 272.30 320.60 290.68 301.78 309.16 c 299.71 307.79 297.82 306.19 295.90 304.64 c 296.22 303.81 296.65 303.04 297.18 302.33 c 309.83 284.54 321.62 266.15 334.19 248.30 z" /> <path fill="#e95d0e" d=" m 301.78 309.16 c 320.60 290.68 339.49 272.30 358.22 253.73 l 359.12 253.03 c 373.27 264.75 382.52 281.69 386.04 299.62 c 381.54 300.21 377.07 301.09 372.60 301.95 c 351.35 305.63 330.15 309.69 308.92 313.50 c 307.62 313.72 306.35 313.62 305.09 313.20 c 303.47 312.43 302.38 310.98 301.17 309.73 l 301.78 309.16 z" /> <path fill="#fff160" d=" m 372.60 301.95 c 377.23 301.95 381.81 300.03 386.38 300.45 c 387.69 307.87 388.32 315.37 388.82 322.88 c 387.20 323.15 385.56 323.33 383.93 323.23 c 360.94 323.23 337.96 323.49 314.97 323.44 c 312.42 323.40 309.85 323.64 307.33 323.18 c 306.80 319.52 305.31 316.14 303.67 312.87 l 305.09 313.20 c 306.35 313.62 307.62 313.72 308.92 313.50 c 330.15 309.69 351.35 305.63 372.60 301.95 z" /> <path fill="#8e9aca" d=" m 112.35 368.41 c 127.50 350.08 142.30 331.45 157.57 313.24 c 163.31 318.35 169.38 323.09 175.40 327.87 c 165.09 341.08 154.26 353.88 143.87 367.03 c 138.93 373.39 133.41 379.29 128.77 385.88 c 122.82 381.33 117.11 376.47 111.62 371.38 c 110.19 370.51 111.80 369.22 112.35 368.41 z" /> <path fill="#98bf0e" d=" m 307.44 323.66 c 329.29 323.87 351.15 323.42 373.00 323.52 c 378.57 323.55 384.20 322.75 389.69 324.12 l 388.53 325.17 c 388.84 332.58 388.12 339.99 386.84 347.28 l 386.49 347.23 c 361.68 342.73 336.93 337.81 312.18 332.96 c 310.71 332.61 309.21 332.36 307.72 332.15 c 307.70 329.32 307.82 326.47 307.44 323.66 z" /> <path fill="#ac8cbd" d=" m 175.40 327.87 c 179.93 331.11 184.45 334.38 189.06 337.50 c 180.32 352.06 172.12 366.93 163.53 381.58 c 160.39 387.31 156.77 392.77 153.85 398.63 c 153.31 399.63 152.77 400.64 152.24 401.66 c 150.76 401.47 149.62 400.41 148.37 399.71 c 141.64 395.39 135.03 390.86 128.77 385.88 c 133.41 379.29 138.93 373.39 143.87 367.03 c 154.26 353.88 165.09 341.08 175.40 327.87 z" /> <path fill="#e95d0e" d=" m 307.62 332.36 c 309.14 332.52 310.66 332.72 312.18 332.96 c 336.93 337.81 361.68 342.73 386.49 347.23 c 383.80 366.12 373.67 383.70 360.00 396.91 c 341.91 378.20 323.94 359.36 305.78 340.72 c 306.57 337.97 307.46 335.23 307.62 332.36 z" /> <path fill="#f09fc0" d=" m 163.53 381.58 c 172.12 366.93 180.32 352.06 189.06 337.50 c 194.97 341.20 200.94 344.81 207.13 348.01 c 199.50 371.30 191.89 394.59 184.25 417.88 c 173.28 413.60 162.56 408.48 152.64 402.14 c 153.04 400.96 153.45 399.79 153.85 398.63 c 156.77 392.77 160.39 387.31 163.53 381.58 z" /> <path fill="#eb6878" d=" m 297.28 352.45 c 300.74 349.03 303.85 345.23 305.78 340.72 c 323.94 359.36 341.91 378.20 360.00 396.91 c 350.95 405.87 340.25 413.16 328.70 418.51 c 318.22 396.50 307.82 374.44 297.28 352.45 z" /> <path fill="#eb6645" d=" m 207.13 348.01 c 212.97 351.11 219.08 353.62 225.22 356.06 c 222.32 370.35 220.01 384.75 217.35 399.09 c 215.81 408.29 213.84 417.42 212.60 426.67 c 202.92 424.57 193.44 421.55 184.25 417.88 c 191.89 394.59 199.50 371.30 207.13 348.01 z" /> <path fill="#84d0f0" d=" m 281.38 360.78 c 286.90 358.49 292.51 356.21 297.28 352.45 c 307.82 374.44 318.22 396.50 328.70 418.51 c 319.92 422.81 310.54 425.89 300.99 427.93 c 294.31 405.59 288.02 383.13 281.38 360.78 z" /> <path fill="#f8b356" d=" m 225.22 356.06 c 230.84 357.86 236.48 359.59 242.24 360.87 l 243.87 360.31 c 245.03 370.47 243.85 380.76 244.05 390.97 l 243.98 391.66 c 242.57 401.12 242.90 410.77 243.10 420.32 c 242.92 424.03 242.83 427.75 242.75 431.47 c 232.61 430.58 222.47 429.20 212.60 426.67 c 213.84 417.42 215.81 408.29 217.35 399.09 c 220.01 384.75 222.32 370.35 225.22 356.06 z" /> <path fill="#89bf67" d=" m 261.87 362.74 c 268.39 362.79 274.97 362.24 281.26 360.42 l 281.38 360.78 c 288.02 383.13 294.31 405.59 300.99 427.93 c 291.25 430.20 281.26 431.53 271.26 431.82 c 268.42 408.76 265.10 385.75 261.87 362.74 z" /> <path fill="#bad165" d=" m 244.05 390.97 c 244.94 381.06 244.14 371.04 245.12 361.15 c 250.59 362.48 256.26 362.67 261.87 362.74 c 265.10 385.75 268.42 408.76 271.26 431.82 c 261.77 432.10 252.22 432.26 242.75 431.47 c 242.83 427.75 242.92 424.03 243.10 420.32 c 244.70 410.87 243.97 401.20 243.98 391.66 l 244.05 390.97 z" /> <path fill="#dec887" d=" m 243.10 420.32 c 242.90 410.77 242.57 401.12 243.98 391.66 c 243.97 401.20 244.70 410.87 243.10 420.32 z" /> </svg>

css html5 canvas colors letter