Everyone knows you can use console.log() to log text and variables to the console. Did you know you could also render (limited) CSS, SVGs, and even HTML in it?!? I didn’t! It’s a neat technique that can delight the curious and further your brand for curious users.
If you’re in a browser other than Safari, open up the DevTools console to see some examples of what we can create!
Here’s the magic: %c. It lets us render a console message (like console.log or console.info) using a bit of CSS!
Let’s see how it works.
Here’s the console.info from the online version of Adobe Photoshop (partially unminified):
You can probably already guess, the %cs correspond to the strings that follow. Each one starts a new element that has display: inline.
The SVG is rendered as a data:image. Any data image works here!
console.info(
'%c ',
"padding-left:300px;line-height:200px;padding-block:100px;background-image: url('data:image/jpeg;base64,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'); background-size: 300px; background-repeat: no-repeat;"
);Code language: JavaScript (javascript)Interestingly, a character (like the space I included to the right of the %c above) is required for the image to show up.
Note: It’s important that the SVG has xmlns="http://www.w3.org/2000/svg" as an attribute! If it doesn’t, it won’t render, even in browsers that support SVGs as background images in the console.
I noticed that there’s a limit of one url() inside of SVGs used as background images in the console. That means that we cannot do something like this, applying separate gradients to different SVG elements, and have it work in the console:
Using the same attribute via attributes directly on the SVG elements also does not work:
However, if you’re able to apply the url() via CSS property, you can use the same gradient or other property. For example, this should work:
You can also render HTML inside of the SVG that’s a background image inside of the console message 🤯.
However, note that the HTML content has the same sort of restrictions that the SVG itself has, like no <a> tags, no event listeners, and such.
Using HTML in the SVG might be particularly helpful if you’re wanting to include something like lists or use relative positioning.
One other thing that this enables is 3D transforms! SVG content itself can’t have 3D transforms applied to it, but HTML inside of a foreignObject in the SVG can! Note that inside of the console the built-in depth sorting doesn’t seem to work in Chrome so I had to apply z-index to the appropriate sides to make this cube visualization work (another alternative would be to only use borders so you can’t tell the depth sorting is off):
So, what are some things that we can make given these capabilities and limitations? Here are some additional ideas to inspire you!
Note that you can decode and unminify any of these examples to view the sort of raw input I gave it to generate these console messages. To do so, you can paste the part inside of the ticks (`) into this CodePen, optionally copying the result back into the CSS section and having CodePen format the result for you.
Here’s my first attempt at adding animation to the console that I created for my personal blog:
What would a post exploring a new animation technique be without a horse-running animation? This one is from Cyril Levallois (doesn’t work in Firefox due to the character limit):
console.info(
'%c ',
`padding-left:950px;padding-top:700px;background-image:url("data:image/svg+xml,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='svg2985' viewBox='0 0 950 700'%3E%3Cg id='socle'%3E%3Cpath style='opacity:.5;fill:grey;stroke:none' d='m 747,571.086 c 0,12.481 -138.344,22.6 -309,22.6 -170.656,0 -309,-10.118 -309,-22.6 l 0,0 c 0,-12.481 138.344,-22.6 309,-22.6 170.656,0 309,10.118 309,22.6 l 0,0 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' m 747,571.086 c 0,12.481 -138.344,22.6 -309,22.6 -170.656,0 -309,-10.118 -309,-22.6 l 0,0 c 0,-12.481 138.344,-22.6 309,-22.6 170.656,0 309,10.118 309,22.6 l 0,0 z; m 710.5,572.419 c 0,12.481 -123.346,22.6 -275.5,22.6 -152.154,0 -275.5,-10.118 -275.5,-22.6 l 0,0 c 0,-12.481 123.345,-22.6 275.5,-22.6 152.154,0 275.5,10.119 275.5,22.6 l 0,0 z; m 654.831,572.419 c 0,12.481 -103.794,22.6 -231.831,22.6 -128.037,0 -231.831,-10.118 -231.831,-22.6 l 0,0 c 0,-12.481 103.794,-22.6 231.831,-22.6 128.037,0 231.831,10.119 231.831,22.6 l 0,0 z; m 654.831,572.419 c 0,12.481 -103.794,22.6 -231.831,22.6 -128.037,0 -231.831,-10.118 -231.831,-22.6 l 0,0 c 0,-12.481 103.794,-22.6 231.831,-22.6 128.037,0 231.831,10.119 231.831,22.6 l 0,0 z; m 665.834,572.419 c 0,12.481 -108.721,22.6 -242.834,22.6 -134.113,0 -242.833,-10.118 -242.833,-22.6 l 0,0 c 0,-12.481 108.72,-22.6 242.833,-22.6 134.113,0 242.834,10.119 242.834,22.6 l 0,0 z; m 708.833,572.419 c 0,12.481 -124.391,22.6 -277.833,22.6 -153.443,0 -277.833,-10.118 -277.833,-22.6 l 0,0 c 0,-12.481 124.389,-22.6 277.833,-22.6 153.442,0 277.833,10.119 277.833,22.6 l 0,0 z; M726.5,572.419c0,12.481-130.957,22.6-292.5,22.6c-161.543,0-292.5-10.118-292.5-22.6l0,0c0-12.481,130.956-22.6,292.5-22.6 C595.543,549.819,726.5,559.938,726.5,572.419L726.5,572.419z; m 747,571.086 c 0,12.481 -138.344,22.6 -309,22.6 -170.656,0 -309,-10.118 -309,-22.6 l 0,0 c 0,-12.481 138.344,-22.6 309,-22.6 170.656,0 309,10.118 309,22.6 l 0,0 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='queue'%3E%3Cpath style='fill:%23fffea1;stroke:%23f2e000;stroke-width:4' d='M 484,303 C 621,225 800,162 870,168 940,175 934,230 922,252 910,273 912,295 839,301 766,307 757,317 708,322 660,326 610,332 540,319 471,305 484,303 484,303 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' M 484,303 C 621,225 800,162 870,168 940,175 934,230 922,252 910,273 912,295 839,301 766,307 757,317 708,322 660,326 610,332 540,319 471,305 484,303 484,303 z; M 479.167,290.833 C 593.5,206.5 616.51873,286.94931 775.5,215 882.56893,166.54438 898.28731,254.11624 889.31777,278.13654 880.85672,300.79511 840.688,331.324 788.833,348.5 736,366 703.167,371.166 639.5,351.5 c -63.667,-19.666 -84.666,-44 -122.667,-48.667 -38,-4.667 -37.666,-12 -37.666,-12 z; M 480.5,291.833 C 590.833,220.5 663.08528,226.48198 778.82285,240.46954 875.17934,252.11479 887.333,286 884.833,326.5 c -12,21 -22.333,50 -92.333,44.5 -55.485,-4.359 -109.833,-21.334 -173.5,-41 -63.667,-19.666 -73.5,-22.333 -111.5,-27 -38,-4.667 -27,-11.167 -27,-11.167 z; M 480.5,291.833 C 590.833,220.5 660.586,212.932 785,239 c 105,22 113.333,60.5 108,99 -5.333,38.5 -42.03046,44.94416 -92.5,40 -55.39081,-5.42626 -91.333,-33.334 -155,-53 -63.667,-19.666 -100,-17.333 -138,-22 -38,-4.667 -27,-11.167 -27,-11.167 z; m 491,305 c 110.334,-71.333 210.72902,-105.80199 335.5,-81.5 79.24111,15.43401 112.95939,56.47969 91,92 -20.43853,33.06025 -42,44.5 -96,36.5 -55.056,-8.156 -42,-21 -130,-24 -68.643,-2.34 -145,-6.333 -183,-11 -38,-4.667 -17.5,-12 -17.5,-12 z; M 491.667,296.833 C 602.001,225.5 704.087,183.432 828.501,209.5 c 105,22 119.666,68.833 93.666,102.333 -23.831,30.705 -45.666,34 -82.666,32 -55.575,-3.004 -59.001,-26.666 -147.001,-29.666 -68.643,-2.34 -145.333,-0.667 -183.333,-5.334 -38,-4.667 -17.5,-12 -17.5,-12 z; M491.667,296.833 C602.001,225.5,733,175,862.5,191c86.066,10.634,103.5,56.5,77.5,90c-23.831,30.705-52.064,36.464-89,33.5c-81-6.5-99.5,2-187.5-1 c-68.643-2.34-116-3.5-159.5,0.5C465.875,317.506,491.667,296.833,491.667,296.833z; M 484,303 C 621,225 800,162 870,168 940,175 934,230 922,252 910,273 912,295 839,301 766,307 757,317 708,322 660,326 610,332 540,319 471,305 484,303 484,303 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='crinière'%3E%3Cpath style='fill:%23fffea1;stroke:%23f2e000;stroke-width:4' d='M251,142c88-9,114-4,143,3c29,8,52,30,84,35c33,5,62,1,80,14c17,13,27,33,23,46c-5,13-15,35-44,36c-55,2-84-32-110-28 c-25,5-38,26-50,39C366,299,251,142,251,142z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' M251,142c88-9,114-4,143,3c29,8,52,30,84,35c33,5,62,1,80,14c17,13,27,33,23,46c-5,13-15,35-44,36c-55,2-84-32-110-28 c-25,5-38,26-50,39C366,299,251,142,251,142z; m 245.833,140.833 c 88,-9 86.929,4.495 123.333,5 48,0.667 67.228,-22.685 109.333,-29.333 19,-3 45.347,7.988 55,18.667 15.667,17.333 15.334,36 3,58 -12.334,22 -37.666,19 -69.333,17.667 -31.667,-1.333 -42.666,5.666 -65.666,30.333 -22.863,24.521 -28.56899,43.86519 -51.667,47.333 -7.32753,1.10012 -104,-147.667 -104,-147.667 z; M258.833,134.833c73.333,10.333,84.595,19.162,121,19.667c48,0.667,69.679-31.995,107.667-51.333c18.333-9.333,43.347-7.679,53,3 c15.667,17.333,22,36.333,11.667,62c-9.419,23.396-15.334,29.333-53.667,44.667c-29.428,11.771-55.333,12.667-88.333,31.333 c-29.181,16.506-30,23.667-47.333,38.333C342.75,299.493,258.833,134.833,258.833,134.833z ; M260.5,134.5c49.667,0,85.345,5.837,120.667,14.667c65.333,16.333,75.345,0.339,113.333-19c18.333-9.333,33.347-10.346,43,0.333 c15.667,17.333,20,29.667,11.334,55c-8.163,23.864-12.334,39.667-50.667,55c-29.428,11.771-49,5.667-87,16.667 c-32.204,9.322-40.333,18.333-46.667,24.999C346.38,301.239,260.5,134.5,260.5,134.5z; M264,115.5c49.667,0,98.482,18.239,123.167,45c35.667,38.667,59,50.667,110.833,29.5c19.045-7.777,45.443-0.077,54,11.5 c8.5,11.5,12.129,29.054,6,43.5c-7,16.5-28.5,37.5-49,42.5c-30.792,7.51-29.5-3-68.5-8c-33.254-4.263-55.5-8-79.5-6 C334.783,275.685,264,115.5,264,115.5z; M264,115.5c49.667,0,111.483,11.906,136.168,38.667c35.667,38.667,56.815,50.575,112.333,43.333c23-3,41.777,12.09,50.334,23.667 c8.5,11.5,10.462,31.22,4.333,45.667c-7,16.5-24.5,26.333-45,31.333c-30.792,7.51-48.666,0.333-87-17.333 C404.72,266.801,385,271.5,361,273.5C334.783,275.685,264,115.5,264,115.5z; M264,115.5c49.667,0,106.009,18.271,136.168,38.667C446.5,185.5,456.5,193.5,512.501,197.5c23.136,1.652,42.499,9.5,53.499,21 c11.41,11.929,15.629,35.554,9.5,50c-7,16.5-24.5,25-51.5,28c-31.501,3.5-40.666-6.333-79-24c-30.448-14.032-57-5.5-77.5,6 C344.556,291.371,264,115.5,264,115.5z ; M251,142c88-9,114-4,143,3c29,8,52,30,84,35c33,5,62,1,80,14c17,13,27,33,23,46c-5,13-15,35-44,36c-55,2-84-32-110-28 c-25,5-38,26-50,39C366,299,251,142,251,142z'%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='patte-ar-d'%3E%3Cpath style='fill:%23ffb039;stroke:%23ff4c01;stroke-width:4' d=' m 423.7,325.7 c -9,18 -13,35 -2,48 11,14 18,17 45,31 26,15 48,22 59,18 11,-4 7,-7 16,-2 8,5 60,40 66,44 5,4 17,26 31,29 13,2 18,-8 22,-25 3,-19 -3,-39 -11,-41 -21,-6 -45,11 -85,-46 -5,-7 -29,3 -29,3 0,0 -11,-17 -10,-25 3,-8 -13,-50 -50,-57 -36,-7 -52,23 -52,23 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' m 423.7,325.7 c -9,18 -13,35 -2,48 11,14 18,17 45,31 26,15 48,22 59,18 11,-4 7,-7 16,-2 8,5 60,40 66,44 5,4 17,26 31,29 13,2 18,-8 22,-25 3,-19 -3,-39 -11,-41 -21,-6 -45,11 -85,-46 -5,-7 -29,3 -29,3 0,0 -11,-17 -10,-25 3,-8 -13,-50 -50,-57 -36,-7 -52,23 -52,23 z; m 497.834,300.5 c -15.85305,-5.56284 -48.219,-2.643 -57.667,12 -9.448,14.643 -18.097,11.717 -21.333,26.667 -3.236,14.95 0.932,65.476 6,73.333 5.068,7.857 23.14,12.737 20.333,20.334 -2.807,7.597 -18.533,32.299 -25.667,41 -7.134,8.701 -16.297,20.21 -15,33.666 1.297,13.456 18.312,11.043 34.667,6.334 22,-6.334 42.667,-23.334 46,-33.334 3.333,-10 -16.333,-38 9,-62 9.791,-9.275 15.334,-15.332 16.667,-19.666 1.333,-4.334 -14.098,-19.646 -3.049,-22.99 11.049,-3.344 19.986,3.463 21.715,-35.01 1.729,-38.473 -15.81205,-34.77084 -31.666,-40.334 z; m 469.833,321.501 c -13.595,-9.872 -52.42,-14.322 -65.667,-3 -13.247,11.321 -14.912,12.007 -22.295,25.402 -7.384,13.397 11.025,52.617 13.629,61.597 2.605,8.979 -18.801,25.527 -23.667,32.001 -4.866,6.474 -16.333,13.666 -29,29.333 -7.074,8.75 -30.388,35.069 -33,48.333 -2.612,13.264 -5.352,14.493 11.667,14.667 22.893,0.234 68.275,-4.707 74.333,-13.333 6.058,-8.626 7.799,-39.541 31.667,-65 15,-16 28.814,-23.229 31.333,-27 2.519,-3.771 -31.61,-13.532 -20.333,-16 10.667,-2.334 44.549,-20.323 49.667,-35 12.678,-36.365 -4.74,-42.128 -18.334,-52 z; M478.833,332.5c-13.595-9.872-34.753-19.989-48-8.667c-13.247,11.321-18.616,13.938-26,27.334 c-7.384,13.396-3.433,56.973,2.333,64.334c15.667,20,30.667,46.333,21,57.667c-5.255,6.162-20.333,24.333-36,41 c-7.706,8.198-32.675,32.343-38.333,38.666c-5.667,6.334-9.685,12.16,7.333,12.334c22.893,0.234,55.941,2.626,62-6 c6.058-8.626,4.132-9.875,28-35.334c15-16,21.148-29.563,23.667-33.333c2.519-3.771-8.028-36.7-1.667-46.333 c11.667-17.667,15.216-53.657,20.333-68.334C506.179,339.469,492.427,342.372,478.833,332.5z; M487,325c-13.595-9.872-20.253-6.322-33.5,5c-13.247,11.321-15.616,11.604-23,25c-7.384,13.396,0.216,49.137,7.5,55 c20.5,16.5,39.635,17.774,46,29.5c9.5,17.5,20.5,35.5,8.5,71c-3.603,10.659-17,32.5-21,42c-3.298,7.833-7.018,11.826,10,12 c22.893,0.234,59.5,2.5,63-3c5.659-8.894,7.5-32.5,5-63c-1.792-21.858-9.5-55.5-24-86.5c-1.921-4.107-30.861,5.133-24.5-4.5 c11.667-17.667,16.075-39.967,15.5-55.5C515,311.5,500.594,334.872,487,325z; M484.833,315.834c-13.595-9.872-24.753,0.678-38,12c-13.247,11.321-18,30.667-15.667,44.333 c2.574,15.079,34.049,44.47,41.333,50.333c20.5,16.5,42.733,1.468,51.333,11.668c14.333,17,20.667,26,40,60 c8.918,15.683,17.702,37.817,21.666,47.332c5,12.001,5.755,17.535,20.667,9.334c26.667-14.666,32.628-45.844,32-52.333 c-1-10.332-14.667-21.333-35-40c-19.668-18.057-35-33.333-54.667-59.001c-3.824-4.991-23.725,10.807-25-0.666 c-2-18-2.091-36.467-2.667-52C519.333,306.334,498.427,325.706,484.833,315.834z; M483.833,316.334c-13.595-9.872-24.753,0.678-38,12c-13.247,11.321-18,30.667-15.667,44.333 c2.574,15.079,29.549,34.47,36.833,40.333c20.5,16.5,63.165-1.418,71.5,9c8.666,10.832,9.5-0.5,42.5,31.5 c12.951,12.56,58.5,43,69.5,50c10.969,6.979,35.246,23.842,40,7.5c8-27.5-4-50-9-55.5c-8.509-9.359-7-3-47-24 c-23.64-12.411-41.5-16.5-69.5-43c-4.566-4.322-27.148,12.986-26,1.5c2-20-2.334-31.334-14-46.5 C500.29,311.377,497.427,326.206,483.833,316.334z; m 423.7,325.7 c -9,18 -13,35 -2,48 11,14 18,17 45,31 26,15 48,22 59,18 11,-4 7,-7 16,-2 8,5 60,40 66,44 5,4 17,26 31,29 13,2 18,-8 22,-25 3,-19 -3,-39 -11,-41 -21,-6 -45,11 -85,-46 -5,-7 -29,3 -29,3 0,0 -11,-17 -10,-25 3,-8 -13,-50 -50,-57 -36,-7 -52,23 -52,23 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='patte-av-d'%3E%3Cpath style='fill:%23ffb039;stroke:%23ff4c01;stroke-width:4' d='M 340,369 C 340,369 327,379 314,380 300,380 296,384 293,394 291,400 285,411 262,456 237,504 209,530 201,544 197,550 201,555 209,555 229,554 265,555 275,555 281,555 293,532 296,527 297,523 305,502 310,490 314,477 320,464 323,451 325,445 329,436 332,424 334,419 338,397 342,391 346,385 363,389 357,374 350,359 340,369 340,369 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' M 340,369 C 340,369 327,379 314,380 300,380 296,384 293,394 291,400 285,411 262,456 237,504 209,530 201,544 197,550 201,555 209,555 229,554 265,555 275,555 281,555 293,532 296,527 297,523 305,502 310,490 314,477 320,464 323,451 325,445 329,436 332,424 334,419 338,397 342,391 346,385 363,389 357,374 350,359 340,369 340,369 z; m 339.167,347.501 c -10.512,1.479 -13.889,12.478 -13.667,21.333 0.333,13.333 1.667,28.999 5.333,41.333 3.278,11.026 13.354,21.155 29.667,46 21.667,33 78.479,43.17 85,44.334 9.333,1.666 16.599,-0.642 18,-7.334 9,-43 -6.333,-63 -16,-68 -9.006,-4.658 -21.485,0.495 -27.333,-2.666 -12.333,-6.667 -18.94346,-13.25146 -25.08046,-19.08146 -6.667,-6.333 -5.35827,-4.90343 -11.47538,-13.91854 -7.69746,-11.34415 -6.42446,-7.17338 -9.41446,-16.80838 -3,-9.667 3.57614,-6.71361 3.57614,-14.04061 0,-10 -3.85465,-8.11604 -13.9396,-12.40431 C 351.96718,341.20208 349.68,346.022 339.167,347.501 z; m 309.833,331.834 c -10.512,1.479 -13.889,12.478 -13.667,21.333 C 296.5,366.5 274.333,389.666 278,402 c 3.278,11.026 12.271,29.014 37,45.5 42,28 76.979,28.336 83.5,29.5 9.333,1.666 20.099,-0.308 21.5,-7 9,-43 -13.333,-56 -23,-61 -9.006,-4.658 -22.5,5.5 -42,2.5 -13.857,-2.132 -27.863,-13.67 -34,-19.5 -6.667,-6.333 8.936,-6.957 18,-13 15,-10 12.52598,-7.10958 13.18731,-17.17615 0.53553,-8.15177 3.07106,-8.22884 3.07106,-15.55584 0,-10 -5.69754,-13.35814 -15.9599,-17.20254 -10.0983,-3.78293 -18.95247,1.28953 -29.46547,2.76853 z; m 311.833,329.667 c -10.512,1.479 -13.888,7.978 -13.667,16.833 0.333,13.333 -49,-7 -53.333,4.666 -4.005,10.783 -3.193,52.996 14.333,77 23,31.5 43.226,51.889 48.667,55.667 12,8.334 21.88,9.234 25.333,3.333 18.333,-31.333 7.628,-70.383 3.333,-76 -4.333,-5.666 -8.667,-2.666 -20.667,-7.333 -13.066,-5.082 -16.529,-5.837 -22.667,-11.667 -6.667,-6.333 20.269,13.377 29.333,7.334 15,-10 29.657,-28.699 26.667,-38.334 -3,-9.667 -1,-3.172 -1,-10.499 0,-10 -3.33623,-6.34853 -4.84823,-17.20253 -1.512,-10.854 -20.97077,-5.27647 -31.48377,-3.79747 z; m 310.333,328.667 c -10.512,1.479 -9.555,13.978 -9.333,22.833 0.333,13.333 -46,-17.5 -59.5,-6 -8.757,7.459 -28.699,49.787 -28,79.5 1,42.5 15.396,66.301 19.5,71.5 7.5,9.5 13.033,8.838 19,5.5 29.5,-16.5 46.295,-62.883 42,-68.5 -4.333,-5.666 -19.755,-13.156 -27.5,-31.5 -9.5,-22.5 -0.78492,-7.22008 7.50508,-5.50508 14.5,3 35.43092,7.54808 44.49492,1.50508 15,-10 32.157,-28.199 29.167,-37.834 -3,-9.667 -1,-6.20246 -1,-13.52946 0,-10 -1.821,0.21746 -3.333,-10.63654 -1.512,-10.854 -22.488,-8.812 -33.001,-7.333 z; m 317.5,332.5 c -10.512,1.479 -29,16 -36.5,16.5 -13.308,0.887 -38,-20 -60,-13 -10.961,3.487 -48.5,17 -72,48.5 -25.42,34.074 -21,58.5 -21,65.5 0,12.104 12.163,10.41 19,10.5 38,0.5 70.5,-24 63.5,-32.5 -4.535,-5.506 0.5,-26 2.5,-32.5 8.488,-27.585 10.21,-16.715 18.5,-15 14.5,3 60.436,15.543 69.5,9.5 15,-10 32.157,-28.199 29.167,-37.834 -3,-9.667 -1,-3.172 -1,-10.499 0,-10 -1.821,-2.813 -3.333,-13.667 -1.512,-10.854 2.178,3.021 -8.334,4.5 z; m 319.667,351.5 c -10.512,1.479 -3.943,1.139 -10.667,4.5 -14,7 -20.963,21.199 -40.5,33.5 -13.5,8.5 -45,36.5 -83,59 -36.58,21.659 -58.5,21 -74.5,28.5 -10.959,5.137 6.172,20.424 12,24 22,13.5 36.107,29.613 47,28 13.5,-2 61.506,-38.883 66.5,-43.5 26.5,-24.5 27.5,-36 39.5,-44 12.32,-8.214 29.936,-23.957 39,-30 15,-10 20.324,-30.699 17.333,-40.334 -3,-9.667 -1,-3.172 -1,-10.499 0,-10 0.19931,2.74284 -1.31269,-8.11116 -1.512,-10.854 0.15869,-2.53484 -10.35331,-1.05584 z; M 340,369 C 340,369 327,379 314,380 300,380 296,384 293,394 291,400 285,411 262,456 237,504 209,530 201,544 197,550 201,555 209,555 229,554 265,555 275,555 281,555 293,532 296,527 297,523 305,502 310,490 314,477 320,464 323,451 325,445 329,436 332,424 334,419 338,397 342,391 346,385 363,389 357,374 350,359 340,369 340,369 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='Body'%3E%3Cpath style='fill:%23ffb039;stroke:%23ff4c01;stroke-width:4' d=' m 277.749,144.997 c 39.4137,23.54416 56.313,47.503 73.199,81.67 16.886,34.167 26.552,77.416 26.552,77.416 8.054,-0.378 18.167,2.833 36.667,0.667 18.5,-2.166 34.392,-10.935 61,-11.583 27.333,-0.667 44.417,12 55.667,32 11.25,20 9.29562,44.29553 5.666,52 -3.62962,7.70447 -24.40453,19.32076 -41,24 -27.34851,7.71115 -60.33352,13.48377 -92.333,10.666 -48.67118,-4.28583 -68.52762,-14.04462 -90.333,-30 -14.69824,-10.75496 -30.36446,-32.74822 -39.334,-61.333 -11.55082,-36.81097 -8.15685,-64.11168 -3.417,-98.833 6.24781,-45.7678 7.666,-76.67 7.666,-76.67 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' m 277.749,144.997 c 39.4137,23.54416 56.313,47.503 73.199,81.67 16.886,34.167 26.552,77.416 26.552,77.416 8.054,-0.378 18.167,2.833 36.667,0.667 18.5,-2.166 34.392,-10.935 61,-11.583 27.333,-0.667 44.417,12 55.667,32 11.25,20 9.29562,44.29553 5.666,52 -3.62962,7.70447 -24.40453,19.32076 -41,24 -27.34851,7.71115 -60.33352,13.48377 -92.333,10.666 -48.67118,-4.28583 -68.52762,-14.04462 -90.333,-30 -14.69824,-10.75496 -30.36446,-32.74822 -39.334,-61.333 -11.55082,-36.81097 -8.15685,-64.11168 -3.417,-98.833 6.24781,-45.7678 7.666,-76.67 7.666,-76.67 z; m 281.5,164.5 c 32,19.667 53.285,37.002 74.667,76.667 C 379.462,284.38 376,303.5 376,303.5 c 8.054,-0.377 12.075,1.898 35.204,-5.968 23.129,-7.866 42.642,-15.929 70.296,-17.032 27.654,-1.103 52.156,22.366 58.667,38.334 6.511,15.968 3.33553,32.05439 -4,45.666 -7.33553,13.61161 -28.054,22.269 -41.667,26 -13.613,3.731 -39.667,14.667 -77.667,16.334 -25.362,1.112 -58,4.999 -90.667,-11.334 -26.55,-13.274 -47.107,-43.448 -51,-66.333 -3.893,-22.885 -1,-74.334 -0.167,-96.834 0.833,-22.5 6.501,-67.833 6.501,-67.833 z; m 289,145.5 c 32,19.667 59,49.5 72.5,84.5 13.5,35 17.5,65.5 17.5,65.5 8.054,-0.377 12.075,1.898 35.204,-5.968 23.129,-7.866 27.142,-10.91885 54.796,-12.02185 27.654,-1.103 48.489,18.52185 55,34.48985 6.511,15.968 2.27969,36.87316 -1.52031,46.44416 -3.801,9.571 -14.887,18.81469 -26.47969,23.55584 -13.06464,5.34315 -39.5,21.333 -77.5,23 -25.362,1.112 -70.333,0.833 -103,-15.5 -26.55,-13.274 -37.607,-46.115 -41.5,-69 -3.893,-22.885 3.167,-73.667 4,-96.167 0.833,-22.5 11,-78.833 11,-78.833 z; m 298.5,134.833 c 32,19.667 55.167,47.333 68.667,82.333 13.5,35 14.167,69 14.167,69 6.167,0.333 18.833,-3 32.167,-7.667 23.059,-8.071 39,-10.667 55.333,-6.667 16.499,4.041 39.489,17.033 46,33 6.51,15.969 0.82946,37.90462 -6,50 -6.82946,12.09538 -20.333,26.333 -36.667,35.666 -12.256,7.003 -27.79898,11.34415 -52.667,12 -25.37759,0.66929 -77.333,0.334 -110,-16 -26.55,-13.273 -29.273,-52.449 -33.167,-75.334 -3.893,-22.884 3.167,-73.667 4,-96.167 0.833,-22.5 18.167,-80.164 18.167,-80.164 z; m 279,119 c 32,19.667 56.582,34.134 81.5,78.5 20.5,36.5 24.5,83 24.5,83 6.167,-1.667 19.909,-3.494 34,-4.5 28,-2 47.667,2.5 64,6.5 16.499,4.041 31.52046,22.54623 35,34.97969 3.47954,12.43347 2.82438,40.44523 -3.5,50.52031 -6.32438,10.07508 -15.167,15.667 -31.5,25 -12.256,7.003 -25.5,7.834 -63.5,9.5 -25.362,1.113 -74.333,-7.166 -107,-23.5 -26.55,-13.273 -28.107,-47.615 -32,-70.5 -3.893,-22.884 -1,-71.001 -0.167,-93.5 C 281.166,192.501 279,119 279,119 z; m 283.5,116 c 36,20.5 61.014,43.103 84,88.5 20,39.5 20,91 20,91 8,1.5 21.586,1.441 35.5,-1 28.5,-5 46.667,-9.5 63,-5.5 16.499,4.041 27.489,19.533 34,35.5 6.51,15.969 -0.701,42.43 -4.5,52 -3.801,9.572 -12.66898,24.18511 -30,31.5 -8.21539,3.46747 -25,5.334 -63,7 -25.362,1.113 -51.333,-7.666 -84,-24 -26.55,-13.273 -46.107,-45.115 -50,-68 -3.893,-22.885 -6.5,-70.501 -5.667,-93 0.833,-22.499 0.667,-114 0.667,-114 z; m 277,123.5 c 36,20.5 62.533,40.383 87,85 25.5,46.5 20,90.5 20,90.5 8,1.5 21.586,1.441 35.5,-1 28.5,-5 51.167,-12 67.5,-8 16.499,4.041 28.489,21.533 35,37.5 6.51,15.969 0.32131,41.91785 -5.5,52.5 -5.82131,10.58215 -17.15685,21.70761 -34.5,27 -13.50102,4.11994 -24,5.334 -62,7 -25.362,1.113 -50.833,-7.166 -83.5,-23.5 -26.55,-13.273 -46.607,-46.115 -50.5,-69 -3.893,-22.885 -7.5,-65.501 -6.667,-88 0.833,-22.499 -2.333,-110 -2.333,-110 z; m 277.749,144.997 c 39.4137,23.54416 56.313,47.503 73.199,81.67 16.886,34.167 26.552,77.416 26.552,77.416 8.054,-0.378 18.167,2.833 36.667,0.667 18.5,-2.166 34.392,-10.935 61,-11.583 27.333,-0.667 44.417,12 55.667,32 11.25,20 9.29562,44.29553 5.666,52 -3.62962,7.70447 -24.40453,19.32076 -41,24 -27.34851,7.71115 -60.33352,13.48377 -92.333,10.666 -48.67118,-4.28583 -68.52762,-14.04462 -90.333,-30 -14.69824,-10.75496 -30.36446,-32.74822 -39.334,-61.333 -11.55082,-36.81097 -8.15685,-64.11168 -3.417,-98.833 6.24781,-45.7678 7.666,-76.67 7.666,-76.67 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='patte-av-g'%3E%3Cpath style='fill:%23ffb039;stroke:%23ff4c01;stroke-width:4' d='M 340,369 C 331.948,373.871 327,379 314,380 300,380 278,367 272,367 266,366 245,366 205,403 165,440 164,476 165,486 166,495 169,500 189,499 208,497 234,482 240,475 247,469 251,463.541 250,459.541 250,455.541 251,429 255,421 259,413 284.721,420.334 289.738,421.246 295.723,422.334 319.015,429.088 325,428 330.017,427.088 344,418 348,412 352,406 363.424,388.824 357,374 350.418,358.812 346.402,365.127 340,369 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' M 340,369 C 331.948,373.871 327,379 314,380 300,380 278,367 272,367 266,366 245,366 205,403 165,440 164,476 165,486 166,495 169,500 189,499 208,497 234,482 240,475 247,469 251,463.541 250,459.541 250,455.541 251,429 255,421 259,413 284.721,420.334 289.738,421.246 295.723,422.334 319.015,429.088 325,428 330.017,427.088 344,418 348,412 352,406 363.424,388.824 357,374 350.418,358.812 346.402,365.127 340,369 z; M 342.167,360.833 C 335.003,367.283 327.266,392.953 321.823,410.691 319.024,419.811 311.136,429.58 306.473,445.686 299.14,471.019 279.151,497.128 266.55,518.265 256.217,535.598 234.408,557.841 225.834,569.5 217.501,580.833 227.395,581.717 236.834,582.166 250.834,582.833 290.306,582.833 299.167,582.833 305.834,582.833 306.92,584.811 315.56,567.321 321.742,554.806 336.084,500.394 338.467,493.773 341.467,485.44 357.05,454.199 359.177,447.816 364.177,432.816 364.117,430.387 367.5,420.5 376.167,395.166 374.454,391.215 375.833,379.5 377.212,367.785 370.59,364.371 362.833,362.833 355.076,361.295 349.331,354.383 342.167,360.833 z; M 329.048,363.502 C 327.564,373.027 324.88,376.688 331.857,393.881 335.444,402.721 342.646,436.217 347.548,452.252 351.724,465.911 354.099,490.197 354.432,515.197 354.701,535.375 352.789,552.713 353.5,567.167 354.191,581.217 353.444,581.1 362.833,582.167 377.5,583.834 420.833,583.167 432.5,580.167 438.957,578.507 437.89,568.752 432.462,550.014 429.137,538.537 410.388,470.397 408.057,463.758 405.123,455.402 397.213,433.794 394.833,427.5 389.241,412.711 383.118,404.637 379.5,394.834 370.228,369.716 368.492,367.123 362.167,357.167 355.842,347.21 353.326,348.302 346.339,352.006 339.352,355.711 330.532,353.978 329.048,363.502 z; M 332.392,367.404 C 330.908,376.929 341.202,385.129 349.353,401.797 355.091,413.527 356.681,428.499 367.894,445.617 378.386,461.633 391.473,475.554 413.605,490.699 422.899,497.058 439.833,510.167 468.5,516.834 482.201,520.021 487.269,520.252 490.833,511.501 498.166,493.501 497.5,486.167 495.833,473.501 493.588,456.44 491.02,460.582 481.834,455.271 471.544,449.198 431.835,439.897 427.16,434.637 419.16,425.637 409.448,414.28 403.057,403.419 396.977,393.086 381.232,381.841 373.718,371.058 367.914,362.729 369.667,351.27 358.264,348.249 348.037,345.538 348.651,345.693 341.321,348.662 337.68,350.137 333.876,357.88 332.392,367.404 z; M 315.048,342.502 C 313.564,352.027 318.024,351.307 325,368.5 327.951,375.771 317.528,403.127 317.689,423.591 317.877,447.623 338.123,459.799 362.059,471.894 381.877,481.909 406.915,492.333 435.581,499 449.282,502.187 451.345,498.405 454.505,489.5 459.817,474.53 451.191,454.176 447.505,440.5 443.027,423.885 438.903,430.12 415.5,427 400.5,425 368.297,424.417 367,417.5 365.5,409.5 370,386 365.5,372.5 355.368,342.105 357.618,359.303 354,349.5 344.728,324.382 354.492,346.123 348.167,336.167 341.842,326.21 339.326,327.302 332.339,331.006 325.352,334.711 316.532,332.978 315.048,342.502 z; M 320,340.5 C 318.516,350.025 319.5,353.5 321.5,371.5 322.367,379.3 305,365 283,365.5 267.569,365.851 247.487,401.414 246.5,432 245.5,463 248.268,495.141 265.5,519 272,528 279.318,529.182 286,522.5 305,503.5 326.854,468.057 324.5,455.5 323,447.5 314.705,449.58 309.861,440.263 299.181,423.42 294.071,418.662 300.441,416.254 318.441,409.754 337.709,409.684 351.639,396.763 363.344,385.905 358.954,357.362 355.5,347.5 354.309,344.1 351.967,340.062 348.167,336.167 339.93,327.723 339.326,327.302 332.339,331.006 325.352,334.711 321.484,330.976 320,340.5 z; M 340,369 C 331.948,373.871 327,379 314,380 300,380 278,367 272,367 266,366 245,366 205,403 165,440 164,476 165,486 166,495 169,500 189,499 208,497 234,482 240,475 247,469 251,463.541 250,459.541 250,455.541 251,429 255,421 259,413 284.721,420.334 289.738,421.246 295.723,422.334 319.015,429.088 325,428 330.017,427.088 344,418 348,412 352,406 363.424,388.824 357,374 350.418,358.812 346.402,365.127 340,369 z'%3E%3C/animate%3E%3C/path%3E%3Cpath id='cuisse-av-g' style='fill:%23ffb039;fill-opacity:1;stroke:none' d='m 346,411 c 10,-11 10,-13 15,-21 5,-8 12,-32 -3,-33 -15,-2 -27,23 -41,25 -9,2 29,29 29,29 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' m 346,411 c 10,-11 10,-13 15,-21 5,-8 12,-32 -3,-33 -15,-2 -27,23 -41,25 -9,2 29,29 29,29 z; m 352.5,413.833 c 18.5,-0.499 23.167,-15.168 28,-34.667 2.423,-9.776 7.596,-27.735 -15.167,-29.167 C 341.5,348.5 329.667,343.666 326.5,373.5 c -3.167,29.834 7.5,40.832 26,40.333 z; m 365.188,386.749 c 14.033,-12.066 8.391,-26.388 -0.17,-44.562 -4.292,-9.112 -11.618,-26.306 -30.176,-13.046 -19.43,13.884 -31.659,17.605 -15.28,42.741 16.377,25.138 31.592,26.933 45.626,14.867 z; m 366.854,389.082 c 40.646,11.419 13.541,-26.407 4.979,-44.581 -4.292,-9.112 -16.768,-26.286 -35.326,-13.026 -19.43,13.884 -35.696,19.891 -17.008,43.359 14.334,18 25.39,8.077 47.355,14.248 z; m 346.5,382 c 33,0 10.569,-23.462 12,-43.5 1.5,-21 -7.935,-39.785 -26.492,-26.525 -19.43,13.884 -35.696,19.891 -17.008,43.359 14.333,18 8.685,26.666 31.5,26.666 z; m 343.5,372.5 c 32.5,27 6.569,-23.462 8,-43.5 1.5,-21 -3.935,-39.785 -22.492,-26.525 -19.43,13.884 -38.196,20.057 -19.508,43.525 14.333,18 16.451,11.921 34,26.5 z; m 340.5,376.5 c 21,10.5 22.069,-15.462 23.5,-35.5 1.5,-21 -19.435,-47.785 -37.992,-34.525 -19.43,13.884 -38.196,20.057 -19.508,43.525 14.333,18 13.594,16.297 34,26.5 z; m 346,411 c 10,-11 10,-13 15,-21 5,-8 12,-32 -3,-33 -15,-2 -27,23 -41,25 -9,2 29,29 29,29 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='patte-ar-g'%3E%3Cpath style='fill:%23ffb039;stroke:%23ff4c01;stroke-width:4' d='m 450,313 c -14,15 -22.41242,30.18684 -15,46 7.5925,16.19734 11.24268,23.74867 33,45 21.24559,20.75151 43.99616,29.95686 55,29 11.99633,-1.04316 9,-5 16,2 7,7 50.23386,79.82156 54,85 4.24137,5.83188 4.09215,40.80423 17,47 12.0952,5.8057 38.1957,-5.90364 46,-22 8.19684,-16.90597 7.83045,-40.92386 7,-43 -1.17444,-2.9361 -94.04651,-105.39177 -98,-106 -9.11234,-1.4019 -22,3 -22,3 0,0 -6.40588,-20.18825 -3,-27 3.60555,-7.2111 -0.0923,-51.80528 -34,-68 -33.09344,-15.80582 -44.9956,-2.79043 -56,9 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' m 450,313 c -14,15 -22.41242,30.18684 -15,46 7.5925,16.19734 11.24268,23.74867 33,45 21.24559,20.75151 43.99616,29.95686 55,29 11.99633,-1.04316 9,-5 16,2 7,7 50.23386,79.82156 54,85 4.24137,5.83188 4.09215,40.80423 17,47 12.0952,5.8057 38.1957,-5.90364 46,-22 8.19684,-16.90597 7.83045,-40.92386 7,-43 -1.17444,-2.9361 -94.04651,-105.39177 -98,-106 -9.11234,-1.4019 -22,3 -22,3 0,0 -6.40588,-20.18825 -3,-27 3.60555,-7.2111 -0.0923,-51.80528 -34,-68 -33.09344,-15.80582 -44.9956,-2.79043 -56,9 z; m 465.501,299.167 c -7.917,7.667 -25.918,19.248 -23.959,36.541 1.959,17.293 5.805,26.063 16.293,37.793 12.667,14.167 48.333,36 71.707,36.207 30.965,0.274 23.606,-12.175 26.294,-4.874 C 565.835,432 600,455.25 624.5,467.75 c 15.165,7.737 34.984,17.455 45.25,15.5 15.75,-3 19.932,-28.898 20,-36.5 C 690,419 677.751,407.354 669.5,407.25 610,406.5 613.034,392.534 582.25,361.75 c -11.5,-11.5 -28.17203,11.862 -28,9.625 0.12497,-1.625 -5.25,-6.375 -4.75,-22.125 0.508,-15.995 -17.677,-49.652 -41.999,-53.917 -25.666,-4.5 -34.084,-3.834 -42,3.834 z; m 449.793,298.626 c -7.917,7.667 -25.918,19.248 -23.959,36.541 1.959,17.293 5.805,26.063 16.293,37.793 12.667,14.167 36.001,45.869 59.373,45.54 23.667,-0.333 26.334,-10.666 24.334,-8.333 -9.526,11.112 -14.334,55 34,114.667 10.716,13.228 32.506,-15.081 36.666,-24.667 7.667,-17.666 9.334,-47.666 5.334,-49.333 -19.896,-8.291 -27.174,-21.379 -30.334,-29 -5.667,-13.667 -5.376,-34.71 -6,-49.667 -0.678,-16.249 -35.172,3.904 -35,1.667 0.125,-1.625 2.793,-9.374 3.293,-25.124 0.508,-15.995 -17.677,-49.652 -42,-53.917 -25.665,-4.501 -34.083,-3.835 -42,3.833 z; m 450.833,297.834 c -10.63313,2.89799 -26,11.333 -30.333,29 -4.146,16.902 -5,28.334 -1.333,43.334 4.002,16.371 9.974,36.791 27.333,47 5.667,3.333 14.333,-5 0.667,5.333 -11.675,8.827 -31.167,38.667 -31.333,87.333 -0.059,17.023 37.49173,8.58269 56,-1 19.40221,-10.04553 30.256,-27.967 28,-31.667 -8.333,-13.666 -7.667,-26 -4.333,-40.333 3.351,-14.411 15.667,-23 24.333,-32 11.281,-11.715 -12.433,-32.273 -14.667,-29.667 -26,30.334 14.833,-15.583 15.333,-31.333 0.508,-15.995 4.656,-39.734 -19.667,-44 -25.665,-4.5 -38.54747,-5.12131 -50,-2 z; M 462.96954,298.94924 C 452.10283,300.79091 445.5,302 429.5,319 c -11.928,12.673 -14,25 -21.5,39.5 -6.286,12.152 -10.5,35.5 -2.5,52 2.868,5.916 4.667,11.667 -9,22 -11.675,8.827 -81.5,78.5 -86,104 -2.958,16.765 6.55,13.5 17,13.5 19.5,0 63.322,-2.004 65,-6 10.5,-25 20.992,-51.364 30,-63 12,-15.5 26.514,-27.369 36,-35.5 17.5,-15 15.503,-20.368 -5,-27.5 -11.5,-4 55,-11.5 67,-74.166 3.01,-15.718 -7.42345,-38.19844 -19.667,-44 -9.36228,-4.43628 -25.40077,-2.99692 -37.86346,-0.88476 z; m 463,311 c -10.83887,1.99899 -13,4 -29,21 -11.928,12.673 -14.23,27.177 -14,43.5 0.5,35.5 17,60.5 35,65.5 6.335,1.76 -1.657,16.139 -11,30.5 -27,41.5 -64,75 -82.5,96.5 -11.104,12.904 -2.95,16 7.5,16 19.5,0 67.744,-2.8 70,-6.5 12.5,-20.5 27.871,-39.242 39,-61.5 18,-36 29.197,-73.688 34.5,-85 7.5,-16 -1.5,-13.5 -18,-12 -12.126,1.103 24.5,-22.5 26.5,-70.5 0.666,-15.989 -7.9936,-18.54978 -22,-31 -10.29247,-9.14893 -24.54747,-8.61216 -36,-6.5 z; m 466.5,301 c -5.7579,3.39992 -10.03046,6.53046 -23,20.5 -11.84117,12.75417 -17.23,20.177 -17,36.5 0.5,35.5 40,66 58,71 6.335,1.76 32,34.5 28,59.5 -7.822,48.889 -17.5,62 -28,83 -7.613,15.227 -0.45,11.5 10,11.5 19.5,0 64.244,-0.3 66.5,-4 12.5,-20.5 8.375,-60.229 6,-85 -3.5,-36.5 -16.5,-62 -21.5,-73 -7.313,-16.087 -6.657,-10.224 -23,-7.5 -9,1.5 -7,1 2.5,-40 3.644,-15.724 -4.51738,-54.98064 -19,-68 -14.85531,-13.35439 -28.83604,-10.79685 -39.5,-4.5 z; m 450,313 c -14,15 -22.41242,30.18684 -15,46 7.5925,16.19734 11.24268,23.74867 33,45 21.24559,20.75151 43.99616,29.95686 55,29 11.99633,-1.04316 9,-5 16,2 7,7 50.23386,79.82156 54,85 4.24137,5.83188 4.09215,40.80423 17,47 12.0952,5.8057 38.1957,-5.90364 46,-22 8.19684,-16.90597 7.83045,-40.92386 7,-43 -1.17444,-2.9361 -94.04651,-105.39177 -98,-106 -9.11234,-1.4019 -22,3 -22,3 0,0 -6.40588,-20.18825 -3,-27 3.60555,-7.2111 -0.0923,-51.80528 -34,-68 -33.09344,-15.80582 -44.9956,-2.79043 -56,9 z '%3E%3C/animate%3E%3C/path%3E%3Cpath id='cuisse-ar-g' style='fill:%23ffb039;fill-opacity:1;stroke:none' d='m 447,307 c -19,13 -19,38 -17,47 2,9 2,13 24,34 22,21 54,17 65,10 12,-6 15.7059,-35.30548 14,-54 -1.12714,-12.35198 -6.08376,-18.62183 -14,-30 -8.07675,-11.60888 -19,-19 -39,-19 -20,1 -33,12 -33,12 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' m 447,307 c -19,13 -19,38 -17,47 2,9 2,13 24,34 22,21 54,17 65,10 12,-6 15.7059,-35.30548 14,-54 -1.12714,-12.35198 -6.08376,-18.62183 -14,-30 -8.07675,-11.60888 -19,-19 -39,-19 -20,1 -33,12 -33,12 z; m 455.001,298 c -9.833,7.167 -20.00289,27.74886 -17,47 3.5,22.43808 13.667,24.833 24,34 10.333,9.167 48.833,20.833 65,10 16.167,-10.833 18.166,-39.333 15.5,-54.333 -2.666,-15 -3.166,-18.501 -13.5,-29.667 -9.534,-10.301 -26.5,-21.001 -41,-19 -14.5,2.001 -23.167,4.832 -33,12 z; m 440.667,297.666 c -9.833,7.167 -19.99492,28.84315 -16.49492,48.01015 3.5,19.167 13.16192,23.82285 23.49492,32.98985 10.333,9.167 48.833,20.833 65,10 16.167,-10.833 18.167,-39.333 15.5,-54.333 -2.667,-15 -3.334,-18.499 -13.5,-32.667 -8.183,-11.404 -26.5,-18.001 -41,-16 -14.5,2.001 -23.167,4.832 -33,12 z; m 431.667,290.333 c -9.833,7.167 -20.5,27.833 -17,47 3.5,19.167 3.167,20.835 9.5,35.835 3.466,8.21 15.499,35.664 31.666,24.831 C 472,387.166 520.31777,356.14214 519.167,327 c -0.60114,-15.22321 -3.334,-18.499 -13.5,-32.667 -8.183,-11.404 -26.5,-18.001 -41,-16 -14.5,2.001 -23.167,4.832 -33,12 z; m 429.834,297.834 c -9.833,7.167 -10.13007,13.61739 -17.86446,45.13554 -7.28059,29.66889 4.03146,22.69946 10.36446,37.69946 3.466,8.21 15.499,35.664 31.666,24.831 16.167,-10.833 66,-55.999 63.334,-70.999 -2.666,-15 -3.334,-18.499 -13.5,-32.667 -8.183,-11.404 -26.5,-18.001 -41,-16 -14.5,2.001 -23.167,4.832 -33,12 z; M 430.834,303.834 C 421.001,311.001 414.946,319.315 416,352 c 0.5,15.5 9.667,44.5 16,59.5 3.466,8.21 23.84823,19.35331 40.01523,8.52031 C 488.18223,409.18731 519,369.5 519.5,346 c 0.324,-15.231 -4.5,-23.998 -14.666,-38.166 -8.183,-11.404 -26.5,-18.001 -41,-16 -14.5,2.001 -23.167,4.832 -33,12 z; m 430.834,303.834 c -9.833,7.167 -12.888,12.981 -11.834,45.666 0.5,15.5 22,44 38,59.5 6.401,6.201 18.333,9.333 34.5,-1.5 16.167,-10.833 27.5,-38 28,-61.5 0.324,-15.231 -3.334,-27.832 -13.5,-42 -8.183,-11.404 -24,-15.75 -42.166,-12.167 -14.361,2.834 -23.167,4.833 -33,12.001 z; m 447,307 c -19,13 -19,38 -17,47 2,9 2,13 24,34 22,21 54,17 65,10 12,-6 15.7059,-35.30548 14,-54 -1.12714,-12.35198 -6.08376,-18.62183 -14,-30 -8.07675,-11.60888 -19,-19 -39,-19 -20,1 -33,12 -33,12 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='Tete'%3E%3Cpath style='fill:%23ffb039;stroke:%23ff4c01;stroke-width:4' d=' m 153,165 c -12,49 -28,55 -11,98 18,43 22,45 33,55 12,10 18,13 16,18 -1,5 -12,17 -2,22 10,6 43,10 75,-16 34,-28 43,-55 48,-76 6,-20 -9,-76 -20,-95 -11,-19 -139,-6 -139,-6 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' m 153,165 c -12,49 -28,55 -11,98 18,43 22,45 33,55 12,10 18,13 16,18 -1,5 -12,17 -2,22 10,6 43,10 75,-16 34,-28 43,-55 48,-76 6,-20 -9,-76 -20,-95 -11,-19 -139,-6 -139,-6 z; m 153.222,185.638 c -9.869,49.473 -25.595,56.16 -6.75,98.384 19.843,42.181 23.926,44.007 35.348,53.521 12.421,9.473 18.546,12.209 16.764,17.291 -0.783,5.039 -11.253,17.504 -1.046,22.066 10.25,5.563 43.393,8.131 74.238,-19.229 32.757,-29.445 40.581,-56.809 44.667,-78.006 5.129,-20.241 -12.279,-75.54 -24.09,-94.046 -11.811,-18.506 -139.131,0.019 -139.131,0.019 z; m 160.722,170.138 c -9.869,49.473 -25.595,56.16 -6.75,98.384 19.843,42.181 23.926,44.007 35.348,53.521 12.421,9.473 18.546,12.209 16.764,17.291 -0.783,5.039 -11.253,17.504 -1.046,22.066 10.25,5.563 43.393,8.131 74.238,-19.229 32.757,-29.445 40.581,-56.809 44.667,-78.006 5.129,-20.241 -12.279,-75.54 -24.09,-94.046 -11.811,-18.506 -139.131,0.019 -139.131,0.019 z; m 161.995,161.884 c -5.584,50.138 -20.678,58.15 1.723,98.6 23.393,40.32 27.617,41.789 39.814,50.287 13.188,8.371 19.525,10.57 18.186,15.789 -0.347,5.086 -9.708,18.404 0.853,22.074 10.69,4.66 43.93,4.373 72.313,-25.533 30.107,-32.15 35.552,-60.083 37.804,-81.554 3.372,-20.606 -18.721,-74.206 -32.078,-91.629 -13.359,-17.423 -138.615,11.966 -138.615,11.966 z; m 146.769,150.843 c 0.471,50.446 -13.553,60.21 13.538,97.682 28.061,37.223 32.43,38.175 45.559,45.148 14.097,6.729 20.652,8.153 19.949,13.494 0.266,5.091 -7.431,19.436 3.494,21.813 11.172,3.344 44.138,-0.928 68.728,-34.022 26.033,-35.529 28.088,-63.914 27.748,-85.5 C 326.66,188.595 295.351,151.695 280,136 264.649,120.304 146.769,150.843 146.769,150.843 z; m 162.318,141.398 c -9.432,49.559 -25.098,56.383 -5.882,98.439 20.216,42.003 24.314,43.794 35.82,53.206 12.503,9.363 18.652,12.044 16.916,17.144 -0.738,5.044 -11.098,17.601 -0.852,22.074 10.299,5.47 43.462,7.746 74.065,-19.883 32.496,-29.734 40.077,-57.164 43.978,-78.398 4.95,-20.285 -18.514,-62.607 -30.489,-81.009 -11.976,-18.4 -133.556,-11.573 -133.556,-11.573 z; m 157.318,151.398 c -9.432,49.559 -25.098,56.383 -5.882,98.439 20.216,42.003 24.314,43.794 35.82,53.206 12.503,9.363 18.652,12.045 16.916,17.145 -0.738,5.044 -11.098,17.601 -0.852,22.074 10.299,5.47 43.462,7.746 74.065,-19.883 32.496,-29.734 40.077,-57.164 43.978,-78.398 4.95,-20.285 -18.514,-62.607 -30.489,-81.009 -11.976,-18.401 -133.556,-11.574 -133.556,-11.574 z; m 153,165 c -12,49 -28,55 -11,98 18,43 22,45 33,55 12,10 18,13 16,18 -1,5 -12,17 -2,22 10,6 43,10 75,-16 34,-28 43,-55 48,-76 6,-20 -9,-76 -20,-95 -11,-19 -139,-6 -139,-6 z '%3E%3C/animate%3E%3C/path%3E%3Cpath id='cou' style='fill:%23ffb039;fill-opacity:1;stroke:none' d='M 278,161 C 298,170 293,163 300,172 307,180 320,216 320,238 321,260 308,292 290,312 275,329 269,338 258,344 248,350 278,161 278,161 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' M 278,161 C 298,170 293,163 300,172 307,180 320,216 320,238 321,260 308,292 290,312 275,329 269,338 258,344 248,350 278,161 278,161 z; M277.932,176.235 c20.371,8.126,15.073,1.35,22.455,10.038c7.34,7.69,21.885,43.094,22.836,65.073c1.951,21.936-9.653,54.468-26.771,75.228 c-14.251,17.633-19.856,26.885-30.586,33.355C256.135,366.355,277.932,176.235,277.932,176.235z ; M285.432,160.735 c20.371,8.126,15.073,1.35,22.455,10.038c7.34,7.69,21.885,43.094,22.836,65.073c1.951,21.936-9.653,54.468-26.771,75.228 c-14.251,17.633-19.856,26.885-30.586,33.355C263.635,350.855,285.432,160.735,285.432,160.735z ; M285.437,141.806 c20.993,6.348,15.133,0.051,23.234,8.073c7.973,7.032,25.505,41.056,28.34,62.872c3.828,21.687-4.94,55.096-20.211,77.249 c-12.685,18.792-17.474,28.491-27.608,35.858C280.048,333.096,285.437,141.806,285.437,141.806z; M263.5,125 c21.603,3.784,21.495,1.507,30.5,8.5c8.759,6.024,27.246,24.2,32.677,45.519c6.401,21.071,1.705,55.291-10.799,79.115 c-10.339,20.178-13.93,30.381-23.108,38.911C284.561,305.327,263.5,125,263.5,125z; M281.85,138.95 c20.442,7.947,20.782,5.694,28.241,14.317c7.408,7.625,21.971,29.073,23.116,51.043c2.145,21.917-9.172,54.552-26.105,75.461 c-14.095,17.758-19.618,27.06-30.29,33.623C267.137,319.905,281.85,138.95,281.85,138.95z; M276.85,148.95 c20.442,7.947,20.782,5.694,28.241,14.317c7.408,7.625,21.971,29.073,23.116,51.043c2.145,21.917-9.172,54.552-26.105,75.461 c-14.095,17.759-19.618,27.06-30.29,33.623C262.137,329.905,276.85,148.95,276.85,148.95z ; M 278,161 C 298,170 293,163 300,172 307,180 320,216 320,238 321,260 308,292 290,312 275,329 269,338 258,344 248,350 278,161 278,161 z '%3E%3C/animate%3E%3C/path%3E%3Cpath style='fill:%23ff4c01;fill-opacity:1;stroke:none' id='bouche' d='M 220,338 C 220,338 226,343 224,350 222,357 220,362 216,362 212,362 221,364 223,361 226,358 228,353 228,348 227,342 223,340 220,338 z '%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' M 220,338 C 220,338 226,343 224,350 222,357 220,362 216,362 212,362 221,364 223,361 226,358 228,353 228,348 227,342 223,340 220,338 z; m 227.642,355.578 c 0,0 6.21,4.736 4.515,11.816 -1.695,7.08 -3.477,12.16 -7.473,12.334 -3.997,0.174 5.082,1.781 6.95,-1.303 2.867,-3.127 4.649,-8.207 4.433,-13.203 -1.258,-5.951 -5.341,-7.775 -8.425,-9.644 z; m 235.142,340.078 c 0,0 6.21,4.736 4.515,11.816 -1.695,7.08 -3.477,12.16 -7.473,12.334 -3.997,0.174 5.082,1.781 6.95,-1.303 2.867,-3.127 4.649,-8.207 4.433,-13.203 -1.258,-5.951 -5.341,-7.775 -8.425,-9.644 z; M250.735,324.805c0,0,6.594,4.186,5.513,11.387 c-1.081,7.199-2.42,12.412-6.386,12.93c-3.967,0.516,5.215,1.336,6.813-1.896c2.588-3.359,3.927-8.574,3.283-13.533 C258.192,327.869,253.967,326.404,250.735,324.805z; M254.411,301.942c0,0,7.049,3.364,6.839,10.644 c-0.209,7.276-0.914,12.612-4.789,13.602c-3.876,0.988,5.338,0.701,6.536-2.699c2.166-3.646,2.87-8.983,1.635-13.829 C262.181,304.091,257.812,303.143,254.411,301.942z ; M238.236,310.674c0,0,6.252,4.681,4.619,11.777 c-1.632,7.095-3.369,12.188-7.363,12.398c-3.995,0.209,5.097,1.734,6.938-1.364c2.839-3.15,4.576-8.247,4.315-13.24 C245.434,314.305,241.335,312.518,238.236,310.674z ; M233.236,320.674c0,0,6.252,4.681,4.619,11.777 c-1.632,7.095-3.369,12.188-7.363,12.398c-3.995,0.209,5.097,1.734,6.938-1.364c2.839-3.15,4.576-8.247,4.315-13.24 C240.434,324.305,236.335,322.518,233.236,320.674z; M 220,338 C 220,338 226,343 224,350 222,357 220,362 216,362 212,362 221,364 223,361 226,358 228,353 228,348 227,342 223,340 220,338 z '%3E%3C/animate%3E%3C/path%3E%3Cpath id='nez' style='fill:%23ff4c01;fill-opacity:1;stroke:none' d=' '%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' fill='freeze' values=' m 199,351 c 0,0 3,0 3,-3 0,-4 -3,-4 -3,-4 0,0 1,1 1,3 0,2 -3,3 -1,4 z; m 207.224,369.475 c 0,0 2.997,-0.131 2.867,-3.127 -0.173,-3.996 -3.17,-3.867 -3.17,-3.867 0,0 1.042,0.957 1.129,2.955 0.087,1.998 -2.867,3.127 -0.826,4.039 z; m 214.724,353.975 c 0,0 2.997,-0.131 2.867,-3.127 -0.173,-3.996 -3.17,-3.867 -3.17,-3.867 0,0 1.042,0.957 1.129,2.955 0.087,1.998 -2.867,3.127 -0.826,4.039 z; m 231.585,340.404 c 0,0 2.975,-0.389 2.588,-3.363 -0.516,-3.965 -3.49,-3.578 -3.49,-3.578 0,0 1.12,0.863 1.378,2.846 0.259,1.982 -2.588,3.361 -0.476,4.095 z; m 237.271,319.727 c 0,0 2.907,-0.742 2.167,-3.65 -0.988,-3.874 -3.894,-3.133 -3.894,-3.133 0,0 1.215,0.723 1.709,2.66 0.493,1.936 -2.168,3.647 0.018,4.123 z; m 217.941,324.751 c 0,0 2.996,-0.158 2.84,-3.154 -0.209,-3.993 -3.204,-3.836 -3.204,-3.836 0,0 1.05,0.947 1.154,2.943 0.105,1.996 -2.839,3.152 -0.79,4.047 z; m 212.941,334.751 c 0,0 2.996,-0.158 2.84,-3.154 -0.209,-3.993 -3.204,-3.836 -3.204,-3.836 0,0 1.05,0.947 1.154,2.943 0.105,1.996 -2.839,3.152 -0.79,4.047 z; m 199,351 c 0,0 3,0 3,-3 0,-4 -3,-4 -3,-4 0,0 1,1 1,3 0,2 -3,3 -1,4 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='Hair'%3E%3Cpath style='fill:%23fffea1;stroke:%23f2e000;stroke-width:4' d='m 114.63706,161.7208 c -18.520137,16.0703 -36.040611,34.00508 -36.05584,57.07107 -0.02224,33.68835 15.622848,42.23199 15.622848,42.23199 0,0 -3.683763,-11.10152 -1.016763,-17.76852 3.976,-9.938 8.030455,-17.77868 8.030455,-17.77868 0,0 -3.578694,39.08554 11.96955,64.7792 13.97252,23.08977 27.54183,38.20531 37.81016,43.27208 10.53649,5.19909 28.3051,17.74822 28.3051,17.74822 0,0 -6.94837,-4.66452 -9.22591,-26.70813 -0.94975,-9.19238 5.10293,-14.30079 5.64518,-25.62639 0.93508,-19.53061 -4.59645,-37.13198 -4.59645,-37.13198 0,0 1.25508,9.91422 17.88706,16.59137 6.76372,2.7154 28.28605,-2.0873 28.28605,-2.0873 0,0 -23.95788,-11.57611 -26.66803,-29.30202 -0.43813,-2.86556 6.69745,-0.0101 15.5236,-1.36853 6.4971,-0.99993 21.55913,-1.91522 21.55913,-1.91522 0,0 -27.70859,-20.7707 -22.83959,-45.9797 5.667,-29.333 18.13652,-33.74601 28.40355,-44.80762 4.43401,-4.77716 -5.02346,-17.01049 -21.35279,-24.4137 -9.19578,-4.16908 -76.22095,14.91416 -97.28731,33.19386 z'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' values=' m 114.63706,161.7208 c -18.520137,16.0703 -36.040611,34.00508 -36.05584,57.07107 -0.02224,33.68835 15.622848,42.23199 15.622848,42.23199 0,0 -3.683763,-11.10152 -1.016763,-17.76852 3.976,-9.938 8.030455,-17.77868 8.030455,-17.77868 0,0 -3.578694,39.08554 11.96955,64.7792 13.97252,23.08977 27.54183,38.20531 37.81016,43.27208 10.53649,5.19909 28.3051,17.74822 28.3051,17.74822 0,0 -6.94837,-4.66452 -9.22591,-26.70813 -0.94975,-9.19238 5.10293,-14.30079 5.64518,-25.62639 0.93508,-19.53061 -4.59645,-37.13198 -4.59645,-37.13198 0,0 1.25508,9.91422 17.88706,16.59137 6.76372,2.7154 28.28605,-2.0873 28.28605,-2.0873 0,0 -23.95788,-11.57611 -26.66803,-29.30202 -0.43813,-2.86556 6.69745,-0.0101 15.5236,-1.36853 6.4971,-0.99993 21.55913,-1.91522 21.55913,-1.91522 0,0 -27.70859,-20.7707 -22.83959,-45.9797 5.667,-29.333 18.13652,-33.74601 28.40355,-44.80762 4.43401,-4.77716 -5.02346,-17.01049 -21.35279,-24.4137 -9.19578,-4.16908 -76.22095,14.91416 -97.28731,33.19386 z; m 101,189.5 c -19,15.5 -32,33.5 -30.5,50 3.05,33.55 16.633,35.666 16.633,35.666 0,0 1.367,-1 4.034,-7.667 3.976,-9.938 5,-6.667 5,-6.667 0,0 10.333,7.333 15,37 3.871,24.605 -3.785,43.171 -9.667,49.333 -7,7.333 -18.667,9.667 -18.667,9.667 0,0 44.208,5.746 63,-6 10.667,-6.667 19.667,-19.333 24.333,-29.667 6.996,-15.49 5,-24 5,-24 0,0 0.75,1.833 4.25,7.5 3.83,6.201 12.62869,10.03453 12.62869,10.03453 0,0 3.82131,-47.43653 2.12131,-52.53553 -0.917,-2.75 3.667,1 4.917,2.167 4.805,4.486 7.417,6.166 7.417,6.166 0,0 -10.536,-22.791 -5.667,-48 5.667,-29.333 27,-37 38,-47.333 11,-10.333 -18.11116,-31.79847 -36,-33 C 190.30931,141.32283 116.12752,177.15913 101,189.5 z; m 107.5,180.167 c -19,15.5 -25.833,39.167 -24.333,55.667 3.05,33.55 19.667,40 19.667,40 0,0 -1,-8.333 1.667,-15 3.976,-9.938 3.333,-7.667 3.333,-7.667 0,0 -0.334,17.333 9.666,31.666 14.251,20.426 20.333,41.333 17.667,54.667 -1.989,9.941 -10.667,18.667 -10.667,18.667 0,0 18.542,2.746 37.333,-9 10.667,-6.668 17.666,-12.665 23.333,-26.334 6.509,-15.701 0.833,-27.499 0.833,-27.499 0,0 1.167,1.5 4.583,4.75 2.78,2.645 4.083,4.25 4.083,4.25 10.333,-23.332 6.867,-44.401 5.167,-49.5 -0.917,-2.75 3.667,1 4.917,2.167 4.805,4.486 7.417,6.166 7.417,6.166 0,0 -9.203,-27.458 -4.333,-52.667 5.667,-29.333 17,-36 28,-46.333 11,-10.333 -20.667,-24.334 -33,-22.001 -12.333,2.333 -95.333,38.001 -95.333,38.001 z; m 126.167,170.167 c -19,15.5 -27.833,47.5 -26.333,64 3.05,33.55 23,42 23,42 0,0 1.667,-4.82 1.667,-12 0,-10 0,-12.667 0,-12.667 0,0 4,16 14,30.333 14.251,20.426 32.5,25 35.667,48.333 1.363,10.046 0.333,33.333 0.333,33.333 0,0 7.191,-0.803 23,-16.333 9.5,-9.333 14.388,-25.872 14.667,-40.667 0.333,-17.667 -6.333,-24 -6.333,-24 0,0 4.25,8.75 7.667,12 2.78,2.645 6,3.667 6,3.667 4.333,-24.333 -5.633,-42.901 -7.333,-48 -0.917,-2.75 6.083,0.5 7.333,1.667 4.805,4.486 10,4.667 10,4.667 0,0 -22.87,-38.124 -18,-63.333 5.667,-29.333 8.333,-35 19.333,-45.333 11,-10.333 -13.833,-8.001 -26.167,-5.667 -12.334,2.334 -78.501,28 -78.501,28 z; m 129.667,149.667 c -19,15.5 -26,47.5 -24.5,64 3.05,33.55 25.167,51.333 25.167,51.333 0,0 -4.167,-14.153 -4.167,-21.333 0,-10 1.833,-12.667 1.833,-12.667 0,0 6.635,21.438 15.5,36.5 17.167,29.167 27.167,34.667 36,47.5 5.748,8.351 25,34.5 25,34.5 0,0 4.537,-9.733 8.5,-24 3.125,-11.25 2.5,-24.75 1.5,-39.625 -0.771,-11.475 -6.125,-24 -6.125,-24 0,0 5.641,8.602 9.625,11.125 3.75,2.375 12.167,1.833 12.167,1.833 0,-24 -12.5,-37.667 -17.833,-45.333 -1.655,-2.38 9.016,1.386 10.667,1.833 9.375,2.542 13.5,0.167 13.5,0.167 0,0 -29.75,-35.325 -29.75,-61 0,-16.75 10,-35.167 21,-45.5 11,-10.333 -35.417,-5.333 -47.75,-3 -12.333,2.333 -50.334,27.667 -50.334,27.667 z; m 127.833,141.833 c -19,15.5 -29.5,46.833 -28,63.333 3.05,33.55 19.333,48.333 19.333,48.333 0,0 0.333,-7.153 0.333,-14.333 0,-10 1.25,-6.5 1.25,-6.5 0,0 5.906,23.721 14.083,39.167 15,28.333 20.833,35.501 29.667,48.333 5.748,8.352 31,33 31,33 0,0 -10.296,-23.399 -6.333,-37.667 3.125,-11.25 10.667,-23.125 9.667,-38 -0.771,-11.475 -13,-35.667 -13,-35.667 0,0 10.946,19.074 14,22.667 5.667,6.667 24.667,12.333 24.667,12.333 -8,-25.667 -17.667,-45 -23,-52.667 -1.655,-2.38 10.333,7.667 14.25,8.833 9.309,2.772 16.75,0.167 16.75,0.167 0,0 -21.333,-32.325 -21.333,-58 0,-16.75 10.667,-29.667 21.667,-40 11,-10.333 -47.75,-13.833 -60.083,-11.5 -12.333,2.333 -44.918,18.168 -44.918,18.168 z; m 117.833,141.833 c -19,15.5 -29.5,46.833 -28,63.333 3.05,33.55 19.333,48.333 19.333,48.333 0,0 0.333,-7.153 0.333,-14.333 0,-10 1.25,-6.5 1.25,-6.5 0,0 5.572,25.387 13.75,40.833 15,28.333 22.50681,36.9691 34.01523,47.46954 13.55584,12.36854 37.54569,18.95432 37.54569,18.95432 0,0 -8.52772,-11.18456 -10.52539,-24.90863 -2.43641,-16.73834 -2.30631,-27.66182 -3.07106,-42.55076 -0.771,-15.01054 -6.63147,-30.63147 -6.63147,-30.63147 0,0 6.59693,16.12231 21.668,23.668 11.99668,6.00642 28,4.5 28,4.5 -28.15229,-23.50508 -28.667,-38.167 -34,-45.833 -1.655,-2.38 2.75686,3.62639 14.75508,8.32792 C 215.29851,236.03862 232.5,233 232.5,233 c 0,0 -24,-22.325 -24,-48 0,-16.75 6,-33.167 17,-43.5 11,-10.333 -50.417,-20.167 -62.75,-17.833 -12.333,2.334 -44.917,18.166 -44.917,18.166 z; m 114.63706,161.7208 c -18.520137,16.0703 -36.040611,34.00508 -36.05584,57.07107 -0.02224,33.68835 15.622848,42.23199 15.622848,42.23199 0,0 -3.683763,-11.10152 -1.016763,-17.76852 3.976,-9.938 8.030455,-17.77868 8.030455,-17.77868 0,0 -3.578694,39.08554 11.96955,64.7792 13.97252,23.08977 27.54183,38.20531 37.81016,43.27208 10.53649,5.19909 28.3051,17.74822 28.3051,17.74822 0,0 -6.94837,-4.66452 -9.22591,-26.70813 -0.94975,-9.19238 5.10293,-14.30079 5.64518,-25.62639 0.93508,-19.53061 -4.59645,-37.13198 -4.59645,-37.13198 0,0 1.25508,9.91422 17.88706,16.59137 6.76372,2.7154 28.28605,-2.0873 28.28605,-2.0873 0,0 -23.95788,-11.57611 -26.66803,-29.30202 -0.43813,-2.86556 6.69745,-0.0101 15.5236,-1.36853 6.4971,-0.99993 21.55913,-1.91522 21.55913,-1.91522 0,0 -27.70859,-20.7707 -22.83959,-45.9797 5.667,-29.333 18.13652,-33.74601 28.40355,-44.80762 4.43401,-4.77716 -5.02346,-17.01049 -21.35279,-24.4137 -9.19578,-4.16908 -76.22095,14.91416 -97.28731,33.19386 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3Cg id='Chapo'%3E%3Cg id='layer3'%3E%3Cpath style='fill:%23cc872c;stroke:%23a96f25;stroke-width:4.9' d='M102,167 c0,0,9-17,13-40c4-24,7-48.6,12-52.3c5-3.7,24,0.8,34-1.5c10-2.2,61-25.1,81-26.6c20-1.5,19-1.1,24,4.8c4,5.9,10,18.1,16,30.7 C288,94.7,294,106,299,112C305,119,102,167,102,167z' id='path3026'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' values=' M102,167 c0,0,9-17,13-40c4-24,7-48.6,12-52.3c5-3.7,24,0.8,34-1.5c10-2.2,61-25.1,81-26.6c20-1.5,19-1.1,24,4.8c4,5.9,10,18.1,16,30.7 C288,94.7,294,106,299,112C305,119,102,167,102,167z ; M104.197,184.416c0,0,8.607-17.202,12.079-40.287c3.448-24.086,5.882-48.748,10.796-52.562c4.914-3.814,24.013,0.249,33.958-2.28 c9.946-2.429,60.408-26.494,80.368-28.452c19.96-1.958,18.969-1.535,24.104,4.248c4.134,5.807,10.413,17.866,16.699,30.325 c6.288,12.459,12.546,23.618,17.682,29.502C306.042,131.77,104.197,184.416,104.197,184.416z; M105.35,175.856 c0,0,7.525-17.702,9.559-40.958c1.949-24.253,2.851-49.019,7.518-53.13c4.668-4.111,23.982-1.239,33.751-4.379 c9.777-3.041,58.65-30.186,78.451-33.377c19.8-3.191,18.837-2.707,24.321,2.747c4.485,5.54,11.5,17.187,18.546,29.232 c7.048,12.045,13.985,22.795,19.476,28.35C303.545,110.805,105.35,175.856,105.35,175.856z; M107.565,168.549c0,0,6.527-18.094,7.262-41.427c0.594-24.324,0.113-49.102,4.544-53.466c4.432-4.365,23.876-2.574,33.454-6.254 c9.592-3.581,56.876-33.408,76.468-37.699c19.592-4.29,18.657-3.753,24.437,1.387c4.787,5.281,12.44,16.519,20.146,28.153 c7.709,11.633,15.234,21.98,21.026,27.22C301.826,92.551,107.565,168.549,107.565,168.549z; M103.648,155.524c0,0,6.527-18.094,7.262-41.427c0.594-24.324,0.113-49.102,4.544-53.466c4.432-4.365,23.876-2.574,33.454-6.254 c9.592-3.581,56.876-33.408,76.468-37.699c19.592-4.29,18.657-3.753,24.437,1.387c4.787,5.281,12.44,16.519,20.146,28.153 c7.709,11.633,15.234,21.98,21.026,27.22C297.908,79.526,103.648,155.524,103.648,155.524z ; M110.61,140.92 c0,0,8.225-17.388,11.185-40.545c2.915-24.156,4.803-48.866,9.631-52.788c4.828-3.921,24.012-0.281,33.899-3.03 c9.891-2.648,59.807-27.822,79.72-30.222c19.912-2.398,18.93-1.954,24.192,3.715c4.261,5.714,10.805,17.631,17.365,29.948 c6.563,12.317,13.065,23.335,18.33,29.104C311.241,83.825,110.61,140.92,110.61,140.92z; M102.55,150.369 c0,0,8.225-17.388,11.185-40.545c2.915-24.156,4.803-48.866,9.631-52.788c4.828-3.921,24.012-0.281,33.899-3.03 c9.891-2.648,59.807-27.822,79.72-30.222c19.912-2.398,18.93-1.954,24.192,3.715c4.261,5.714,10.805,17.631,17.365,29.948 c6.563,12.317,13.065,23.335,18.33,29.104C303.181,93.274,102.55,150.369,102.55,150.369z; M102,167 c0,0,9-17,13-40c4-24,7-48.6,12-52.3c5-3.7,24,0.8,34-1.5c10-2.2,61-25.1,81-26.6c20-1.5,19-1.1,24,4.8c4,5.9,10,18.1,16,30.7 C288,94.7,294,106,299,112C305,119,102,167,102,167z '%3E%3C/animate%3E%3C/path%3E%3Cpath style='fill:%23cc872c;fill-opacity:1;stroke:%23a96f25;stroke-width:4' d='M 9.62,149 C 9.62,149 18.9,165 54,165 89.1,166 133,154 159,143 184,132 216,105 252,101 288,96.8 309,101 321,110 333,120 362,145 368,154 375,163 375,163 375,170 376,177 376,179 376,179 376,179 357,173 331,169 304,165 284,165 272,159 261,153 241,148 202,152 164,157 117,171 90.3,173 63.6,175 36.3,188 9.62,149 z' id='path3796'%3E%3Canimate attributeType='XML' attributeName='d' values=' M 9.62,149 C 9.62,149 18.9,165 54,165 89.1,166 133,154 159,143 184,132 216,105 252,101 288,96.8 309,101 321,110 333,120 362,145 368,154 375,163 375,163 375,170 376,177 376,179 376,179 376,179 357,173 331,169 304,165 284,165 272,159 261,153 241,148 202,152 164,157 117,171 90.3,173 63.6,175 36.3,188 9.62,149 z; m 11.428,168.541 c 0,0 9.645,15.783 44.735,14.978 35.113,0.194 78.726,-12.81 104.468,-24.404 24.741,-11.57 56.113,-39.298 92.011,-44.123 35.894,-5.025 56.985,-1.308 69.188,7.414 12.227,9.722 41.793,34.05 47.997,42.909 7.205,8.837 7.205,8.837 7.366,15.835 1.16,6.976 1.206,8.975 1.206,8.975 0,0 -19.132,-5.562 -45.218,-8.964 -27.084,-3.379 -47.078,-2.92 -59.213,-8.644 -11.134,-5.746 -31.244,-10.285 -70.142,-5.392 -37.875,5.871 -84.542,20.946 -111.189,23.558 -26.647,2.612 -53.641,16.235 -81.209,-22.142 z; m 11.776,165.759 c 0,0 10.604,15.155 45.577,12.177 35.058,-1.982 77.781,-17.663 102.754,-30.83 23.977,-13.081 53.57,-42.699 89.101,-49.739 35.514,-7.239 56.795,-4.836 69.514,3.113 12.806,8.946 43.823,31.394 50.564,39.853 7.739,8.374 7.739,8.374 8.333,15.349 1.59,6.891 1.76,8.883 1.76,8.883 0,0 -19.44,-4.366 -45.687,-6.146 -27.241,-1.695 -47.168,0.002 -59.635,-4.958 -11.469,-5.045 -31.822,-8.33 -70.342,-1.035 -37.439,8.206 -83.082,26.144 -109.515,30.402 -26.434,4.257 -52.533,19.527 -82.424,-17.069 z; m 13.574,163.685 c 0,0 11.432,14.54 46.185,9.618 34.893,-3.933 76.676,-21.972 100.876,-36.51 23.21,-14.397 51.106,-45.619 86.19,-54.629 35.055,-9.207 56.437,-7.995 69.58,-0.767 13.285,8.218 45.505,28.903 52.707,36.972 8.194,7.929 8.194,7.929 9.175,14.86 1.972,6.791 2.252,8.771 2.252,8.771 0,0 -19.653,-3.276 -45.958,-3.589 -27.293,-0.174 -47.095,2.631 -59.818,-1.626 -11.733,-4.398 -32.237,-6.543 -70.29,2.888 -36.923,10.281 -81.495,30.734 -107.65,36.46 -26.157,5.724 -51.364,22.424 -83.249,-12.448 z; m 9.657,150.66 c 0,0 11.432,14.54 46.185,9.617 34.893,-3.933 76.676,-21.972 100.876,-36.51 23.21,-14.397 51.106,-45.619 86.19,-54.629 35.055,-9.207 56.437,-7.995 69.58,-0.767 13.285,8.218 45.505,28.903 52.707,36.972 8.194,7.929 8.194,7.929 9.175,14.86 1.972,6.791 2.252,8.771 2.252,8.771 0,0 -19.653,-3.276 -45.958,-3.589 -27.293,-0.174 -47.095,2.631 -59.818,-1.626 -11.733,-4.398 -32.237,-6.543 -70.29,2.888 -36.923,10.281 -81.495,30.734 -107.65,36.46 -26.157,5.724 -51.364,22.425 -83.249,-12.447 z; m 17.513,127.099 c 0,0 9.991,15.566 45.056,13.985 35.109,-0.582 78.423,-14.548 103.902,-26.708 24.48,-12.114 55.23,-40.529 91.014,-46.146 35.774,-5.817 56.942,-2.567 69.335,5.883 12.439,9.45 42.536,33.117 48.934,41.838 7.398,8.676 7.398,8.676 7.714,15.668 1.313,6.949 1.404,8.947 1.404,8.947 0,0 -19.25,-5.138 -45.405,-7.963 -27.152,-2.78 -47.131,-1.879 -59.389,-7.333 -11.259,-5.498 -31.465,-9.592 -70.245,-3.839 -37.736,6.707 -84.058,22.81 -110.64,26.01 -26.584,3.2 -53.271,17.417 -81.68,-20.342 z; m 9.453,136.548 c 0,0 9.991,15.566 45.056,13.985 35.109,-0.582 78.423,-14.548 103.902,-26.708 24.48,-12.114 55.23,-40.529 91.014,-46.146 35.774,-5.817 56.942,-2.567 69.335,5.883 12.439,9.45 42.536,33.117 48.934,41.838 7.398,8.676 7.398,8.676 7.714,15.668 1.313,6.949 1.404,8.947 1.404,8.947 0,0 -19.25,-5.138 -45.405,-7.963 -27.152,-2.78 -47.131,-1.879 -59.389,-7.333 -11.259,-5.498 -31.465,-9.592 -70.245,-3.839 -37.736,6.707 -84.058,22.81 -110.64,26.01 -26.584,3.2 -53.272,17.417 -81.68,-20.342 z; M 9.62,149 C 9.62,149 18.9,165 54,165 89.1,166 133,154 159,143 184,132 216,105 252,101 288,96.8 309,101 321,110 333,120 362,145 368,154 375,163 375,163 375,170 376,177 376,179 376,179 376,179 357,173 331,169 304,165 284,165 272,159 261,153 241,148 202,152 164,157 117,171 90.3,173 63.6,175 36.3,188 9.62,149 z ' dur='0.6s' repeatCount='indefinite'%3E%3C/animate%3E%3C/path%3E%3Cpath style='fill:%23a96f25;fill-opacity:1;stroke:none' d='M161,84.2c0,0,13,2.3,30-1.8c18-4.2,43-13.6,43-13.6 s-15,12.2-34,17C182,90.5,173,88.4,161,84.2z' id='path3798'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' values=' M161,84.2c0,0,13,2.3,30-1.8c18-4.2,43-13.6,43-13.6 s-15,12.2-34,17C182,90.5,173,88.4,161,84.2z; M161.281,100.284c0,0,13.05,2.001,29.951-2.488 c17.899-4.612,42.676-14.583,42.676-14.583s-14.716,12.541-33.601,17.775C182.42,106.1,173.374,104.207,161.281,100.284z; M157.111,88.349c0,0,13.148,1.189,29.74-4.339 c17.579-5.712,41.691-17.199,41.691-17.199s-13.91,13.429-32.435,19.823C178.57,92.844,169.425,91.515,157.111,88.349z ; M154.368,78.293c0,0,13.195,0.454,29.452-5.99 c17.233-6.683,40.667-19.497,40.667-19.497s-13.14,14.183-31.279,21.601C176.044,81.585,166.839,80.768,154.368,78.293z; M150.45,65.268c0,0,13.195,0.454,29.452-5.99 c17.233-6.683,40.667-19.497,40.667-19.497s-13.14,14.183-31.279,21.601C172.127,68.56,162.922,67.743,150.45,65.268z; M165.82,55.546c0,0,13.091,1.713,29.89-3.15 c17.792-5.006,42.343-15.523,42.343-15.523s-14.435,12.863-33.199,18.514C187.083,60.894,177.998,59.201,165.82,55.546z; M157.76,64.995c0,0,13.091,1.713,29.89-3.15 c17.792-5.006,42.343-15.523,42.343-15.523s-14.435,12.863-33.199,18.514C179.023,70.343,169.938,68.65,157.76,64.995z ; M161,84.2c0,0,13,2.3,30-1.8c18-4.2,43-13.6,43-13.6 s-15,12.2-34,17C182,90.5,173,88.4,161,84.2z '%3E%3C/animate%3E%3C/path%3E%3Cpath style='fill:%23a96f25;fill-opacity:1;stroke:none' d='m 343,171 c 0,0 -8,0 -25,-8 -17,-8 -26,-18 -48,-20 -22,-2 16,21 16,21 l 57,7 z' id='path3800'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' values=' m 343,171 c 0,0 -8,0 -25,-8 -17,-8 -26,-18 -48,-20 -22,-2 16,21 16,21 l 57,7 z; M345.225,182.884c0,0-7.998,0.184-25.177-7.425 c-17.18-7.607-26.407-17.398-48.447-18.892c-22.04-1.495,16.478,20.627,16.478,20.627L345.225,182.884z; M345.82,159.393c0,0-7.972,0.679-25.588-5.85 c-17.618-6.528-27.434-15.728-49.524-15.854c-22.09-0.127,17.724,19.566,17.724,19.566L345.82,159.393z; M346.743,138.707c0,0-7.921,1.122-25.875-4.415 c-17.954-5.535-28.268-14.174-50.331-13.069c-22.063,1.105,18.787,18.548,18.787,18.548L346.743,138.707z ; M342.826,125.682c0,0-7.921,1.122-25.875-4.415 c-17.954-5.535-28.268-14.174-50.331-13.069c-22.063,1.105,18.787,18.548,18.787,18.548L342.826,125.682z; M351.545,134.061c0,0-7.992,0.36-25.334-6.867 c-17.344-7.225-26.785-16.81-48.853-17.817c-22.068-1.007,16.93,20.258,16.93,20.258L351.545,134.061z; M343.485,143.51c0,0-7.992,0.36-25.334-6.867 c-17.344-7.225-26.785-16.81-48.853-17.817c-22.068-1.007,16.93,20.258,16.93,20.258L343.485,143.51z; m 343,171 c 0,0 -8,0 -25,-8 -17,-8 -26,-18 -48,-20 -22,-2 16,21 16,21 l 57,7 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg id='oreilles'%3E%3Cg id='g4814'%3E%3Cpath id='path4800' d='M 289,171 C 277,146 268,125 231,113 193,100 173,108 171,111 169,115 173,134 194,154 214,174 247,186 289,171 z' style='fill:%23ffb039;stroke:%23ff4c01;stroke-width:4'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' values=' M289,171 c-12-25-21-46-58-58c-38-13-58-5-60-2c-2,4,2,23,23,43C214,174,247,186,289,171z; M290.833,183.5 c-12-25-21-46-58-58c-38-13-58-5-60-2c-2,4,2,23,23,43C215.833,186.5,248.833,198.5,290.833,183.5z; M293.671,165.548 c-14.937-23.364-26.412-43.121-64.592-50.556c-39.294-8.306-58.179,2.055-59.801,5.275c-1.501,4.212,4.769,22.589,28.034,39.901 C219.585,177.601,253.795,185.52,293.671,165.548z ; M295.089,150.22 c-17.981-21.111-32.042-39.119-70.878-41.282c-40.06-2.874-57.356,9.964-58.525,13.375c-0.913,4.378,7.802,21.729,33.21,35.708 C223.336,172.257,258.306,175.44,295.089,150.22z; M286.057,129.612 c-19.178-20.03-34.261-37.191-73.158-37.092c-40.159-0.541-56.68,13.281-57.648,16.754c-0.657,4.423,9.052,21.238,35.229,33.718 C215.706,155.782,250.802,156.927,286.057,129.612z; M295.135,137.735 c-17.104-21.828-30.417-40.396-69.133-44.142c-39.909-4.508-57.715,7.613-59.022,10.974c-1.091,4.337,6.908,22.029,31.724,37.035 C222.542,156.823,257.354,161.431,295.135,137.735z; M288.169,148.133 c-15.12-23.247-26.748-42.914-64.985-50.049c-39.358-7.999-58.161,2.51-59.759,5.743c-1.468,4.224,4.945,22.55,28.345,39.68 C214.179,160.765,248.45,168.416,288.169,148.133z; M289,171 c-12-25-21-46-58-58c-38-13-58-5-60-2c-2,4,2,23,23,43C214,174,247,186,289,171z '%3E%3C/animate%3E%3C/path%3E%3Cpath id='path4808' d=' ' style='fill:%23ff4c01;fill-opacity:1;stroke:none'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' values=' M211,117c0,0,20,8,28,22c7,13,7,22,7,22s-5-18-17-28 C217,122,211,117,211,117z; M212.833,129.5c0,0,20,8,28,22c7,13,7,22,7,22 s-5-18-17-28C218.833,134.5,212.833,129.5,212.833,129.5z; M209.71,121.383c0,0,20.821,5.521,30.456,18.45 c8.522,12.057,9.611,20.991,9.611,20.991s-7.141-17.263-20.263-25.737C216.271,125.62,209.71,121.383,209.71,121.383z; M205.893,117.909c0,0,21.379,2.632,32.687,14.128 c10.085,10.784,12.381,19.486,12.381,19.486s-9.427-16.128-23.582-22.736C212.97,121.212,205.893,117.909,205.893,117.909z; M195.133,102.54c0,0,21.496,1.385,33.453,12.204 c10.695,10.179,13.493,18.733,13.493,18.733s-10.349-15.553-24.863-21.327C202.39,105.426,195.133,102.54,195.133,102.54z; M207.333,101.808c0,0,21.254,3.503,32.083,15.451 c9.637,11.187,11.576,19.975,11.576,19.975s-8.761-16.5-22.633-23.68C214.27,105.396,207.333,101.808,207.333,101.808z; M203.864,104.625c0,0,20.864,5.358,30.6,18.211 c8.616,11.991,9.775,20.915,9.775,20.915s-7.276-17.206-20.464-25.577C210.459,108.811,203.864,104.625,203.864,104.625z; M211,117c0,0,20,8,28,22c7,13,7,22,7,22s-5-18-17-28 C217,122,211,117,211,117z '%3E%3C/animate%3E%3C/path%3E%3Cpath id='path4810' d=' ' style='fill:%23ffb039;fill-opacity:1;stroke:none'%3E%3Canimate attributeType='XML' attributeName='d' dur='0.6s' repeatCount='indefinite' values=' m 192,144 c 0,0 27,30 36,39 10,9 65,-8 65,-8 0,0 -9,-23 -23,-34 -14,-11 -5,25 -16,26 -11,0 -62,-23 -62,-23 z; m 193.833,156.5 c 0,0 27,30 36,39 10,9 65,-8 65,-8 0,0 -9,-23 -23,-34 -14,-11 -5,25 -16,26 -11,0 -62,-23 -62,-23 z; m 194.117,150.484 c 0,0 30.432,26.512 40.455,34.357 11.016,7.724 63.554,-15.806 63.554,-15.806 0,0 -11.717,-21.742 -26.945,-30.967 -15.229,-9.225 -1.938,25.421 -12.736,27.745 -10.92,1.331 -64.328,-15.329 -64.328,-15.329 z; m 194.41,148.863 c 0,0 33.761,22.118 44.759,28.524 11.965,6.151 60.808,-24.319 60.808,-24.319 0,0 -14.57,-19.943 -30.914,-27.007 -16.344,-7.064 1.544,25.448 -8.837,29.222 -10.636,2.806 -65.816,-6.42 -65.816,-6.42 z; m 185.469,134.109 c 0,0 34.989,20.118 46.341,25.874 12.303,5.445 59.292,-27.813 59.292,-27.813 0,0 -15.705,-19.062 -32.431,-25.165 -16.726,-6.102 3.021,25.315 -7.124,29.686 -10.455,3.422 -66.078,-2.582 -66.078,-2.582 z; m 194.596,132.267 c 0,0 32.829,23.479 43.557,30.328 11.705,6.634 61.75,-21.816 61.75,-21.816 0,0 -13.744,-20.521 -29.785,-28.247 -16.041,-7.725 0.503,25.49 -10.023,28.836 -10.741,2.371 -65.499,-9.101 -65.499,-9.101 z ; m 188.5,133.848 c 0,0 30.638,26.273 40.722,34.04 11.076,7.638 63.429,-16.303 63.429,-16.303 0,0 -11.887,-21.65 -27.186,-30.755 -15.3,-9.106 -1.74,25.435 -12.52,27.843 -10.908,1.416 -64.445,-14.825 -64.445,-14.825 z; m 192,144 c 0,0 27,30 36,39 10,9 65,-8 65,-8 0,0 -9,-23 -23,-34 -14,-11 -5,25 -16,26 -11,0 -62,-23 -62,-23 z '%3E%3C/animate%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)Here’s an example to show that you can use JavaScript to switch out the text of the SVG (using .textContent, not .innerText since it’s an SVG element). With that being said, you can’t do something like a scramble text effect due to the limitation around using setInterval and requestAnimationFrame6.
However, we can swap out the text (or any elements) after the start if we use an SVG along with CSS animations! To do so you have to include the content in the original SVG and use CSS keyframes.
The above technique can be used to create a stop motion effect or make words and/or elements appear “randomly” around the console (you might want to use JavaScript or a pre-processor to help you generate this sort of thing). For example, here’s a some random circles that disappear and appear:
It’s impossible to add click events or links inside of the SVG that’s used as a background image. However, if you’re fine showing the full URL, you can fake it by using carefully chosen padding values to place the URL from the console message where you want it to be relative to the background image. It might also be worth changing the font-family being used to more closely match the SVG that you use.
Keep in mind that the URL itself will affect the width of the element, so you may need to adjust your SVG. Also, make sure to test thoroughly between browsers because there are more cross-browser inconsistencies with this technique.
In Safari, it only shows the link and not the background image.
Unfortunately, I couldn’t find a way to make the message span 100% of the width of the console. I believe that this is because we can’t change the display of elements in the console, so things like width: 100% don’t work here. The element must have an explicit width and height in pixels (or other non-relative unit), or else its size will be based on the text.
I did notice that console.table(['foo']) spans the whole width, but we’re unable to use CSS styling on console tables as far as I know.
In the future, I hope browsers will add a responsive width element in the console.
Reveal animations (like the first half of the line-drawing animation above) are one way of animating using this technique. However, these animations may finish before someone actually opens up the console. As such, I wanted to see if we can detect when the console is open so that we can wait to fire the animation until then.
To my knowledge, there’s no way to detect if the console itself is open (if you know of a way, please let me know!). However, there are some ways to detect if the DevTools in general are open, though the method seems to change every so often.
I got the lightweight package devtools-detect working in a project using this sort of setup. However, the package has many known issues, which the author notes in the README. But for the purpose of something superfluous like this it is probably okay. If you’re really wanting to do this, I might recommend detect-devtools-via-debugger-heartstop instead because it seems more reliable but I didn’t test it myself.
With that being said, you may want to use a looping or ambient (constantly running) animation so you make sure that your user sees the hard work you’ve invested.
I tried getting a sense of the performance impact by running the most intense animation that I provided as an example, the horse animation from the example section above, and looking at my Activity Monitor.
When the console was open and the animation was running, the “Google Chrome Helper (GPU)” went up to around 80% on my 2018 Macbook Pro. With any other devtools tab open instead or with the dev tools closed, I could not see any measurable impact on any process.
This indicates that this sort of effect should not have much of an impact on your page unless someone has their devtools console open.
With that being said, always do your own testing, including on a wider range of devices, to make sure it’s not a detriment to any user’s experience.
Note: Using consoles in this way is very experimental and these results are likely to be inaccurate at some point in the future. As far as I can tell, styles in the console using %c like this is mentioned in a spec but not fleshed out.
Firefox fails to set the proper height of the background image and cuts off the SVG a bit:
It seems like for Firefox you have to basically double the height: use the height for the line-height then use half the height for the padding-block. The downside of doing this is that it adds a bit of extra white space at the bottom of the SVGs in Chrome and Edge. In order to have this effect look significantly better in Firefox, I think this is worth the tradeoff but I also hope that Firefox can address this issue. If you have figured out a way to get around this issue, please let me know!
Additionally, Firefox has a significantly shorter character limit for console messages, so ones like the horse animation above don’t render anything in Firefox.
So long as you’re not trying to align other text with an SVG, you can drop the vertical-align: middle which makes the Chrome & Edge version a bit better.
Safari is the only major browser that doesn’t support this sort of thing (per usual). It just prints the raw text and ignores the CSS:
It does have some limited CSS support for console messages though, just not enough for the more complex CSS and background images. Hopefully this article can encourage them to improve their support!
All in all, since this technique acts like progressive enhancement and is basically an easter egg, I would be happy to ship something like this in production code at any company. I think you should too!
css-doodle is a library similar to P5.js and the like. It specializes in HTML + CSS + SVG creations (though recently it’s gotten support for GLSL shaders). This makes it a perfect for creating effects for the console! It’s created by Chuan (@yuanchuan). Note that it’s still fairly early on in its development and not everything about it is documented!
I could write several articles on css-doodle, but for the purpose of this article I will keep it short:
You can create some nice-looking console messages without using SVGs or anything like that. For example, you can apply multiple text-shadows to apply a 3D text effect:
A similar effect that has been explored more is ASCII art in the console. For example, the fairly well-known Reddit console.log art / ad:
Note the usage of font-family: monospace to make sure the characters have a consistent width.
Emojis work well in the console. Sometimes, that may be all you need!
I’m hoping that this article inspires developers and companies to implement delightful console surprises. I think it should become a normal addition to a website!