console.delight

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!

How to use CSS, SVGs, and HTML in a console message

Here’s the magic: %c. It lets us render a console message (like console.log or console.info) using a bit of CSS!

Should I use console.log or console.info?

Console logs are generally used for debugging purposes while console infos are used for information that is more relevant to end users. The only difference in terms of how they’re handled by browsers are some styling differences. For the purpose of an effect like the ones discussed in this article, I think console.info makes more sense.

Let’s see how it works.

Here’s the console.info from the online version of Adobe Photoshop (partially unminified):

console.info(
  '%c %cAdobe %cPhotoshop Web%c  %c2023.23.0.1%c  %c037a8af9746',
  'padding-left: 36px; line-height: 36px; background-image: url("data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAP///wAAAAAAACH5BAEAAAIALAAAAAAgACAAAAKkhC+py3zfopxGvIsztsCGD4La2FVAGBoBuZnox45WcqLsum5KDWdvf1nwTo+fLbgDqo7LFCJJbOY0oidt6ozVKrtib0qaCnlYcJh7rf5iK6HZaM64VeS6L+pWf89WT+6vRAUBBVQ1gpOTJ4IYdxCnOBSJ8ZhkZNekk5ZSxpTpt6Y1eEVm00j3VALDmBXVyPEJB2r2ShoLh2ASqvU60dsr5yuBUQAAOw=="); background-size: 32px; background-repeat: no-repeat; background-position: 2px 2px',
  'background: #666; border-radius:0.5em 0 0 0.5em; padding:0.2em 0em 0.1em 0.5em; color: white; font-weight: bold',
  'background: #666; border-radius:0 0.5em 0.5em 0; padding:0.2em 0.5em 0.1em 0em; color: white;',
  '',
  'background: #c3a650; border-radius:0.5em; padding:0.2em 0.5em 0.1em 0.5em; color: white;',
  '',
  'background: #15889f; border-radius:0.5em; padding:0.2em 0.5em 0.1em 0.5em; color: white;'
);
Code language: JavaScript (javascript)

Here’s what it looks like in Chrome and Edge (I use dark mode):

An SVG image of an eye followed by three pills, which say 'Adobe Photoshop Web', '2023.23.0.1', and '037a8af9746', each in a different color.

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!

For example…
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)
A photo of a kitten being rendered in the dev tools console.

Interestingly, a character (like the space I included to the right of the %c above) is required for the image to show up.

Exploring the capabilities of non-text in the console

SVG capabilities

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.

CapabilitySupported?
Any “regular” SVG element (e.g. <circle>, <path>, etc)✅
Gradients✅
Clip paths✅
Masks✅
Filters✅
Transforms✅1
<a> tag❌
External images❌
SMIL animation✅
foreignObject✅2
Patterns✅

Relevant to SVG gradient, clip paths, masks, filters, and patterns

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:

<rect fill="url(#gradient1)" width="100" height="100" />
<rect fill="url(#gradient2)" width="100" height="100" />Code language: HTML, XML (xml)

Using the same attribute via attributes directly on the SVG elements also does not work:

<rect fill="url(#gradient1)" width="100" height="100" />
<rect fill="url(#gradient1)" width="100" height="100" />Code language: HTML, XML (xml)

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:

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient1">
      <stop class="stop1" offset="0%" stop-color="red" />
      <stop class="stop2" offset="50%" stop-color="black" />
      <stop class="stop3" offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <style>
    rect {
      fill: url(#gradient1);
    }
  </style>

  <rect id="rect1" width="100" height="100" />
  <rect id="rect2" width="100" height="100" x="120" />
</svg>Code language: HTML, XML (xml)

CSS capabilities

CapabilitySupported?
CSS animations✅
:hover❌
CSS variables✅3
@media queries✅4
Viewport units✅5
background-image: linear-gradient()✅
background-image: url()❌
@import❌
background-clip❌

JavaScript capabilities

CapabilitySupported?
Console commands❌
DOM references within the SVG✅
DOM reference to the SVG itself✅
DOM reference outside of the SVG❌
.appendChild❌
Changing the SVG’s DOM (attributes, text, etc.)✅
setTimeout❌6
requestAnimationFrame❌6
WAAPI❌
“Global” variables via multiple <script> tags✅
Setting CSS variables✅
Importing external JS❌
prompt❌
.addEventListener❌

Rendering HTML inside of the SVG

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):

console.info(
  '%c ',
  `line-height:200px;padding-block:100px;padding-left:200px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cstyle%3E .wrapper %7B font-family: sans-serif; perspective: 500px; text-align: center; position: relative; width: 100%25; height: 100%25; %7D .cube %7B position: absolute; top: 20%25; left: 30%25; transform-style: preserve-3d; transform: rotateY(40deg) rotateX(-40deg); animation: wiggle_wiggle_wiggle_wiggle_wiggle_yeah 3s ease-in-out infinite alternate; %7D .side %7B width: 8rem; height: 8rem; background: rgba(0, 0, 0, 0.8); display: inline-block; position: absolute; line-height: 8rem; color: %23fff; text-align: center; box-sizing: border-box; border: 3px solid %23f00; font-size: 4rem; %7D .front %7B transform: translateZ(4rem); z-index: 1; %7D .back %7B transform: rotateY(180deg) translateZ(4rem); %7D .left %7B transform: rotateY(-90deg) translateZ(4rem); z-index: 1; %7D .right %7B transform: rotateY(90deg) translateZ(4rem); %7D .top %7B transform: rotateX(90deg) translateZ(4rem); %7D .bottom %7B transform: rotateX(-90deg) translateZ(4rem); %7D @keyframes wiggle_wiggle_wiggle_wiggle_wiggle_yeah %7B 0%25 %7B transform: rotateY(15deg) rotateX(-15deg); %7D 100%25 %7B transform: rotateY(60deg) rotateX(-45deg); %7D %7D %3C/style%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml' class='wrapper'%3E%3Cdiv class='cube'%3E%3Cdiv class='side front'%3E1%3C/div%3E%3Cdiv class='side back'%3E6%3C/div%3E%3Cdiv class='side left'%3E3%3C/div%3E%3Cdiv class='side right'%3E4%3C/div%3E%3Cdiv class='side top'%3E2%3C/div%3E%3Cdiv class='side bottom'%3E5%3C/div%3E%3C/div%3E%3C/div%3E%3C/foreignObject%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)

Example effects to inspire you

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:

console.info(
  '%c ',
  `padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)

How about a line-drawing animation? The one below is pulled from Amelia Carlie’s pen but you could do more decorative elements, draw outlines of shapes, or create an ongoing visualization if you’d like.

