123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="dachshund">
  <div class="disclaimer"> ⚠️There's a very fast color animation when you hover the dog, be careful if you are suffer from seizures</div>
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 704.85 282.27"><defs>
</defs>
<title>This Is Dog</title>

<path class="light" d="M691.11,21.65H691a14,14,0,0,0-3.6.51A14.17,14.17,0,0,0,672,28.38c-7.38.63-16.69,1.27-24,1.27a48.14,48.14,0,0,1-8.3-.48c-.66-.55-1.8-1.7-2.68-2.58-4.33-4.37-10.92-11-21.92-13.81A12,12,0,0,0,596.64,1.94a11.66,11.66,0,0,0-2.46-.25A12,12,0,0,0,582.25,12.4c-11.61,1.3-18.63,4-23.29,8.91-.4.42-.8.85-1.19,1.3a34.06,34.06,0,0,0-4.69,2c-13.51,7.22-25,26.77-36.08,61.5-1.71,5.34-.82,11.84,2.74,19.74C492.9,125.19,437.93,137,373,137c-7.88,0-16-.18-24-.53-99-4.29-113.38-12-151.74-32.48l-6.48-3.46c-4.17-2.21-8.53-4.92-13.15-7.79C160.83,82.28,140,69.31,110,69.31a111.94,111.94,0,0,0-14.58,1C79,72.46,67.11,79,58.81,86c-3.66-5-7.65-11.3-10-17.3C46.57,63,45.12,51.55,44.89,43a10.91,10.91,0,0,0,4.37,1h.26a11,11,0,0,0,3.88-.71c5.7-2.13,11.47-8.68,10.75-18.06A11,11,0,0,0,58,16.11a23.75,23.75,0,0,0-1.41-3l0-.1a11,11,0,0,0-18.85-.43c-.38,0-.77-.07-1.15-.07A13.52,13.52,0,0,0,28.83,15,10.95,10.95,0,0,0,18.66,8.18l-.63,0A11,11,0,0,0,4,10.58L1.66,13.37v1.09C-.66,19.65-1,26.7,3.75,33.76a10.94,10.94,0,0,0,9.09,4.85h.08a10.57,10.57,0,0,0,3.47,1.32A78.42,78.42,0,0,0,15.3,53.76c.16,21,7.64,42.94,22.25,65.4a72.64,72.64,0,0,0,7,51.22c5.89,10.84,3.11,18.81-4.08,29.72-9.3,14.13-6.13,27.37-5.43,29.8.41,1.49,4.43,16.19,8.14,27.14a45,45,0,0,1,1.93,9.28c.39,3,.76,5.88,2.18,8.65a13.42,13.42,0,0,0,12.42,7.3c3.5,0,8.24-.07,13.27-.14,5.42-.08,11-.16,15.42-.16,6.45,0,11.42-5.54,13.48-11a19,19,0,0,0,.39-12.45l1.16,0c4.91-.06,10-.13,13.56-.13,6.58,0,11-5.5,12.72-10.2a17.57,17.57,0,0,0-5.29-19.75,20,20,0,0,0-12.23-4.85c0-.66,0-1.36,0-2.12a39.56,39.56,0,0,0,7.17-7.53,36.26,36.26,0,0,0,4.67-8.91,374.68,374.68,0,0,0,47.73,29.16c35.58,18.31,92,40.14,158.86,40.14,3.2,0,6.43-.05,9.62-.14h.17c105-3.29,160.87-31.13,180.72-43.52,1.1,5.63.71,17.51.57,21.83-.09,2.44-.15,4.56-.14,6.17,0,9.74,7.27,15.56,14.26,15.56,3.54,0,9.55-.08,15.92-.16,6.9-.08,14-.17,18.53-.17,6.48,0,11.47-5.57,13.54-11.09a19.17,19.17,0,0,0,.82-11.2l9.35-.12c5.44-.08,11.06-.15,15-.15,6.3,0,11.12-5.32,13.1-10.59,2.77-7.36.65-15.28-5.51-20.67a21.14,21.14,0,0,0-13.94-5.17c.1-4.62.35-11.63.93-22.19,0-.52.06-1,.08-1.52,0,0,.18-3.21.25-4.28,6.37-8.05,8.48-15.27,10.34-23.1,2.25-9.45,2.23-18.72,2.22-28.54,0-12.88,0-26.19,5.05-42a5.17,5.17,0,0,1,2.2-.51c2.39-.18,4.14-.27,6-.36,4.47-.22,9.09-.45,22.16-2S688.16,80.46,694,64.73a74.54,74.54,0,0,0,3.67-15.13c3.58-3.33,7.26-8.24,7.19-14.31A13.78,13.78,0,0,0,691.11,21.65Zm-129.85,213c.16-1.82.35-3.62.55-4.84l0-.15a28.73,28.73,0,0,1,2-8c.37,1.84.77,3.68,1.19,5.5l0,.18a61.93,61.93,0,0,1,1.3,7.51l0,.22a25.34,25.34,0,0,0-4.82-.44Z"/>

<g id="thisisdog">
		<path id="back-legs" class="secondary-color"  d="M594.27,181.55s-.23,3.43-.51,8.38c-.67,11.9-1.68,32.61-.71,35.73.67,2.11,10.13-4.11,17,1.9s1.23,13.73-1,13.73c-7.73,0-21.52.29-28,.29-5.5,0-3.68-6.3-6.26-16.6a196.93,196.93,0,0,1-3.53-20c-.4-3.09-.62-5.13-.62-5.13M84.16,225.33c.61,2.78,1.26,5.65,1.92,8.28,2.33,9.3.68,15,5.65,15,5.83,0,18.29-.26,25.27-.26,2,0,7.08-7,.87-12.4s-14.75.19-15.35-1.72c-.52-1.67-.42-9.67-.12-18.43"/>
		<path id="tail" class="secondary-color"  d="M51.79,122.2c-40.23-55-23.7-91.79-20-96.33,4.33-5.38,8.12-4.3,4.79,2.79-3.5,7.27-1.16,33.27,2.93,43.68,6.08,15.59,21,31.59,21,31.59ZM19,30a1,1,0,0,0,.34-1.37c-3.16-5.23-.19-8.59,0-8.74A1,1,0,0,0,18,18.44l-.1.11c0,.05-4.18,4.56-.21,11.14A1,1,0,0,0,19,30Zm-5.57-1.59a1,1,0,0,0,.27-1.39h0c-3.44-5.07-.62-8.58-.5-8.73h0A1,1,0,0,0,11.66,17S7.72,21.81,12,28.17a1,1,0,0,0,.83.44A1,1,0,0,0,13.42,28.44Zm33.79.63s4.34-4.42.6-11.13a1,1,0,0,0-1.37-.38,1,1,0,0,0-.38,1.38c3,5.34-.12,8.59-.26,8.73a1,1,0,0,0,0,1.41,1.06,1.06,0,0,0,.71.3A1,1,0,0,0,47.21,29.07Zm2.67,4.86c1.65-.6,4.67-3.05,4.29-8a1,1,0,1,0-2,.14c.35,4.69-2.83,6-3,6a1,1,0,0,0-.56,1.29,1,1,0,0,0,.9.64A1.16,1.16,0,0,0,49.88,33.93Z"/>
		<path id="body" class="main-color"  d="M635.41,38.25c-6-3-12.06-16.77-31.15-16.77H599.9l4.92-8.34a2,2,0,1,0-3.29-2.27,1.75,1.75,0,0,0-.16.27l-5.19,8.79V13.69a2,2,0,0,0-4,0v8c-13.14.58-22,2.37-26,6.54-5.3,5.54-10,13.87-13.53,24.21s-7.11,33-7.11,33c-4.85,39.92-90.76,65.63-197,61-106.7-4.63-118.4-13.68-162.47-37.1C163.65,97.43,139.8,74.51,96.69,80.21c-32.81,4.34-46.51,28.9-49.35,41a62.79,62.79,0,0,0,6,44.4c8.8,16.19,2.88,28.78-4.51,40s-4.16,21.57-4.16,21.57,4.21,15.51,8,26.68c3.91,11.64.94,18.42,7,18.42,7.16,0,20.12-.31,28.69-.31,2.45,0,8.7-8.58,1.08-15.25s-18.13.24-18.87-2.11c-1.53-4.9-4.08-22.57-4.08-22.57s34.32-9.36,44.73-23.94c5.11-7.16,5.7-15.22,4.8-22,.2.18,93.61,82.14,224.06,78,130.6-4.1,183.11-47.09,183.11-47.09a32.19,32.19,0,0,1,4.9,5c5.53,5.53,3.38,29.29,3.47,36.5,0,2.35,1.41,5.62,4.26,5.62,7.28,0,25.73-.32,34.45-.32,2.48,0,8.84-8.72,1.09-15.5s-16.66-2.07-19.17-2.14c-.67,0-1.59-.25-1.31-6.92.12-3.06.54-8.14,1-11,1.16-7.38,2.33-15.31,15-23.64,31.21-20.61,34.36-29.19,37.69-43.19,4.78-20.15-2.11-42,7.62-71.74.64-2,3.23-6.48,10.83-7,8.54-.64,9.67-.18,27.72-2.31,11.76-1.39,30.07-8.9,33.87-19.15,4.06-11,4.06-24.48,4.06-24.48S643.14,42.11,635.41,38.25Z"/>
		<path id="dark-shadow" class="dark-shadow"  d="M594.17,182.93h0c-.09,1.44-.24,3.93-.42,7,0,.95-.11,2-.17,3v0c-.15,2.72-21.6,15.08-21.83,15.22q-.06-.54-.15-1l-.68-5.25h0C582.28,194.16,589.45,188.2,594.17,182.93ZM102.26,216.41a101,101,0,0,1-18,9.4l1,4.69s16.75-5.72,16.9-8.45.1-5.67.1-5.67Z"/>
		<path id="decoration" class="light-decoration" d="M107,100.36c-2.65,1.28-5.2,1.46-5.71.42s1.23-2.94,3.87-4.22,5.2-1.46,5.71-.42S109.67,99.08,107,100.36ZM92.89,92c-.26-1.14-2.78-1.54-5.65-.91s-5,2.07-4.74,3.21,2.78,1.54,5.65.91S93.14,93.12,92.89,92Zm-6.81,13.84c-.43-1.08-3-1.07-5.72,0s-4.58,2.87-4.14,4,3,1.06,5.72,0S86.52,106.93,86.08,105.82Z"/>
		<path id="ear-nose" class="secondary-color" d="M576.93,28.83c2.92-.31,5.55-.48,7.47-.58a1.84,1.84,0,0,1,1.76,2.68c-2.09,4.23-5.67,12.42-5.44,18.39.16,4.09,1.73,10.86,5.94,19.32a42.87,42.87,0,0,1,4.16,26.06c-1.83,10.23-29.34,34-42.15,32.23-5.53-.77-25.4-27.57-22.15-37.72,7.9-24.72,18.46-48.89,31.27-55.73C562.71,30.85,570.53,29.51,576.93,28.83Zm117.92,6.54a3.74,3.74,0,0,0-7.18-1.44,4.15,4.15,0,0,0-7.8,2,4.28,4.28,0,0,0,.54,2c.78,1.78,2.76,4.19,7.56,6.65C688,44.57,694.9,39.93,694.85,35.37Z"/>
		<path id="eyes" class="secondary-darker" d="M613,47.19a1.53,1.53,0,0,1-1.45-1.12c-.37-1.41-.77-4.91,3.4-7a6.69,6.69,0,0,1,8.66,2.67A1.5,1.5,0,1,1,621,43.25l-.06-.11a3.7,3.7,0,0,0-4.68-1.38c-1.64.82-2.23,2-1.82,3.54a1.49,1.49,0,0,1-1.07,1.82h0A1.21,1.21,0,0,1,613,47.19Z"/>
		<path id="mouth-nosereflection" class="light" d="M646.49,74.63c-5-.24-10.27-8.18-10.27-8.18l17.59,2.4S651.46,74.93,646.49,74.63Zm36.25-38.11a2,2,0,0,1,2.84-1.85,2,2,0,1,0-2.66,2.66A1.91,1.91,0,0,1,682.74,36.52Z"/>
		<path id="light-shadow" class="light-shadow" d="M385.38,259c90.37-12.91,129.25-42.13,129.25-42.13-9.53-12.07-7.2-26.46-2.38-37.71-5.59,24.23,11,37.9,11,37.9s-52.51,43-183.11,47.09ZM122.72,191.48s-.56-17.89-12.2-26.11c3.52,6.67,4.72,14.47,5.55,20.72ZM593.86,73.3c-4.22-8.46-8.41-17.51-9.08-21.55-1-6.18-.21-15.59,1.88-19.81.33-.67-.25-.32-1.08.17-2.11,4.44-5.07,11.74-4.86,17.19.16,4.09,1.73,10.86,5.94,19.32a42.87,42.87,0,0,1,4.16,26.06c-1.83,10.25-29.34,34-42.15,32.25a2.94,2.94,0,0,1-.58-.16c2.72,3,5.14,5,6.58,5.16,12.81,1.8,40.32-22,42.15-32.25C598.27,91.59,598.08,81.76,593.86,73.3Z"/>
		<path id="text" class="light" d="M172.37,122.06c2.51.41,7.08,1.46,13.74,3.16l3.85,1.06a38,38,0,0,1,5.7,1.86,2.3,2.3,0,0,1,1.35,1.41,4,4,0,0,1,.06,1.76,2.79,2.79,0,0,1-2.27,1.88,9.53,9.53,0,0,1-4.71-.32l-2.42-.68-2.25,8.1q-1.68,6.06-8.29,27.36l-7.58,24.4a58.87,58.87,0,0,1-2.43,7.18,4.24,4.24,0,0,1-1.86,2,3.3,3.3,0,0,1-2.1.51c-.48-.13-1.09-.81-1.84-2L160,197.8,168.65,165q8.55-32.43,8.51-33.85c-.18-.92-1.55-1.73-4.12-2.45a20.26,20.26,0,0,0-2.45-.57l-.6-.18c-2.57-.72-3.57-2.08-3-4.1.3-1.08.75-1.7,1.34-1.87A14.38,14.38,0,0,1,172.37,122.06Zm53.91,20.53a2.29,2.29,0,0,1,2.24-.65,5,5,0,0,1,1,.49,8.27,8.27,0,0,1,2.81,2.45c.49.7.49,2,0,3.91S230,156.43,226.84,166q-4.34,12.74-7.91,22.73-1.05,3-3,8.1c-1.27,3.42-2.12,5.75-2.57,7q-4.91,13.08-6.11,15.67c-.8,1.72-1.63,2.73-2.47,3a6.1,6.1,0,0,1-4-.19,3.46,3.46,0,0,1-2.1-1.64q-.36-1.14,2-9.1l2.3-8-3.43-1q-3.44-1-4.11-.69c-.18.08-.39.46-.62,1.11a39.81,39.81,0,0,0-1.5,6.39,52.68,52.68,0,0,1-1.43,6.18,3,3,0,0,1-1.54,1.8,2.85,2.85,0,0,1-2.33.28,16.65,16.65,0,0,1-1.52-.77,7.07,7.07,0,0,1-2.9-2.49q-2.21-4.14,7.42-37,5.46-18.69,6.82-24.68Q200,144,201.1,140.81q1.28-3.57,3-4.39a3.63,3.63,0,0,1,2.89,0,5.56,5.56,0,0,1,3.06,2.66q1.23,2.55-7.73,34.4-1.17,4.26-3.8,14.38l-1,4.1,4.36,1.22c2.88.89,4.53,1.29,4.93,1.21q.36-.09,3.76-9.59,1.26-3.48,5.43-15.81,3-9,6.46-18.67c1.74-4.56,3-7.13,3.82-7.73Zm14.53,10.34a3.7,3.7,0,0,1,2.84-.28,8.65,8.65,0,0,1,3.81,1.94,3.2,3.2,0,0,1,1.28,2.33,22.78,22.78,0,0,1-.75,5.57q-.78,3.6-2.68,10.89-4.11,16-7.58,32.09-3.91,18.18-3.86,21.54a17.94,17.94,0,0,1-.08,2.43,5.63,5.63,0,0,1-1.53,2.46,4.83,4.83,0,0,1-4.81,1.63,8,8,0,0,1-2.06-.77c-1.41-.68-1.85-2.83-1.33-6.47s2.91-15.31,7.15-35q5.92-27.45,7.18-32.52C239.23,155.39,240,153.45,240.81,152.93Zm27.28,4.3a8.22,8.22,0,0,1,5.43-.08,13.2,13.2,0,0,1,7,5.31,15,15,0,0,1,2.88,9.13,45.44,45.44,0,0,1-2.07,12.34,6.69,6.69,0,0,1-.9,2.26,3.19,3.19,0,0,1-3.33.69,3.5,3.5,0,0,1-1.44-.78c-.74-.78-.76-2.86-.08-6.26a26,26,0,0,0,.46-9.46c-.45-2.7-1.26-4.21-2.44-4.56-.81-.24-1.73.17-2.76,1.22a9,9,0,0,0-2.18,4.16q-3.07,10.35,2.51,32.53a33.45,33.45,0,0,1,1.2,8.15,95.31,95.31,0,0,1-1.09,11.8A48.67,48.67,0,0,1,270.2,229q-3.21,10.92-10.59,13.93-2,.84-6-.33a15,15,0,0,1-6-3.22,11.69,11.69,0,0,1-3.79-6.87q-.44-3.63,1.57-10.82l.56-1.88a19.55,19.55,0,0,1,2.26-5.63,2.41,2.41,0,0,1,2.83-.66,2.43,2.43,0,0,1,1.94,2.19q.17,1.65-1.11,6.81-2.49,10.06.93,11.07c.95.29,2-.26,3.13-1.65a17.43,17.43,0,0,0,2.84-5.58l.26-.88a29.14,29.14,0,0,0,1.31-9.94,71.41,71.41,0,0,0-2.51-13.22Q255.1,192,254.22,186.5a34.36,34.36,0,0,1,1.12-14.78,20.56,20.56,0,0,1,1-2.58,26.31,26.31,0,0,1,5.13-7.43,18,18,0,0,1,6.62-4.46Zm37.9,2.46a4.26,4.26,0,0,1,3.17-.84,10,10,0,0,1,4.68,1.49,3.77,3.77,0,0,1,1.88,2.42,25.78,25.78,0,0,1,.17,6.45q-.21,4.24-1,12.84-1.74,18.93-2.71,37.78-1.19,21.35-.47,25.1a21.42,21.42,0,0,1,.36,2.77,6.56,6.56,0,0,1-1.29,3.06,5.52,5.52,0,0,1-5.15,2.74,9.12,9.12,0,0,1-2.47-.5q-2.6-.78-2.7-7.09t1.68-41q1.68-32.21,2.16-38.19T306,159.69ZM329.52,161a8.82,8.82,0,0,1,5.62-1.77,14.31,14.31,0,0,1,8.95,3.35,16.42,16.42,0,0,1,5.84,8.6,49.56,49.56,0,0,1,1.66,13.5,6.84,6.84,0,0,1-.24,2.62,3.45,3.45,0,0,1-3.24,1.76,4.08,4.08,0,0,1-1.75-.37c-1-.58-1.68-2.74-2-6.49a28.33,28.33,0,0,0-2.47-10q-2-4-3.95-4c-.92,0-1.75.72-2.5,2.13a9.8,9.8,0,0,0-1,5q0,11.73,12.74,33.08a36.7,36.7,0,0,1,3.77,8.11,104,104,0,0,1,2.54,12.62A50,50,0,0,1,354,235q0,12.38-6.69,17.77c-1.24,1-3.37,1.51-6.37,1.52a16.17,16.17,0,0,1-7.25-1.47,12.7,12.7,0,0,1-6.08-6q-1.59-3.63-1.73-11.75V233c0-3.34.21-5.53.61-6.57a3.08,3.08,0,0,1,4.2-1.18,3,3,0,0,1,1.23,1.29c.46,1.13.78,3.6,1,7.44q.54,11.24,4.42,11.23c1.08,0,2-.9,2.74-2.7a18.92,18.92,0,0,0,1.23-6.69v-1A31.59,31.59,0,0,0,339.6,224a77.32,77.32,0,0,0-6.73-13q-6-9.85-8.68-15.35A37.32,37.32,0,0,1,320.77,180a21.42,21.42,0,0,1,.24-3,28.28,28.28,0,0,1,3-9.32,19.31,19.31,0,0,1,5.5-6.64Zm50.67,2.25a8.4,8.4,0,0,1,4.18-1.42,16.65,16.65,0,0,1,5.93,1,17,17,0,0,1,8.6,5.93q3.27,4.23,5.57,12.72a82.12,82.12,0,0,1,2.31,17.1,90.65,90.65,0,0,1-.34,16.47q-1.49,13.14-4.22,19.18-1.67,3.66-7.18,7.57t-9.33,4.13h-.54a3.73,3.73,0,0,1-3.6-2.1q-1.68-3.18-2.32-15.24c-.1-1.74-.2-5.08-.31-10q-.51-26.25-.58-29.72-.63-20.79,0-23.1a4.55,4.55,0,0,1,1.82-2.52Zm12.44,8.61a4.53,4.53,0,0,0-3.36-1.68,1.46,1.46,0,0,0-1.06.5q-.42.45.91,25.77,2,38.58,2.69,38.87a.49.49,0,0,0,.33.09c.73,0,1.65-.81,2.77-2.32a17.1,17.1,0,0,0,2.53-4.82q3.13-10.65,3.12-25.66c0-.94,0-2.32-.11-4.14a71.93,71.93,0,0,0-2.6-16.37q-2.13-7.35-5.23-10.24Zm32.08-11.07a18.45,18.45,0,0,1,5.57-1.61q9.81-1.17,15.74,9.75,4.59,8.67,6.35,23.23,3.81,33.5-6.89,43.06a15.37,15.37,0,0,1-8.53,4,9.13,9.13,0,0,1-1.57.08c-1.41-.11-3.28-1.05-5.63-2.84a23.81,23.81,0,0,1-5.56-5.77q-8-11.92-10.36-31.24a73.06,73.06,0,0,1-.56-8.22q-.07-12,2.72-19.3,3.24-8.81,8.71-11.14Zm12,6.43a6.8,6.8,0,0,0-4.13-1.29,6.2,6.2,0,0,0-1.36.06c-1,.12-2,.9-3.07,2.36q-5.49,7.36-2.83,29.68l.14,1.14q2.43,18.75,7.53,26.64a14.51,14.51,0,0,0,3.43,3.73,5,5,0,0,0,3.24,1.24q2-.24,4.41-6.45a45.56,45.56,0,0,0,3.05-12.58q.66-6.88-.83-19.18a82.58,82.58,0,0,0-2.15-11.79,38.85,38.85,0,0,0-3.46-8.29,16.67,16.67,0,0,0-4-5.27Zm24.44-13.11a10.76,10.76,0,0,1,4.59-1.91,8,8,0,0,1,3.83,0,11.71,11.71,0,0,1,5.22,3.35,10.33,10.33,0,0,1,2.85,5.1c.44,2.29-.07,3.57-1.51,3.84s-2.62-.52-3.9-2.33a14.92,14.92,0,0,0-2.72-3,3.13,3.13,0,0,0-2.35-1c-.54.1-1,1.06-1.5,2.86a26.67,26.67,0,0,0-.78,6.17q-.27,8.28,2.9,24.86A127.35,127.35,0,0,0,472.25,210a25.64,25.64,0,0,0,2.82,5.67q1.47,2.1,2.55,1.89c.73-.14,1.39-.95,2-2.44a20.88,20.88,0,0,0,1.33-5.49,11.46,11.46,0,0,0,.13-3.2c-.19-1-1.13-1.37-2.81-1a4.42,4.42,0,0,1-2.91-.28,2.6,2.6,0,0,1-1.43-1.87,3.66,3.66,0,0,1,0-1.32,1.64,1.64,0,0,1,1-1.31,41.31,41.31,0,0,1,4.48-1.24l1.71-.33c4.21-.8,6.88-.51,8,.89q1.33,1.62,5,15c.2.71.39,1.54.57,2.5a3.64,3.64,0,0,1-.54,3,4.83,4.83,0,0,1-3.24,1.65,4.54,4.54,0,0,1-3-.16,2.92,2.92,0,0,1-1.35-2.17c-.23-1.21-.65-1.75-1.25-1.63s-1.06.64-1.74,1.64q-2.6,3.5-5.39,4-4.32.84-8.29-2.75t-6.62-10.65q-2.43-6.44-5-19.6-4-20.82-2.93-27.47a14.54,14.54,0,0,1,2-5.1,13,13,0,0,1,3.78-4.1Z"/>