console.info(
  '%c ',
  `padding-left:840.42px;padding-top:80.75px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg class='container' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 840.42 80.75'%3E%3Cstyle%3E .container %7B background: linear-gradient(to left, %23112, %23223); %7D @keyframes draw %7B 40%25, 80%25 %7B opacity: 1; stroke-dashoffset: 0; stroke: %23ec0062; %7D 95%25, 100%25 %7B stroke-dashoffset: 0; opacity: 0; %7D %7D .line %7B fill: none; stroke: %23334; stroke-width: 4.75; stroke-linecap: round; stroke-miterlimit: 10; stroke-dasharray: 200; animation: draw 7s infinite ease-in-out; %7D .line-reverse %7B stroke-dashoffset: -200; %7D .line-forwards %7B stroke-dashoffset: 200; %7D %3C/style%3E%3C!-- A --%3E%3Cpolyline class='line line-forwards' points='2.38,77.83 33.4,6.55 64.42,77.83'%3E%3C/polyline%3E%3Cline class='line line-forwards' x1='17.96' y1='42.19' x2='38.47' y2='42.19'%3E%3C/line%3E%3C!-- M --%3E%3Cpolyline class='line line-forwards' points='81.87,78.01 81.87,6.37 113.21,42.55 143.91,6.37'%3E%3C/polyline%3E%3Cpath class='line line-forwards' d='M113.21,42.55'%3E%3C/path%3E%3Cpath class='line line-forwards' d='M113.21,42.55'%3E%3C/path%3E%3Cline class='line line-forwards' x1='143.91' y1='16.66' x2='143.91' y2='78.01'%3E%3C/line%3E%3C!-- E --%3E%3Cpolyline class='line line-forwards' points='223,6.73 160.96,6.73 160.96,78.01 222.95,78.01'%3E%3C/polyline%3E%3Cline class='line line-forwards' x1='171.25' y1='42.37' x2='213.59' y2='42.37'%3E%3C/line%3E%3C!-- L --%3E%3Cline class='line line-forwards' x1='240.14' y1='6.73' x2='240.14' y2='78.37'%3E%3C/line%3E%3Cpath class='line line-forwards' d='M240.14,6.73'%3E%3C/path%3E%3Cline class='line line-forwards' x1='250.43' y1='78.37' x2='302.18' y2='78.37'%3E%3C/line%3E%3C!-- I --%3E%3Cline class='line line-forwards' x1='319.21' y1='6.73' x2='319.21' y2='78.37'%3E%3C/line%3E%3C!-- Reverse A --%3E%3Cpolyline class='line line-reverse' points='398.4,77.83 367.38,6.55 336.36,77.83'%3E%3C/polyline%3E%3Cline class='line line-reverse' x1='382.81' y1='42.19' x2='362.31' y2='42.19'%3E%3C/line%3E%3C!-- C --%3E%3Cpath class='line line-reverse' d='M504.32,78.37h-9.41H478.1c-19.78,0-35.82-16.04-35.82-35.82c0-19.78,16.04-35.82,35.82-35.82h26.22'%3E%3C/path%3E%3C!-- A --%3E%3Cpolyline class='line line-forwards' points='521.62,77.83 552.64,6.55 583.66,77.83'%3E%3C/polyline%3E%3Cline class='line line-forwards' x1='537.21' y1='42.19' x2='557.71' y2='42.19'%3E%3C/line%3E%3C!-- R --%3E%3Cpath class='line line-reverse' d='M610.94,42.19h19.4c9.89,0,17.91-8.02,17.91-17.91s-8.02-17.91-17.91-17.91h-29.65v71.64'%3E%3C/path%3E%3Cline class='line line-forwards' x1='630.34' y1='42.19' x2='662.73' y2='78.01'%3E%3C/line%3E%3C!-- L --%3E%3Cline class='line line-forwards' x1='679.89' y1='6.73' x2='679.89' y2='78.37'%3E%3C/line%3E%3Cline class='line line-forwards' x1='690.18' y1='78.37' x2='741.93' y2='78.37'%3E%3C/line%3E%3C!-- I --%3E%3Cline class='line line-forwards' x1='758.96' y1='6.73' x2='758.96' y2='78.37'%3E%3C/line%3E%3C!-- E --%3E%3Cpolyline class='line line-forwards' points='838.04,6.73 776,6.73 776,78.01 837.99,78.01'%3E%3C/polyline%3E%3Cline class='line line-forwards' x1='786.29' y1='42.37' x2='828.63' y2='42.37'%3E%3C/line%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)

Heck, you can even create basic particle effects! The demo below is based on my simple responsive snowfall pen.

console.info(
  '%c ',
  `padding-left:800px;line-height:250px;padding-block:125px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg class='svg-snowscene' viewBox='0 0 800 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes snowing%7B0%25%7Bfill-opacity:1%7D100%25%7Bfill-opacity:0;transform:translateY(250px)%7D%7D.svg-snowscene%7Bbackground-color:%239cf;background-image:linear-gradient(%236af,%23bdf)%7Dtext%7Bfill:%23fff;font-family:cursive%7Dcircle%7Bfill:%23fff;animation-name:snowing;animation-iteration-count:infinite;animation-timing-function:ease-out%7Dcircle:nth-child(1n)%7Banimation-delay:-.2s;animation-duration:7s%7Dcircle:nth-child(2n)%7Banimation-delay:-.4s;animation-duration:6s%7Dcircle:nth-child(3n)%7Banimation-delay:-.6s;animation-duration:8s%7Dcircle:nth-child(4n)%7Banimation-delay:-.8s;animation-duration:9s%7Dcircle:nth-child(5n)%7Banimation-delay:-1s;animation-duration:8s%7Dcircle:nth-child(6n)%7Banimation-delay:-1.2s;animation-duration:10s%7Dcircle:nth-child(7n)%7Banimation-delay:-1.4s;animation-duration:10s%7Dcircle:nth-child(8n)%7Banimation-delay:-1.6s;animation-duration:10s%7Dcircle:nth-child(9n)%7Banimation-delay:-1.8s;animation-duration:8s%7Dcircle:nth-child(10n)%7Banimation-delay:-2s;animation-duration:9s%7Dcircle:nth-child(11n)%7Banimation-delay:-2.2s;animation-duration:7s%7Dcircle:nth-child(12n)%7Banimation-delay:-2.4s;animation-duration:8s%7Dcircle:nth-child(13n)%7Banimation-delay:-2.6s;animation-duration:9s%7Dcircle:nth-child(14n)%7Banimation-delay:-2.8s;animation-duration:10s%7Dcircle:nth-child(15n)%7Banimation-delay:-3s;animation-duration:10s%7Dcircle:nth-child(16n)%7Banimation-delay:-3.2s;animation-duration:6s%7Dcircle:nth-child(17n)%7Banimation-delay:-3.4s;animation-duration:7s%7Dcircle:nth-child(18n)%7Banimation-delay:-3.6s;animation-duration:6s%7Dcircle:nth-child(19n)%7Banimation-delay:-3.8s;animation-duration:8s%7Dcircle:nth-child(20n)%7Banimation-delay:-4s;animation-duration:6s%7Dcircle:nth-child(21n)%7Banimation-delay:-4.2s;animation-duration:9s%7Dcircle:nth-child(22n)%7Banimation-delay:-4.4s;animation-duration:9s%7Dcircle:nth-child(23n)%7Banimation-delay:-4.6s;animation-duration:8s%7Dcircle:nth-child(24n)%7Banimation-delay:-4.8s;animation-duration:7s%7Dcircle:nth-child(25n)%7Banimation-delay:-5s;animation-duration:8s%7Dcircle:nth-child(26n)%7Banimation-delay:-5.2s;animation-duration:7s%7Dcircle:nth-child(27n)%7Banimation-delay:-5.4s;animation-duration:6s%7Dcircle:nth-child(28n)%7Banimation-delay:-5.6s;animation-duration:8s%7Dcircle:nth-child(29n)%7Banimation-delay:-5.8s;animation-duration:10s%7Dcircle:nth-child(30n)%7Banimation-delay:-6s;animation-duration:10s%7Dcircle:nth-child(31n)%7Banimation-delay:-6.2s;animation-duration:9s%7Dcircle:nth-child(32n)%7Banimation-delay:-6.4s;animation-duration:10s%7Dcircle:nth-child(33n)%7Banimation-delay:-6.6s;animation-duration:10s%7Dcircle:nth-child(34n)%7Banimation-delay:-6.8s;animation-duration:6s%7Dcircle:nth-child(35n)%7Banimation-delay:-7s;animation-duration:6s%7Dcircle:nth-child(36n)%7Banimation-delay:-7.2s;animation-duration:10s%7Dcircle:nth-child(37n)%7Banimation-delay:-7.4s;animation-duration:7s%7Dcircle:nth-child(38n)%7Banimation-delay:-7.6s;animation-duration:9s%7Dcircle:nth-child(39n)%7Banimation-delay:-7.8s;animation-duration:9s%7Dcircle:nth-child(40n)%7Banimation-delay:-8s;animation-duration:8s%7Dcircle:nth-child(41n)%7Banimation-delay:-8.2s;animation-duration:6s%7Dcircle:nth-child(42n)%7Banimation-delay:-8.4s;animation-duration:10s%7Dcircle:nth-child(43n)%7Banimation-delay:-8.6s;animation-duration:7s%7Dcircle:nth-child(44n)%7Banimation-delay:-8.8s;animation-duration:9s%7Dcircle:nth-child(45n)%7Banimation-delay:-9s;animation-duration:10s%7Dcircle:nth-child(46n)%7Banimation-delay:-9.2s;animation-duration:6s%7Dcircle:nth-child(47n)%7Banimation-delay:-9.4s;animation-duration:7s%7Dcircle:nth-child(48n)%7Banimation-delay:-9.6s;animation-duration:9s%7Dcircle:nth-child(49n)%7Banimation-delay:-9.8s;animation-duration:7s%7Dcircle:nth-child(50n)%7Banimation-delay:-10s;animation-duration:7s%7D%3C/style%3E%3Ctext font-size='80' text-anchor='middle' x='400' y='140'%3EMerry Christmas!%3C/text%3E%3Ccircle cx='25.995103990111105%25' cy='-77.81008995571561' r='2.749159658185124'%3E%3C/circle%3E%3Ccircle cx='89.62561554717637%25' cy='-46.78148229694086' r='2.393631489179748'%3E%3C/circle%3E%3Ccircle cx='5.135745159612563%25' cy='-38.81872689180804' r='2.841244102307123'%3E%3C/circle%3E%3Ccircle cx='40.819201884845775%25' cy='-34.58293639476059' r='1.4458270158519961'%3E%3C/circle%3E%3Ccircle cx='26.212971825618283%25' cy='-12.498573576229386' r='2.9709903306827465'%3E%3C/circle%3E%3Ccircle cx='76.68859580291824%25' cy='-62.21926850640058' r='1.1347363710323926'%3E%3C/circle%3E%3Ccircle cx='55.72266234658971%25' cy='-74.73326327616485' r='1.113806305196924'%3E%3C/circle%3E%3Ccircle cx='39.0317830273073%25' cy='-58.703705511039225' r='2.3100083626369976'%3E%3C/circle%3E%3Ccircle cx='89.7176436793289%25' cy='-10.281820667480222' r='2.0469063477660447'%3E%3C/circle%3E%3Ccircle cx='83.96827591096722%25' cy='-81.2478772998329' r='1.790201302779563'%3E%3C/circle%3E%3Ccircle cx='7.260053772750218%25' cy='-96.49215734429552' r='2.3545864333810256'%3E%3C/circle%3E%3Ccircle cx='26.883202292253728%25' cy='-37.108549732420656' r='1.9978674352572674'%3E%3C/circle%3E%3Ccircle cx='58.50316757093038%25' cy='-44.19563368875621' r='2.1333080325968745'%3E%3C/circle%3E%3Ccircle cx='49.153134743170924%25' cy='-96.61192814231214' r='1.0338012128288736'%3E%3C/circle%3E%3Ccircle cx='80.66335728120768%25' cy='-92.60017007342769' r='1.352444421725643'%3E%3C/circle%3E%3Ccircle cx='49.21716180537502%25' cy='-15.736517819787414' r='2.56514014572579'%3E%3C/circle%3E%3Ccircle cx='18.159072047777208%25' cy='-41.662630986758565' r='1.827289622857739'%3E%3C/circle%3E%3Ccircle cx='28.591656766804356%25' cy='-75.40392903873996' r='2.540805639719657'%3E%3C/circle%3E%3Ccircle cx='75.7560667785456%25' cy='-42.093604757726446' r='1.411351114203426'%3E%3C/circle%3E%3Ccircle cx='95.86623136857125%25' cy='-86.17237490881534' r='1.6437772466697007'%3E%3C/circle%3E%3Ccircle cx='66.57358996698223%25' cy='-33.05038635630268' r='1.224578596470813'%3E%3C/circle%3E%3Ccircle cx='37.87486333612133%25' cy='-91.98642442806697' r='1.5164858217037178'%3E%3C/circle%3E%3Ccircle cx='99.9780409949983%25' cy='-85.25670632025145' r='1.093408865757894'%3E%3C/circle%3E%3Ccircle cx='6.258195692333731%25' cy='-82.17612056080935' r='2.5970745236726915'%3E%3C/circle%3E%3Ccircle cx='76.92756548357505%25' cy='-39.05022432020484' r='1.3903120977596086'%3E%3C/circle%3E%3Ccircle cx='35.30776480586916%25' cy='-5.100866152259875' r='2.490933162143621'%3E%3C/circle%3E%3Ccircle cx='21.888577746640067%25' cy='-53.61306945430116' r='1.5911619566776065'%3E%3C/circle%3E%3Ccircle cx='5.408329205067845%25' cy='-25.216367465595514' r='1.7561674911504097'%3E%3C/circle%3E%3Ccircle cx='11.607577654364524%25' cy='-50.29316328357586' r='1.9271574194581076'%3E%3C/circle%3E%3Ccircle cx='80.61508259836967%25' cy='-56.47870637418366' r='2.7379039794681383'%3E%3C/circle%3E%3Ccircle cx='75.29235125946235%25' cy='-24.205675758687455' r='1.7921437262309654'%3E%3C/circle%3E%3Ccircle cx='97.78226376693122%25' cy='-32.21154549976014' r='1.529148319088483'%3E%3C/circle%3E%3Ccircle cx='73.75693711579706%25' cy='-23.004150289082606' r='2.4556699382045046'%3E%3C/circle%3E%3Ccircle cx='41.419838495897%25' cy='-65.31921232448768' r='2.8044281379588676'%3E%3C/circle%3E%3Ccircle cx='40.950298123173106%25' cy='-26.292156289520896' r='2.419680017572999'%3E%3C/circle%3E%3Ccircle cx='47.867691980584716%25' cy='-26.242657523185184' r='1.0923877243334101'%3E%3C/circle%3E%3Ccircle cx='62.81766527782989%25' cy='-89.701930860537' r='1.7949190430635444'%3E%3C/circle%3E%3Ccircle cx='48.69722811509327%25' cy='-10.958255978759077' r='2.861844670749401'%3E%3C/circle%3E%3Ccircle cx='34.57978264890831%25' cy='-1.1612908265357433' r='1.6199043038315515'%3E%3C/circle%3E%3Ccircle cx='37.96738880106298%25' cy='-12.825961059362545' r='2.8559531388340513'%3E%3C/circle%3E%3Ccircle cx='85.46233678220392%25' cy='-88.02351857384527' r='1.0984128042737793'%3E%3C/circle%3E%3Ccircle cx='64.4596084875124%25' cy='-19.803934792180392' r='2.6968494185321026'%3E%3C/circle%3E%3Ccircle cx='56.87846924216383%25' cy='-68.9330339781381' r='2.441322855837859'%3E%3C/circle%3E%3Ccircle cx='87.67115279021654%25' cy='-57.12781963683186' r='1.268498259959995'%3E%3C/circle%3E%3Ccircle cx='87.86909883390128%25' cy='-65.7354110827157' r='1.2941568814088011'%3E%3C/circle%3E%3Ccircle cx='30.16692089861322%25' cy='-34.69868021057453' r='1.082850239075611'%3E%3C/circle%3E%3Ccircle cx='63.21354400809286%25' cy='-48.79787125206968' r='2.6866316912738153'%3E%3C/circle%3E%3Ccircle cx='73.1130164281696%25' cy='-14.128826564618988' r='2.396208563109712'%3E%3C/circle%3E%3Ccircle cx='49.592435166991244%25' cy='-28.576612560341417' r='2.265863084175359'%3E%3C/circle%3E%3Ccircle cx='12.364052530549507%25' cy='-22.31568226585923' r='2.8058073048920886'%3E%3C/circle%3E%3Cscript%3Efunction r(min, max) %7B return Math.random() * (max - min) + min; %7D const s = document.querySelectorAll('circle'); function l() %7B for (let i = 0; i &amp;lt; s.length; i++) %7B let f = s%5Bi%5D; f.setAttribute('cx', r(1, 100) + '%25'); f.setAttribute('cy', '-' + r(1, 100)); f.setAttribute('r', r(1, 3)); %7D %7D l();%3C/script%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)

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):