</g></svg>

</div>

<div class="fontcredit"><a href="https://stephaniewalter.design/"> Illustration and code by Stéphanie W.</a> - <a href="https://weblog.redisdead.net/main/post/2018/07/11/Quatre-polices-a-telecharger-Divodurum-Lucilinburhuc-Argentoratum-et-Nantios">Font Argentoratum by Laurence V.</a></div>
            
          
!
            
              /* color variants */
.main-color {
  --color-theme-1: #fa87d7;
  --color-theme-2: #ee75ee;
  --color-theme-3: #fa939a;
  --color-theme-4: #fbc0a8;
}

.secondary-color {
  --color-theme-1: #942988;
  --color-theme-2: #a65ff5;
  --color-theme-3: #a68cc5;
  --color-theme-4: #f977b1;
}

.dark-shadow {
  --color-theme-1: #781f6d;
  --color-theme-2: #8b4ce9;
  --color-theme-3: #a68cc5;
  --color-theme-4: #de6297;
}

.light-decoration {
  --color-theme-1: #fcb3e6;
  --color-theme-2: #f4a8f4;
  --color-theme-3: #fcbbbf;
  --color-theme-4: #fbd7c8;
}

.secondary-darker {
  --color-theme-1: #8c197f;
  --color-theme-2: #9354d9;
  --color-theme-3: #74628a;
  --color-theme-4: #d46596;
}

.light-shadow {
  --color-theme-1: #e271c4;
  --color-theme-2: #cb5feb;
  --color-theme-3: #e77b85;
  --color-theme-4: #f2b49a;
}

.light {
  fill: #f6f6f6;
}

.main-color,
.secondary-color,
.dark-shadow,
.light-decoration,
.secondary-darker,
.light-shadow {
  animation-name: colorloop;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.dachshund:hover {
  path {
    animation-duration: 0.2s;
    animation-delay: 2s;
  }
}

/* color animation */

@keyframes colorloop {
  0% {
    fill: var(--color-theme-1);
  }
  25% {
    fill: var(--color-theme-2);
  }
  50% {
    fill: var(--color-theme-3);
  }
  75% {
    fill: var(--color-theme-4);
  }
  100% {
    fill: var(--color-theme-1);
  }
}

/* Utilitise*/

.dachshund {
  max-width: 800px;
  width: 800px;
  margin: 3em;
  padding: 0;
}

.fontcredit {
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 1em;
  font-size: 1vmax;
  background: #fff;
  a {
    color: #942988;
    padding: 1em;
    text-decoration: none;
  }
}

.disclaimer {
  position: fixed;
  right: 0;
  left:0;
  top: 0;
  padding: 0.8em;
  font-size: 1.3vmax;
  background: rgba(0,0,0,0.8);
  color: #fff;
  text-align: center;
  
}

body {
  font-family: 'Lato', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background: repeat #f6f6f6
    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNjIuOCAxNjIuOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYyLjggMTYyLjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7b3BhY2l0eTowLjE1O2ZpbGw6I0ZBOTM5QTt9Cgkuc3Qxe29wYWNpdHk6MC4xNTtmaWxsOiNGQkMwQTg7fQoJLnN0MntvcGFjaXR5OjAuMTU7ZmlsbDojQTY4Q0M1O30KCS5zdDN7b3BhY2l0eTowLjE1O2ZpbGw6I0VFNzVFRTt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03OS4yLDcuOGMtMiwyLTIsNS4zLDAsNy4zczUuMywyLDcuMywwbDI3LjcsMjcuN2MtMiwyLTIsNS4zLDAsNy4zczUuMywyLDcuMywwYzEuNC0xLjQsMS45LTMuNSwxLjItNS4zCgljMi43LDAuOSw1LjYtMC41LDYuNi0zLjJzLTAuNS01LjYtMy4yLTYuNmMtMS45LTAuNy0zLjktMC4yLTUuMywxLjJMOTMsOC42YzItMiwyLTUuMywwLTcuM3MtNS4zLTItNy4zLDBjLTEuNCwxLjQtMS45LDMuNS0xLjIsNS40CglDODIuNyw2LDgwLjYsNi40LDc5LjIsNy44eiIvPgo8cG9seWdvbiBjbGFzcz0ic3QxIiBwb2ludHM9Ijg3LjcsOS44IDg3LjcsOS44IDg3LjcsOS44ICIvPgo8cGF0aCBjbGFzcz0ic3QyIiBkPSJNMTIyLjcsODUuOWMwLjktMi43LTAuNS01LjYtMy4yLTYuNnMtNS42LDAuNS02LjYsMy4yYy0wLjcsMS45LTAuMiwzLjksMS4yLDUuM2wtMjcuNywyNy43Yy0yLTItNS4zLTItNy4zLDAKCXMtMiw1LjMsMCw3LjNjMS40LDEuNCwzLjUsMS45LDUuMywxLjJjLTAuOSwyLjcsMC41LDUuNiwzLjEsNi42YzIuNywwLjksNS42LTAuNSw2LjYtMy4xYzAuNy0xLjksMC4yLTQtMS4yLTUuNGwyNy43LTI3LjcKCWMyLDIsNS4zLDIsNy4zLDBzMi01LjMsMC03LjNDMTI2LjYsODUuNywxMjQuNSw4NS4yLDEyMi43LDg1LjlMMTIyLjcsODUuOXoiLz4KPHBhdGggY2xhc3M9InN0MSIgZD0iTTExOS41LDg5TDExOS41LDg5TDExOS41LDg5eiIvPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMi4zLDcuOGMtMiwyLTIsNS4zLDAsNy4zczUuMywyLDcuMywwbDI3LjcsMjcuN2MtMiwyLTIsNS4zLDAsNy4zczUuMywyLDcuMywwYzEuNC0xLjQsMS45LTMuNSwxLjItNS4zCgljMi43LDAuOSw1LjYtMC41LDYuNS0zLjJzLTAuNS01LjYtMy4yLTYuNWMtMS45LTAuNi0zLjktMC4yLTUuMywxLjJMMTYuMSw4LjZjMi0yLDItNS4zLDAtNy4zcy01LjMtMi03LjMsMAoJQzcuNCwyLjcsNi45LDQuOCw3LjYsNi42QzUuOCw2LDMuNyw2LjQsMi4zLDcuOHoiLz4KPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMC45LDkuOCAxMC45LDkuOCAxMC45LDkuOCAiLz4KPHBhdGggY2xhc3M9InN0MyIgZD0iTTQ1LjgsODUuOWMwLjktMi43LTAuNS01LjYtMy4yLTYuNmMtMi43LTAuOS01LjYsMC41LTYuNiwzLjJjLTAuNywxLjktMC4yLDMuOSwxLjIsNS4zTDkuNSwxMTUuNQoJYy0yLTItNS4yLTItNy4zLTAuMXMtMiw1LjItMC4xLDcuM2MxLjQsMS40LDMuNSwxLjksNS40LDEuMmMtMC45LDIuNywwLjUsNS42LDMuMSw2LjZzNS42LTAuNSw2LjYtMy4xYzAuNy0xLjksMC4yLTMuOS0xLjItNS4zCglsMjcuNy0yNy43YzIsMiw1LjMsMiw3LjMsMHMyLTUuMywwLTcuM0M0OS43LDg1LjcsNDcuNyw4NS4yLDQ1LjgsODUuOUw0NS44LDg1Ljl6Ii8+CjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik00Mi43LDg5TDQyLjcsODlMNDIuNyw4OXoiLz4KPC9zdmc+Cg==);
  background-size: 10vmax;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console