This one is enormous! 
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.

console.info(
  '%c ',
  `line-height:100px;padding-block:50px;padding-left:400px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %3C/style%3E%3Crect width='400' height='100'%3E%3C/rect%3E%3Ctext text-anchor='middle' font-size='15' x='200' y='50'%3ESaturday, December 16, 2023 at 6:28 PM%3C/text%3E%3Cscript%3E const text_element = document.querySelector('text'); text_element.textContent = new Date().toLocaleString(true, %7B weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' %7D); %3C/script%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)
The user's locale's current date and time being rendered inside of an SVG within the dev tools console.

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.

console.info(
  '%c ',
  `line-height:100px;padding-block:50px;padding-left:400px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E @keyframes swapText %7B 0%25, 49.999%25 %7B opacity: 0; %7D 50%25, 100%25 %7B opacity: 1; %7D %7D text %7B animation: swapText 2s linear infinite; %7D text:nth-child(2) %7B animation-delay: 1s; %7D @media (prefers-color-scheme: dark) %7B text %7B fill: white; %7D %7D %3C/style%3E%3Ctext text-anchor='middle' font-size='15' x='200' y='50'%3E Hello %3C/text%3E%3Ctext text-anchor='middle' font-size='15' x='200' y='50'%3E there %3C/text%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)

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:

console.info(
  '%c ',
  `line-height:400px;padding-block:200px;padding-left:400px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E%0Acircle %7B animation: swapText 20s linear infinite;%0A%7D @keyframes swapText %7B 0%25, 3.3333333333%25 %7B opacity: 1; %7D 3.33333333330001%25, 100%25 %7B opacity: 0; %7D%0A%7D %3C/style%3E%3Ccircle cx='188.14' cy='207.93' r='186.27' fill='rgb(115.4, 46.31, 186.22)' style='animation-delay: 0s;'%3E%3C/circle%3E%3Ccircle cx='208.55' cy='300.58' r='81.02' fill='rgb(60.85, 183.01, 62.49)' style='animation-delay: -0.666667s;'%3E%3C/circle%3E%3Ccircle cx='235.74' cy='369.64' r='93.29' fill='rgb(10.65, 167.53, 177.52)' style='animation-delay: -1.33333s;'%3E%3C/circle%3E%3Ccircle cx='125.52' cy='188.99' r='172.44' fill='rgb(232.94, 75.08, 191.74)' style='animation-delay: -2s;'%3E%3C/circle%3E%3Ccircle cx='354.54' cy='196.67' r='195.4' fill='rgb(137.93, 57.6, 128.53)' style='animation-delay: -2.66667s;'%3E%3C/circle%3E%3Ccircle cx='90.95' cy='96.81' r='174.46' fill='rgb(106.74, 31.22, 195)' style='animation-delay: -3.33333s;'%3E%3C/circle%3E%3Ccircle cx='309.85' cy='12.27' r='18.34' fill='rgb(189.97, 49.11, 49.68)' style='animation-delay: -4s;'%3E%3C/circle%3E%3Ccircle cx='263.33' cy='392.19' r='58.1' fill='rgb(72.32, 215.33, 61.88)' style='animation-delay: -4.66667s;'%3E%3C/circle%3E%3Ccircle cx='335.22' cy='97.45' r='127.62' fill='rgb(249.17, 162.85, 49.06)' style='animation-delay: -5.33333s;'%3E%3C/circle%3E%3Ccircle cx='293.03' cy='82.52' r='129.85' fill='rgb(159.97, 1.79, 70.68)' style='animation-delay: -6s;'%3E%3C/circle%3E%3Ccircle cx='332.17' cy='399.66' r='45.81' fill='rgb(125.03, 23.01, 116.03)' style='animation-delay: -6.66667s;'%3E%3C/circle%3E%3Ccircle cx='244.8' cy='218.9' r='16.62' fill='rgb(106.53, 210.25, 160.91)' style='animation-delay: -7.33333s;'%3E%3C/circle%3E%3Ccircle cx='161.25' cy='72.33' r='77.1' fill='rgb(42.7, 63.89, 62.5)' style='animation-delay: -8s;'%3E%3C/circle%3E%3Ccircle cx='120.48' cy='211.7' r='96.26' fill='rgb(45.85, 88.66, 125.79)' style='animation-delay: -8.66667s;'%3E%3C/circle%3E%3Ccircle cx='79.6' cy='195.93' r='181.76' fill='rgb(186.39, 73.52, 213.41)' style='animation-delay: -9.33333s;'%3E%3C/circle%3E%3Ccircle cx='26.78' cy='133.29' r='169.22' fill='rgb(132.18, 143.88, 243.06)' style='animation-delay: -10s;'%3E%3C/circle%3E%3Ccircle cx='250.25' cy='16.06' r='157.62' fill='rgb(181.3, 222.83, 41.63)' style='animation-delay: -10.6667s;'%3E%3C/circle%3E%3Ccircle cx='217.1' cy='230.67' r='176.79' fill='rgb(25.67, 124.93, 206.89)' style='animation-delay: -11.3333s;'%3E%3C/circle%3E%3Ccircle cx='76.33' cy='192.31' r='95.13' fill='rgb(249.72, 59.98, 233.37)' style='animation-delay: -12s;'%3E%3C/circle%3E%3Ccircle cx='51.43' cy='146.38' r='45.94' fill='rgb(178.89, 28.13, 79.03)' style='animation-delay: -12.6667s;'%3E%3C/circle%3E%3Ccircle cx='119.16' cy='280.71' r='57.92' fill='rgb(218.66, 139.32, 192.7)' style='animation-delay: -13.3333s;'%3E%3C/circle%3E%3Ccircle cx='315.62' cy='272.65' r='133.31' fill='rgb(200.25, 161.12, 172.04)' style='animation-delay: -14s;'%3E%3C/circle%3E%3Ccircle cx='23.75' cy='20.3' r='93.59' fill='rgb(133.26, 3.74, 246.73)' style='animation-delay: -14.6667s;'%3E%3C/circle%3E%3Ccircle cx='202.55' cy='251.22' r='181.33' fill='rgb(238.6, 80.06, 100.32)' style='animation-delay: -15.3333s;'%3E%3C/circle%3E%3Ccircle cx='279.03' cy='129.2' r='109.52' fill='rgb(92.32, 128.44, 80.39)' style='animation-delay: -16s;'%3E%3C/circle%3E%3Ccircle cx='170.57' cy='65.82' r='149.48' fill='rgb(31.27, 122.5, 20.26)' style='animation-delay: -16.6667s;'%3E%3C/circle%3E%3Ccircle cx='166.27' cy='188.27' r='113.96' fill='rgb(208.93, 241.97, 247.86)' style='animation-delay: -17.3333s;'%3E%3C/circle%3E%3Ccircle cx='320.95' cy='308.88' r='17.71' fill='rgb(131.17, 189.11, 212.93)' style='animation-delay: -18s;'%3E%3C/circle%3E%3Ccircle cx='42.53' cy='61.09' r='86.35' fill='rgb(3.28, 56.87, 58.35)' style='animation-delay: -18.6667s;'%3E%3C/circle%3E%3Ccircle cx='29.74' cy='333.41' r='128.8' fill='rgb(39.54, 206.65, 222.78)' style='animation-delay: -19.3333s;'%3E%3C/circle%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)

Including a link inside of the design

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.

console.info(
  '%chttps://zachsaucier.com/',
  `line-height:88px;padding-block:44px;color:#ffb400;font-family:'Phosphate';font-size:36px;padding-inline:205px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 610 88'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2.5' result='coloredBlur'%3E%3C/feGaussianBlur%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'%3E%3C/feMergeNode%3E%3CfeMergeNode in='SourceGraphic'%3E%3C/feMergeNode%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23glow)' fill='%23ffb400' d='M545.835 10c-1.643 0-3.18.646-4.326 1.822a6.052 6.052 0 0 0 .101 8.548l13.723 13.397-48.961.362a6.378 6.378 0 0 0-6.371 6.37 6.377 6.377 0 0 0 6.37 6.37h11.902a5.946 5.946 0 0 0-1.868 4.316 5.95 5.95 0 0 0 1.807 4.264c.054.056.118.102.174.156.112.101.224.2.344.293a5.986 5.986 0 0 0 3.494 1.397 5.944 5.944 0 0 0-1.725 4.177 5.9 5.9 0 0 0 .76 2.899 6.047 6.047 0 0 0 5.287 3.275 6.028 6.028 0 0 0-1.791 4.293c0 .309.031.61.076.906.003.02.004.04.008.061.16.99.572 1.89 1.152 2.658a6.086 6.086 0 0 0 .852.91c.086.075.175.147.265.217a5.978 5.978 0 0 0 3.325 1.273c.093.007.186.014.28.016.03 0 .058.004.087.004h41.271a9.606 9.606 0 0 0 9.188-6.725h5.418v3.838h13.324V37.254h-13.324v4.218h-5.287c-2.754-5.768-26.366-25.62-31.358-29.777a6.012 6.012 0 0 0-4.197-1.696zm0 1.754a4.27 4.27 0 0 1 2.998 1.22l.05.047c14.806 12.329 30.71 26.833 31.02 29.432l.092.773h6.682v26.28H579.9l-.162.671a7.862 7.862 0 0 1-7.667 6.053h-20.54a5.952 5.952 0 0 0 1.809-4.266c0-3.32-2.748-6.02-6.125-6.02h-.182c1.25-1.102 2.041-2.695 2.041-4.472 0-3.249-2.63-5.903-5.908-6.015a5.954 5.954 0 0 0 1.814-4.272c0-3.32-2.747-6.02-6.125-6.02h-.422v-.05h-32.062a4.622 4.622 0 0 1-4.617-4.616 4.624 4.624 0 0 1 4.623-4.617l53.231-.392-16.772-16.373a4.296 4.296 0 0 1-.072-6.069 4.257 4.257 0 0 1 3.07-1.295zm42.596 27.253h9.816v34.336h-9.816v-31.87Zm-49.996 7.913h.421c2.41 0 4.371 1.913 4.371 4.265 0 2.352-1.96 4.266-4.37 4.266H522.53a4.41 4.41 0 0 1-3.035-1.202 4.267 4.267 0 0 1-1.219-2.984 4.297 4.297 0 0 1 4.291-4.293h15.867zm-11.807 10.286h16.322c2.41 0 4.371 1.914 4.371 4.266 0 2.353-1.96 4.266-4.37 4.266h-16.327a4.39 4.39 0 0 1-3.705-2.016 4.245 4.245 0 0 1-.584-2.12 4.297 4.297 0 0 1 4.293-4.292zm4.261 10.493h16.327c2.41 0 4.37 1.913 4.37 4.265 0 2.353-1.96 4.266-4.37 4.266h-16.327c-.057 0-.113-.006-.17-.008a4.259 4.259 0 0 1-.595-.06 4.42 4.42 0 0 1-.467-.106c-.049-.013-.096-.03-.145-.045a4.386 4.386 0 0 1-1.95-1.287c-.036-.041-.07-.084-.104-.127a4.244 4.244 0 0 1-.326-.463 4.291 4.291 0 0 1-.332-.68 4.205 4.205 0 0 1-.165-.525 4.288 4.288 0 0 1-.11-.814c0-.05-.007-.1-.007-.15 0-.088.01-.173.014-.258.007-.114.02-.224.035-.334.297-2.073 2.118-3.674 4.322-3.674zM64.165 10a6.013 6.013 0 0 0-4.197 1.695c-4.992 4.157-28.604 24.01-31.358 29.777h-5.287v-4.219H10v37.844h13.324V71.26h5.418a9.606 9.606 0 0 0 9.188 6.724H79.2c.029 0 .057-.003.086-.004.094-.003.188-.01.28-.016a5.974 5.974 0 0 0 3.325-1.273c.09-.07.18-.142.266-.217a6.047 6.047 0 0 0 .851-.91 5.993 5.993 0 0 0 1.157-2.684l.004-.035a6.033 6.033 0 0 0 .076-.906 6.028 6.028 0 0 0-1.791-4.293 6.047 6.047 0 0 0 5.287-3.275 5.9 5.9 0 0 0 .76-2.9c0-1.62-.66-3.093-1.725-4.176a5.986 5.986 0 0 0 3.494-1.397 6.114 6.114 0 0 0 .344-.293c.056-.054.12-.1.174-.156a5.953 5.953 0 0 0 1.806-4.264 5.946 5.946 0 0 0-1.867-4.316h11.9a6.377 6.377 0 0 0 6.372-6.37 6.378 6.378 0 0 0-6.371-6.37l-48.961-.362L68.389 20.37a6.052 6.052 0 0 0 .102-8.548 5.997 5.997 0 0 0-4.326-1.823Zm0 1.754a4.257 4.257 0 0 1 3.07 1.294 4.296 4.296 0 0 1-.072 6.069L50.391 35.49l53.23.392a4.624 4.624 0 0 1 4.624 4.617 4.622 4.622 0 0 1-4.617 4.616H71.565v.05h-.422c-3.377 0-6.125 2.7-6.125 6.02 0 1.668.696 3.18 1.815 4.272-3.278.112-5.909 2.766-5.909 6.015 0 1.777.792 3.37 2.041 4.473h-.181c-3.378 0-6.125 2.7-6.125 6.02a5.95 5.95 0 0 0 1.809 4.265h-20.54a7.862 7.862 0 0 1-7.668-6.053l-.162-.672h-6.775V43.226h6.682l.092-.774c.31-2.599 16.213-17.102 31.019-29.431l.05-.047a4.27 4.27 0 0 1 2.999-1.22zM11.753 39.007h9.816v34.336h-9.816zm59.39 7.913h.423v.052h15.867a4.297 4.297 0 0 1 4.291 4.293 4.267 4.267 0 0 1-1.22 2.985 4.359 4.359 0 0 1-.241.215l-.022.017a4.417 4.417 0 0 1-2.772.969H71.144c-2.41 0-4.371-1.914-4.371-4.266 0-2.352 1.96-4.265 4.37-4.265zM67.05 57.206h16.322v.104a4.297 4.297 0 0 1 4.294 4.291c0 .775-.224 1.493-.585 2.121a4.39 4.39 0 0 1-3.705 2.016H67.05c-2.41 0-4.371-1.913-4.371-4.266 0-2.352 1.96-4.266 4.37-4.266zM62.785 67.7H79.11c2.204 0 4.025 1.601 4.322 3.673a4.265 4.265 0 0 1 .035.335c.005.086.014.17.014.257 0 .051-.006.1-.008.15a4.31 4.31 0 0 1-.11.815 4.24 4.24 0 0 1-.296.834 4.349 4.349 0 0 1-.525.834c-.035.043-.069.086-.104.127a4.376 4.376 0 0 1-.54.523c-.004.005-.01.008-.015.012a4.401 4.401 0 0 1-1.396.752c-.049.015-.096.032-.145.045a4.311 4.311 0 0 1-.467.105 4.234 4.234 0 0 1-.596.061c-.056.002-.112.008-.17.008H62.785c-2.41 0-4.37-1.913-4.37-4.266 0-2.352 1.96-4.265 4.37-4.265z'%3E%3C/path%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)

Here’s what the above looks like in Chrome:

A console message with two hands pointing towards a link in the middle. The link text is not perfectly vertically centered and the link text is the default color while the hands are an orange color.

And in Firefox:

A console message with two hands pointing towards a link in the middle. The top of the thumb is cut off a bit.

In Safari, it only shows the link and not the background image.

Responsive sizing

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.

Detecting whether or not the console is open

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.

Performance impact

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.

Browser support

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.

Here’s what Adobe’s console.info command looks like in various browsers:

Chrome & Edge

This is what you saw earlier in the article, reposted here again:

An SVG image of an eye followed by three pills, which say 'Adobe Photoshop Web', '2023.23.0.1', and '037a8af9746', each in a different color.

Firefox

Firefox fails to set the proper height of the background image and cuts off the SVG a bit:

The same console message as before but with the SVG misplaced and cut off and the tops of the pills are cut off.

I got it to appear the same using some guess and check:

console.info(
  '%c %cAdobe %cPhotoshop Web%c  %c2023.23.0.1%c  %c037a8af9746',
  "vertical-align: middle; padding-left:36px; padding-top: 11px; padding-bottom: 9px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAP///wAAAAAAACH5BAEAAAIALAAAAAAgACAAAAKkhC+py3zfopxGvIsztsCGD4La2FVAGBoBuZnox45WcqLsum5KDWdvf1nwTo+fLbgDqo7LFCJJbOY0oidt6ozVKrtib0qaCnlYcJh7rf5iK6HZaM64VeS6L+pWf89WT+6vRAUBBVQ1gpOTJ4IYdxCnOBSJ8ZhkZNekk5ZSxpTpt6Y1eEVm00j3VALDmBXVyPEJB2r2ShoLh2ASqvU60dsr5yuBUQAAOw=='); background-size: 32px 32px; background-repeat: no-repeat; background-position: 0px 0px; overflow: visible",
  'vertical-align: middle; background: #666; border-radius:0.5em 0 0 0.5em; padding:0.2em 0em 0.1em 0.5em; color: white; font-weight: bold',
  'vertical-align: middle; background: #666; border-radius:0 0.5em 0.5em 0; padding:0.2em 0.5em 0.1em 0em; color: white;',
  '',
  'vertical-align: middle; background: #c3a650; border-radius:0.5em; padding:0.2em 0.5em 0.1em 0.5em; color: white;',
  '',
  'vertical-align: middle; background: #15889f; border-radius:0.5em; padding:0.2em 0.5em 0.1em 0.5em; color: white;'
);
Code language: JavaScript (javascript)

However, this throws off the position of the SVG in Chrome and Edge:

The console message rendering correctly other than the SVG being misplaced by being above where it should be.

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

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:

The console message fails to render properly and just shows the raw text of the message.

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!

Tooling that makes this easier

  • My console testing CodePen: I made a CodePen that automatically generates these console.infos for you! Paste an SVG into the HTML section of the pen, run it, then open the console. The console will show you how the message renders as well as the code used to generate it.
  • Your favorite vector editor – Using the CodePen above, you can paste in almost any SVG and get a working console command. That means you can use Inkscape, Adobe Illustator, or whatever other tool you want to use to generate the SVG!
  • css-doodle is a tool / web-component which is prime for creating SVGs to use in the console, detailed in the section below.
  • SVGOMG – Trim down your SVG to reduce the file size. This can also help you try to fit in Firefox’s character limit.
  • EZGIF for converting regular images into data URIs.

Notable mention: css-doodle

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 use the css-doodle web editor to see examples and edit them to create your own (there’s also a starter CodePen if you’d like to work or save your work there).
  • For what commands you can use, the usage section of the website is helpful. It is pretty important to use the @svg command so that it uses SVG, which can then be used as a background image in console commands, though some other commands do work outside of the SVG ones. You can set ease for SVG animations in keySpines.
  • The CodePen collection is another great place to see examples and learn more by breaking down how effects are made.
  • When you’re happy with your result, the easiest way to copy the raw SVG is to use the element inspector of your dev tools: right click the <svg> and click Copy then Copy outerHTML. If your SVG element is empty, that means you didn’t use the @svg command to create your work.

Here’s an example, based on this demo:

console.info(
  '%c ',
  `line-height:100px;padding-block:50px;padding-left:100px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100' stroke='%231B2D37' fill='none'%3E%3Crect stroke-width='2' width='98' height='98' x='-49' y='-49' fill='%23d5f1ff'%3E%3C/rect%3E%3Cpolyline stroke-dasharray='10' pathLength='10' points='0.00001 0,-0.991793 -1.8173446,-2.2402741 3.4823486,6.1949453 0.4474444,-3.4331809 -7.5362848,-6.2133014 8.2797801,12.2932314 1.7851273,-5.0423611 -13.5870507,-10.8698086 12.4970611,18.1990361 3.9991341,-5.7863618 -19.8785691,-16.1450444 16.0621084,23.818206 7.0663947,-5.6410665 -26.3168978,-21.9675334 18.9092802,29.059075 10.9548628,-4.591445 -32.806032,-28.2596767 20.9799619,33.8332657 15.6237668,-2.6317133 -39.248728,-34.9384013 22.223098,38.056466 21.0239282,0.2345778 -45.5473393,-41.915853 22.5956673,41.6491767 27.0981467,3.9945268 -51.6046566,-49.1001299 22.0630962,44.5374235 33.7816489,8.6259382 -57.3247487,-56.3960484 20.5996079,46.653429 41.0025973,14.0974514 -62.6137955,-63.7059392 18.188505,47.9362389 48.6826567,20.368742 -67.3809088,-70.9304643 14.8223821,48.3322984 56.7376131,27.3907928 -71.5389343,-77.9694531 10.5032683,47.7959744 65.0780416,35.1062339 -75.0052279,-84.7227478 5.2426967,46.2900186 73.6100184,43.4497494 -77.7024033,-91.0910542 -0.9382987,43.7859697 82.2358716,52.3485481 -79.559042,-96.9767918 -8.0092596,40.2644891 90.8549658,61.7228942 -80.5103629,-102.2849352 -15.9304529,35.7156303 99.3645155,71.4866962 -80.4988455,-106.9238436 -24.6530929,30.1390368 107.66042,81.5481482 -79.474802,-110.8060694 -34.1196343,23.5440691 115.6381161,91.8104205 -77.396894,-113.8491417 -44.264135,15.9498573 123.1934404'%3E%3Canimate attributeName='stroke-dashoffset' from='10' to='0' dur='10s'%3E%3C/animate%3E%3C/polyline%3E%3C/svg%3E")`
);Code language: JavaScript (javascript)

Notable mention: CSS text effects

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:

console.info(
  '%cA rainbow text effect',
  `color:white;font-size:40px;line-height:300px;text-shadow:-1px -1px red, 1px 1px #ff1700, 3px 2px #ff2e00, 5px 3px orangered, 7px 4px #ff5c00, 9px 5px #ff7300, 11px 6px #ff8a00, 13px 7px #ffa100, 14px 8px #ffb800, 16px 9px #ffcf00, 18px 10px #ffe600, 20px 11px #fffc00, 22px 12px #ebff00, 23px 13px #d4ff00, 25px 14px #bdff00, 27px 15px #a6ff00, 28px 16px #8fff00, 30px 17px #78ff00, 32px 18px #61ff00, 33px 19px #4aff00, 35px 20px #33ff00, 36px 21px #1cff00, 38px 22px #05ff00, 39px 23px #00ff12, 41px 24px #00ff29, 42px 25px #00ff40, 43px 26px #00ff57, 45px 27px #00ff6e, 46px 28px #00ff85, 47px 29px #00ff9c, 48px 30px #00ffb3, 49px 31px #00ffc9, 50px 32px #00ffe0, 51px 33px #00fff7, 52px 34px #00f0ff, 53px 35px #00d9ff, 54px 36px #00c2ff, 55px 37px #00abff, 55px 38px #0094ff, 56px 39px #007dff, 57px 40px #0066ff, 57px 41px #004fff, 58px 42px #0038ff, 58px 43px #0021ff, 58px 44px #000aff, 59px 45px #0d00ff, 59px 46px #2400ff, 59px 47px #3b00ff, 59px 48px #5200ff, 59px 49px #6900ff, 60px 50px #8000ff, 59px 51px #9600ff, 59px 52px #ad00ff, 59px 53px #c400ff, 59px 54px #db00ff, 59px 55px #f200ff, 58px 56px #ff00f5, 58px 57px #ff00de, 58px 58px #ff00c7, 57px 59px #ff00b0, 57px 60px #ff0099, 56px 61px #ff0082, 55px 62px #ff006b, 55px 63px #ff0054, 54px 64px #ff003d, 53px 65px #ff0026, 52px 66px #ff000f, 51px 67px #ff0800, 50px 68px #ff1f00, 49px 69px #ff3600, 48px 70px #ff4d00, 47px 71px #ff6300, 46px 72px #ff7a00, 45px 73px #ff9100, 43px 74px #ffa800, 42px 75px #ffbf00, 41px 76px #ffd600, 39px 77px #ffed00, 38px 78px #faff00, 36px 79px #e3ff00, 35px 80px #ccff00, 33px 81px #b5ff00, 32px 82px #9eff00, 30px 83px #87ff00, 28px 84px #70ff00, 27px 85px #59ff00, 25px 86px #42ff00, 23px 87px #2bff00, 22px 88px #14ff00, 20px 89px #00ff03, 18px 90px #00ff1a, 16px 91px #00ff30, 14px 92px #00ff47, 13px 93px #00ff5e, 11px 94px #00ff75, 9px 95px #00ff8c, 7px 96px #00ffa3, 5px 97px #00ffba, 3px 98px #00ffd1, 1px 99px #00ffe8, 7px 100px cyan, -1px 101px #00e8ff, -3px 102px #00d1ff, -5px 103px #00baff, -7px 104px #00a3ff, -9px 105px #008cff, -11px 106px #0075ff, -13px 107px #005eff, -14px 108px #0047ff, -16px 109px #0030ff, -18px 110px #001aff, -20px 111px #0003ff, -22px 112px #1400ff, -23px 113px #2b00ff, -25px 114px #4200ff, -27px 115px #5900ff, -28px 116px #7000ff, -30px 117px #8700ff, -32px 118px #9e00ff, -33px 119px #b500ff, -35px 120px #cc00ff, -36px 121px #e300ff, -38px 122px #fa00ff, -39px 123px #ff00ed, -41px 124px #ff00d6, -42px 125px #ff00bf, -43px 126px #ff00a8, -45px 127px #ff0091, -46px 128px #ff007a, -47px 129px #ff0063, -48px 130px #ff004d, -49px 131px #ff0036, -50px 132px #ff001f, -51px 133px #ff0008, -52px 134px #ff0f00, -53px 135px #ff2600, -54px 136px #ff3d00, -55px 137px #ff5400, -55px 138px #ff6b00, -56px 139px #ff8200, -57px 140px #ff9900, -57px 141px #ffb000, -58px 142px #ffc700, -58px 143px #ffde00, -58px 144px #fff500, -59px 145px #f2ff00, -59px 146px #dbff00, -59px 147px #c4ff00, -59px 148px #adff00, -59px 149px #96ff00, -60px 150px #80ff00, -59px 151px #69ff00, -59px 152px #52ff00, -59px 153px #3bff00, -59px 154px #24ff00, -59px 155px #0dff00, -58px 156px #00ff0a, -58px 157px #00ff21, -58px 158px #00ff38, -57px 159px #00ff4f, -57px 160px #00ff66, -56px 161px #00ff7d, -55px 162px #00ff94, -55px 163px #00ffab, -54px 164px #00ffc2, -53px 165px #00ffd9, -52px 166px #00fff0, -51px 167px #00f7ff, -50px 168px #00e0ff, -49px 169px #00c9ff, -48px 170px #00b3ff, -47px 171px #009cff, -46px 172px #0085ff, -45px 173px #006eff, -43px 174px #0057ff, -42px 175px #0040ff, -41px 176px #0029ff, -39px 177px #0012ff, -38px 178px #0500ff, -36px 179px #1c00ff, -35px 180px #3300ff, -33px 181px #4a00ff, -32px 182px #6100ff, -30px 183px #7800ff, -28px 184px #8f00ff, -27px 185px #a600ff, -25px 186px #bd00ff, -23px 187px #d400ff, -22px 188px #eb00ff, -20px 189px #ff00fc, -18px 190px #ff00e6, -16px 191px #ff00cf, -14px 192px #ff00b8, -13px 193px #ff00a1, -11px 194px #ff008a, -9px 195px #ff0073, -7px 196px #ff005c, -5px 197px #ff0045, -3px 198px #ff002e, -1px 199px #ff0017, -1px 200px red, 1px 201px #ff1700, 3px 202px #ff2e00, 5px 203px orangered, 7px 204px #ff5c00, 9px 205px #ff7300, 11px 206px #ff8a00, 13px 207px #ffa100, 14px 208px #ffb800, 16px 209px #ffcf00, 18px 210px #ffe600, 20px 211px #fffc00, 22px 212px #ebff00, 23px 213px #d4ff00, 25px 214px #bdff00, 27px 215px #a6ff00, 28px 216px #8fff00, 30px 217px #78ff00, 32px 218px #61ff00, 33px 219px #4aff00, 35px 220px #33ff00, 36px 221px #1cff00, 38px 222px #05ff00, 39px 223px #00ff12, 41px 224px #00ff29, 42px 225px #00ff40, 43px 226px #00ff57, 45px 227px #00ff6e, 46px 228px #00ff85, 47px 229px #00ff9c, 48px 230px #00ffb3, 49px 231px #00ffc9, 50px 232px #00ffe0, 51px 233px #00fff7, 52px 234px #00f0ff, 53px 235px #00d9ff, 54px 236px #00c2ff, 55px 237px #00abff, 55px 238px #0094ff, 56px 239px #007dff, 57px 240px #0066ff, 57px 241px #004fff, 58px 242px #0038ff, 58px 243px #0021ff, 58px 244px #000aff, 59px 245px #0d00ff, 59px 246px #2400ff, 59px 247px #3b00ff, 59px 248px #5200ff, 59px 249px #6900ff, 60px 250px #8000ff, 59px 251px #9600ff, 59px 252px #ad00ff, 59px 253px #c400ff, 59px 254px #db00ff, 59px 255px #f200ff, 58px 256px #ff00f5, 58px 257px #ff00de, 58px 258px #ff00c7, 57px 259px #ff00b0, 57px 260px #ff0099, 56px 261px #ff0082, 55px 262px #ff006b, 55px 263px #ff0054, 54px 264px #ff003d, 53px 265px #ff0026, 52px 266px #ff000f, 51px 267px #ff0800, 50px 268px #ff1f00, 49px 269px #ff3600, 48px 270px #ff4d00, 47px 271px #ff6300, 46px 272px #ff7a00, 45px 273px #ff9100, 43px 274px #ffa800, 42px 275px #ffbf00, 41px 276px #ffd600, 39px 277px #ffed00, 38px 278px #faff00, 36px 279px #e3ff00, 35px 280px #ccff00, 33px 281px #b5ff00, 32px 282px #9eff00, 30px 283px #87ff00, 28px 284px #70ff00, 27px 285px #59ff00, 25px 286px #42ff00, 23px 287px #2bff00, 22px 288px #14ff00, 20px 289px #00ff03, 18px 290px #00ff1a, 16px 291px #00ff30, 14px 292px #00ff47, 13px 293px #00ff5e, 11px 294px #00ff75, 9px 295px #00ff8c, 7px 296px #00ffa3, 5px 297px #00ffba, 3px 298px #00ffd1, 1px 299px #00ffe8, 2px 300px cyan, -1px 301px #00e8ff, -3px 302px #00d1ff, -5px 303px #00baff, -7px 304px #00a3ff, -9px 305px #008cff, -11px 306px #0075ff, -13px 307px #005eff, -14px 308px #0047ff, -16px 309px #0030ff, -18px 310px #001aff, -20px 311px #0003ff, -22px 312px #1400ff, -23px 313px #2b00ff, -25px 314px #4200ff, -27px 315px #5900ff, -28px 316px #7000ff, -30px 317px #8700ff, -32px 318px #9e00ff, -33px 319px #b500ff, -35px 320px #cc00ff, -36px 321px #e300ff, -38px 322px #fa00ff, -39px 323px #ff00ed, -41px 324px #ff00d6, -42px 325px #ff00bf, -43px 326px #ff00a8, -45px 327px #ff0091, -46px 328px #ff007a, -47px 329px #ff0063, -48px 330px #ff004d, -49px 331px #ff0036, -50px 332px #ff001f, -51px 333px #ff0008, -52px 334px #ff0f00, -53px 335px #ff2600, -54px 336px #ff3d00, -55px 337px #ff5400, -55px 338px #ff6b00, -56px 339px #ff8200, -57px 340px #ff9900, -57px 341px #ffb000, -58px 342px #ffc700, -58px 343px #ffde00, -58px 344px #fff500, -59px 345px #f2ff00, -59px 346px #dbff00, -59px 347px #c4ff00, -59px 348px #adff00, -59px 349px #96ff00, -60px 350px #80ff00, -59px 351px #69ff00, -59px 352px #52ff00, -59px 353px #3bff00, -59px 354px #24ff00, -59px 355px #0dff00, -58px 356px #00ff0a, -58px 357px #00ff21, -58px 358px #00ff38, -57px 359px #00ff4f, -57px 360px #00ff66, -56px 361px #00ff7d, -55px 362px #00ff94, -55px 363px #00ffab, -54px 364px #00ffc2, -53px 365px #00ffd9, -52px 366px #00fff0, -51px 367px #00f7ff, -50px 368px #00e0ff, -49px 369px #00c9ff, -48px 370px #00b3ff, -47px 371px #009cff, -46px 372px #0085ff, -45px 373px #006eff, -43px 374px #0057ff, -42px 375px #0040ff, -41px 376px #0029ff, -39px 377px #0012ff, -38px 378px #0500ff, -36px 379px #1c00ff, -35px 380px #3300ff, -33px 381px #4a00ff, -32px 382px #6100ff, -30px 383px #7800ff, -28px 384px #8f00ff, -27px 385px #a600ff, -25px 386px #bd00ff, -23px 387px #d400ff, -22px 388px #eb00ff, -20px 389px #ff00fc, -18px 390px #ff00e6, -16px 391px #ff00cf, -14px 392px #ff00b8, -13px 393px #ff00a1, -11px 394px #ff008a, -9px 395px #ff0073, -7px 396px #ff005c, -5px 397px #ff0045, -3px 398px #ff002e, -1px 399px #ff0017`
);
Code language: JavaScript (javascript)
A rainbow text effect being rendered within the dev tools console.

Notable mention: ASCII art

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:

console.log(
  `%c
                  ,d"=≥,.,qOp,
                 ,7'  ''²$(  )
                ,7'      '?q$7'
             ..,$$,.
   ,.  .,,--***²""²***--,,.  .,
 ²   ,p²''              ''²q,   ²
:  ,7'                      '7,  :
 ' $      ,db,      ,db,      $ '
  '$      ²$$²      ²$$²      $'    Using Reddit at work? Work for Reddit.
  '$                          $'      https://www.redditinc.com/careers
   '$.     .,        ,.     .$'
    'b,     '²«»«»«»²'     ,d'
     '²?bn,,          ,,nd?²'
       ,7$ ''²²²²²²²²'' $7,
     ,² ²$              $² ²,
     $  :$              $:  $
     $   $              $   $
     'b  q:            :p  d'
      '²«?$.          .$?»²'
         'b            d'
       ,²²'?,.      .,?'²²,
      ²==--≥²²==--==²²≤--==²
`,
  `font-family: monospace`
);
Code language: JavaScript (javascript)

Note the usage of font-family: monospace to make sure the characters have a consistent width.

If you’re looking for some tools to generate ASCII art, ASCII Art Archive has a bunch of tools to generate ASCII art, including image to ASCII and text to ASCII.

Notable mention: Emojis

Emojis work well in the console. Sometimes, that may be all you need!

A console message that says, 'Thanks for stopping by' with some sparkle emojis.

Go forth and delight!

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!

  1. Note that 3D transforms don’t apply to SVGs in any context, including the as a background image in the console. ↩︎
  2. foreignObject works!! But only if xmlns="http://www.w3.org/1999/xhtml" is set on the outermost element. There are also restrictions, which is further discussed in the examples section. ↩︎
  3. Note that CSS variable usage cannot be inherited from the scope outside of the SVG (i.e. from your webpage). ↩︎
  4. @media (prefers-color-scheme: dark) is particularly useful if you don’t want to set a background color but want text to be readable since the console’s background color depends on the user’s setting. ↩︎
  5. Viewport units for elements inside of the SVG. I was surprised to! They seem to use the SVG’s size as the viewport upon initial inspection. ↩︎
  6. Note that setTimeout and requestAnimationFrame can only run before the console message is posted and not afterwards. ↩︎

Learn Chrome DevTools Deeply

Frontend Masters logo

We have a great Introduction to DevTools course from Jon Kuperman, so popular that it's now in its 3rd edition! You'll learn how to profile your web applications, step through code with a debugger, and audit page performance to remove jank.

6 responses to “console.delight”

  1. pp says:
    January 18, 2024 at 5:06 pm

    Usefull console.table than more that.

    Reply
  2. John says:
    January 19, 2024 at 3:20 am

    Interesting, ty
    ps: I couldn’t get any JS to work, (including your date example, it just displays the hardcoded date and not one set with JS)

    Reply
    • Andy Fuchs says:
      February 26, 2024 at 4:55 am

      You can get JS to work, but you must make sure it is evaluated at runtime like this (otherwise it is static):

      const timestamp = () => {};
timestamp.toString = function() {
    const date = new Date();
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');
    const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
    return `${hours}:${minutes}:${seconds}:${milliseconds}`;
};

// log with a mark, color, and timestamp
// e.g.: 
// 08:35:01:232 [LOG]  This log message shows a red tag and timestamp
log = console.log.bind(console, `%s %c[LOG] `, timestamp, `color:#FC0`);

// then:
log('Hello World');

      I use it everywhere in my code to better identify classes/modules, etc… in the console.
      You can also use it in node to show timestamps in files.

      Reply
  3. Roger says:
    February 11, 2024 at 4:13 am

    Well well well…

    It is not because you CAN that you SHOULD…

    I cannot think of a use case where this feature would be useful.

    Prove me wrong.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Did you know?

Frontend Masters Donates to open source projects. $313,806 contributed to date.