Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--=================================================-->
<!--Pen by Margus Lillemägi | codepen.io/VisualAngle/-->
<!--=================================================-->

<!--
__  ___ __ ___   __ _ ___ 
\ \/ / '_ ` _ \ / _` / __|
 >  <| | | | | | (_| \__ \
/_/\_\_| |_| |_|\__,_|___/
                          
-->

<div id="container">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin slice" viewBox="0 0 1920 1080" class="svg">
  <defs>
    <style type="text/css">
<![CDATA[
      @import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');
      .bg {fill: #4285f4}
      .footprint{fill:#4285f4}
      .pink{fill:#ffafd4}
      .red{fill:#900f10}
      .white{fill:#fff}
      .black{fill:#000}
      .stroke{stroke:#000;stroke-width:1}
      .txt{fill:#f0f7ff;font-family:'Luckiest Guy', cursive;font-size:60px;text-transform:uppercase;}
      .hidden{opacity:0}
      svg{width:100%;padding-bottom: 55.55%;height:1px;overflow: visible;visibility:hidden;}
 ]]>
    </style>
  </defs>
  <script xlink:href="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" type="text/javascript"></script>
  <script type="text/javascript">
<![CDATA[
      document.addEventListener("DOMContentLoaded", function(event) {
        window.onload = function() {
          var xmlns = "http://www.w3.org/2000/svg",
              xlinkns = "http://www.w3.org/1999/xlink",
              one = document.getElementById("one"),
              two = document.getElementById("two"),
              three = document.getElementById("three"),
              four = document.getElementById("four"),
              five = document.getElementById("five"),
              six = document.getElementById("six"),
              look = document.getElementById("look"),
              look2 = document.getElementById("look2"),
              snow = document.getElementById("snow"),
              snow2 = document.getElementById("snow2");         

          var mainTl = new TimelineMax({repeat:-1});
          
              TweenMax.set("svg", {visibility: "visible"});
              TweenMax.globalTimeScale(6);
              TweenMax.lagSmoothing(500, 33);
              TweenMax.set([one, two, three, four, five, six, look, look2], {autoAlpha:0});
              TweenMax.set(look, {autoAlpha:0, attr:{    dx:"0,-32,-32,-32,-20,-29,-36,-40,-30,-30,0,-32,0,-40,-32,-40,-32,-28,-33,0,-30,0"}});
              TweenMax.set(look2, {autoAlpha:0, attr:{ dx:"0,-35,-35,-35,0,-47,-35,-35,-34,0,-35,0"}})
          
          function getSantaTl(){
              var santaTl = new TimelineMax({repeat:-1});
                  santaTl.set(three,{autoAlpha:1})
                    .set(three,{autoAlpha:0},"+=1")
                    .set(two,{autoAlpha:1})
                    .set(two,{autoAlpha:0},"+=1")
                    .set(one,{autoAlpha:1})
                    .set(one,{autoAlpha:0},"+=2")
                    .set(two,{autoAlpha:1})
                    .set(two,{autoAlpha:0},"+=1")
                    .set(three,{autoAlpha:1})
                    .set(three,{autoAlpha:0},"+=1")
                    .set(four,{autoAlpha:1})
                    .set(four,{autoAlpha:0},"+=1")
                    .set(five,{autoAlpha:1})
                    .set(five,{autoAlpha:0},"+=1")
                    .set(six,{autoAlpha:1})
                    .add("christmas")
                    .set(six,{autoAlpha:0},"+=13")
                    .set(five,{autoAlpha:1})
                    .set(five,{autoAlpha:0},"+=1")
                    .set(four,{autoAlpha:1})
                    .add("christmasout")
                    .set(four,{autoAlpha:0},"+=1")
                    .set(three,{autoAlpha:1})
                    .set(three,{autoAlpha:0},"+=1")
                    .set(two,{autoAlpha:1})
                    .set(two,{autoAlpha:0},"+=1")
                    .set(one,{autoAlpha:1})
                    .set(one,{autoAlpha:0},"+=2")
                    .set(two,{autoAlpha:1})
                    .set(two,{autoAlpha:0},"+=1")
                    .set(three,{autoAlpha:1})
                    .set(three,{autoAlpha:0},"+=1")
                    .set(one,{autoAlpha:1})
                    .set(one,{autoAlpha:0},"+=2")
                    .set(three,{autoAlpha:1})
                    .set(three,{autoAlpha:0},"+=1")
                    .set(four,{autoAlpha:1})
                    .set(four,{autoAlpha:0},"+=1")
                    .set(five,{autoAlpha:1})
                    .set(five,{autoAlpha:0},"+=1")
                    .set(six,{autoAlpha:1})
                    .add("busy")
                    .set(six,{autoAlpha:0},"+=13")
                    .set(five,{autoAlpha:1})
                    .set(five,{autoAlpha:0},"+=1")
                    .set(four,{autoAlpha:1})
                    .add("busyout")
                    .set(four,{autoAlpha:0},"+=1")
                    .set(three,{autoAlpha:1})
                    .set(three,{autoAlpha:0},"+=1")
                    .set(two,{autoAlpha:1})
                    .set(two,{autoAlpha:0},"+=1")
                    .set(one,{autoAlpha:1})
                    .set(one,{autoAlpha:0},"+=2")
                    .set(two,{autoAlpha:1})
                    .set(two,{autoAlpha:0},"+=1")
                    .to(look, 8,{autoAlpha:1, x:75, attr:{dx:"0,2,2,2,2,2,2,2,2,0,0,2,0,0,2,2,2,2,2,0,0,0"}, ease:Power3.easeOut},"christmas")
                    .to(look, 6,{autoAlpha:0,attr:{dx:"20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20", dy:"100,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20,20,-20",  rotate:"-20,20,-20,20,-20,20,-20,20,-20,0,0,20,0,0,-20,20,-20,20,-20,20,0,-20"}, ease:Sine.easeOut},"christmasout")
                    .to(look2, 8,{autoAlpha:1, x:150, attr:{dx:"0,2,2,2,0,0,2,2,2,0,0,0"}, ease:Power3.easeOut},"busy")
                    .to(look2, 6,{autoAlpha:0, attr:{dx:"20,20,20,20,20,20,20,20,20,20,20,20", dy:"100,-20,20,-20,20,-20,20,-20,20,-20,20,-20", rotate:"-20,20,-20,20,0,0,-20,20,-20,20,0,-20"}, ease:Sine.easeOut},"busyout");
            
          return santaTl;      
          }
          
          
          function getSnowTl(){
               var snowTl = new TimelineMax;
               TweenMax.set(snow, {autoAlpha:0});
      
                  snowTl.set(snow, {autoAlpha:1})
                        .staggerTo("#snow circle", 54, {attr:{cy:365}, ease:Sine.easeIn, force3D:true, repeat:-1}, 3)
                        .set(snow, {autoAlpha:0});
          return snowTl;    
          }
          
          function getSnow2Tl(){
               var snow2Tl = new TimelineMax;
               TweenMax.set(snow2, {autoAlpha:0});
      
                  snow2Tl.set(snow2, {autoAlpha:1})
                        .staggerTo("#snow2 circle", 54, {attr:{cy:500}, ease:Sine.easeIn, force3D:true, repeat:-1}, 3)
                        .set(snow2, {autoAlpha:0});
          return snow2Tl;    
          }
          
          
          
          function init(){  
            mainTl.add(getSantaTl(),0).add(getSnowTl(),-54).add(getSnow2Tl(),-54);      
          }
           init();
          
       };
    });
  ]]>
  </script>
  <path d="M0 0h1920v1080H0z" class="bg"/>
   <path d="M0 840h1920v240H0z" fill="#f0f7ff"/>
  
  <svg viewBox="0 0 960 540">
  <path d="M0 0h1152v326H0z" class="bg"/>
    
    <svg viewBox="80 -32 630 420">
  <path fill="#f0f7ff" d="M-.91 327L1160 328v-70s-182-76-553-24C123 278 97.4 265-5.5 214l-.87 111z"/>
  
  <g class="footprint" transform="translate(-5 15)" opacity=".3">
    <ellipse cx="194" cy="295" ry="22.6" rx="93.3"/>
    <path d="M403 288c-1 4-27 5-38 11-17 7-36-3-37-7 1-4 17-8 40-8 17 0 34 0 35 4z"/>
    <path id="path8440-4" d="M482 266c-1 4-27 5-38 11-17 7-36-3-37-7 1-4 17-8 40-8 17 0 34 0 35 4z"/>
    <path id="path8440-2" d="M559 275c-1 4-27 5-38 11-17 7-36-3-37-7 1-4 17-8 40-8 17 0 34 0 35 4z"/>
    <path id="path8440-3" d="M617 253c-1 3-24 4-34 9-15 7-32-2-33-6 1-3 15-7 36-7 15 0 30 0 31 4z"/>
    <path id="path8440-3-7" d="M681 257c-1 2-21 3-30 7-13 7-28-1-29-5 1-2 13-6 32-6 13 0 26 0 27 4z"/>
    <path id="path8440-3-3" d="M714 237c-1 2-18 3-26 7-12 5-25-2-25-5 0-2 11-5 27-5 12 0 23 0 24 3z"/>
    <path id="path8440-3-3-4" d="M763 242c-1 1-15 2-22 6-11 4-22-2-22-5 0-1 10-4 23-4 11 0 20 0 21 3z"/>
    <path id="path8440-3-3-9" d="M778 224c-1 1-12 2-18 5-8 3-17-1-17-4 0-1 7-3 18-3 9 0 16 0 17 2z"/>
    <path id="path8440-3-3-48" d="M819 221c-1 1-12 2-18 5-8 3-17-1-17-4 0-1 7-3 18-3 9 0 16 0 17 2z"/>
    <path id="path8440-0" d="M327 278c-1 4-27 5-38 11-17 7-36-3-37-7 1-4 17-8 40-8 17 0 34 0 35 4z"/>
  </g>
    </svg>    
    
    
     <!--Snow-->
   <g id="snow" fill="#f0f7ff" fill-opacity="1">
          <circle cx="20" cy="-61" r="2"/>
          <circle cx="320" cy="-48" r="3"/>
          <circle cx="100" cy="-20" r="2"/>
          <circle cx="550" cy="-58" r="3"/>
          <circle cx="395" cy="-54" r="2"/>
          <circle cx="800" cy="-60" r="3"/>
          <circle cx="585" cy="-45" r="2"/>
          <circle cx="403" cy="-40" r="3"/>
          <circle cx="920" cy="-54" r="2"/>
          <circle cx="90" cy="-68" r="3"/>
          <circle cx="448" cy="-43" r="2"/>
          <circle cx="523" cy="-52" r="3"/>
          <circle cx="185" cy="-50" r="2"/>
          <circle cx="658" cy="-52" r="3"/>
          <circle cx="250" cy="-65" r="2"/>
          <circle cx="772" cy="-61" r="3"/>
          <circle cx="435" cy="-48" r="2"/>
          <circle cx="870" cy="-43" r="3"/>         
          <circle cx="824" cy="-68" r="2"/>       
  </g>
    
  <svg viewBox="248 -75 630 630">
    <g id="one" class="stroke hidden">
      <path d="M165.284 425.93c-3 3 6 10 15 10 41 1 56-2 66-4 6-1 7 1 9-2 2-2-2-5-2-5l-36 4-35-1s-16-3-17-2z" class="black"/>
      <path d="M205.284 406.93c0-2 0-19-2-22-3-5 40-9 41-4 2 10 3 16 8 28 3 5-5 1 3 14 3 6-23 8-38 8-21 0-53 1-53-8 0-22 21-21 41-16z" class="black"/>
      <path d="M224.284 378.93s6-1 9 0c-1 20 9 27 8 32 0 3-6 4-12 7-5 2-1-8 3-10-3-9-7-18-8-29z" class="white"/>
      <path d="M193 385c-6-7-12-16-3-48 2-9-11-27-8-36 8-19 51-23 65-9 13 13 1 33 5 47 2 13 10 33 3 40-6 6-55 13-62 6z" class="red"/>
      <path d="M248.8 446.2c-3 3 4 10 15 10 40 0 63-4 70-7 5-2 1-7 1-7l-34 7-35-1s-16-3-17-2z" class="black"/>
      <path d="M285.8 423.2c4 2 3-3-1-5s4-11 1-25c-1-5 38-6 39-2-1 10 0 15 5 27 3 4-4 7 0 8 7 2 7 8 7 16 0 2-21 9-36 9-21 0-53 1-53-8 0-22 24-23 38-20z" class="black"/>
      <path d="M302.8 392.2s6-1 9 0c-1 20 9 27 8 32 0 3-6 4-12 7-5 2-1-8 3-10-3-9-7-18-8-29z" class="white"/>
      <path d="M332 387c8-8 7-14 12-24 4-8 14-16 10-29-2-8-5-17-8-26-8-19-59-24-65-9-6 16-2 36-5 47-2 6-12 26-4 41 6 11 52 8 60 0z" class="red"/>
      <path d="M340 179c-10-17-28-51-35-57-18-16-75-11-87-1-4 4-21 20-44 58m-7 73c-10 5-25 28-25 40 0 22 18 38 39 50 16 9 48 19 82 19 42 1 111-19 111-73 0-15-11-28-24-32" class="red"/>
      <path d="M364 267c17 36-28 75-88 80-6-21-2-18-2-36-3-4-6-9-2-16h-24c7 16 0 19-4 33-2 6 0 13 1 20-33-3-83-16-99-70-5 6-9 11-9 20 0 43 66 70 123 70 75 0 137-42 116-89-6-11-12-12-12-12z" class="white"/>
      <path d="M170 255c16 28 54 56 78 56 0 0 19-1 25-1 2 0 5 0 7-1 18 0 27 15 41 15 10-1 6-18-19-24 18-11 40-30 48-44-7 7-45 40-78 40l-24 1c-30 0-48-12-78-42z"/>
      <path d="M261 291c-10 0-17 1-17 12s7 13 17 13 17-1 17-13c0-11-7-12-17-12zm0 5c6 0 11-1 11 7 0 7-5 7-11 7s-11 0-11-7c0-8 5-7 11-7z" class="white"/>
      <path d="M400 249c34 59-50 61-50 7-1-42 0-59-13-82l-32-52c51-1 95 95 95 127zm-280-3c-31.1 43 62 62 47 6 1-43-10-46 3-67l48-63c-58 0-84 91-98 124z" class="red"/>
      <path d="M331 174l9 5c23 13 22 55 10 77-7 12-42 42-90 42-54 0-79-23-93-46-12-21-8-58 7-73 3-3 9-7 13-8" class="red"/>
      <path d="M265 109c-28-1-51 5-62 24-15 25 18 61 52 61-14 52-17 70-8 103 1 3 27 3 27 0 8-28-4-56 0-103 35 0 59-39 46-62-9-15-21-23-55-23zm-95 159c0 16-14 29-30 29-19 0-32-12-32-29s14-30 31-30c17-1 31 12 31 30z" class="white"/>
      <path d="M132 276c0 7 8 8 11 7m16-3l-6-2m-37-8s3 0 6 4m7-16c-15-4-41.1-7-44-1-7.1 12 25 12 31 13-13 13-45.8 8-35.6 25 5.9 10 27.6-10 37.6-10-3 15-24 8-20.8 20 4.8 14 29.8-4 34.8-13 0 1 19 6 27-12 11 4 17 1 17-6 0-8-16-6-23-8-2-12-19-13-24-8zm283 16c0 17-14 30-31 30-20 0-33-12-33-30s15-31 32-31c18-1 32 12 32 31z" class="white"/>
      <path d="M388 291c-1 2-3 4-6 5m-21-8l4-7m57-35c11 13-26 14-24 20 8 14 39-1 35 15-2 6-17 4-27 4 0 12 28 0 25 12-11 17-30-3-36 0-6 4-10 3-13-1 0 0-17 8-21-8-6 5-14 8-17 2-4-7 5-15 16-17 1-8 6-11 21-14 16-2 31-23 41-13z" class="white"/>
      <path d="M261.974 108.037c21-2 40 18 43 42 2 24-15 47-34 50-23 4-42-17-45-39-3-27 14-49 36-53z" class="pink"/>
      <path d="M231.974 131.037c-2 0-5 7-8 15-9 7-12 19-11 19 11-5 3 13 1 18 12 1 9 12 6 30 15-6 11 8 12 26 12-26 17-5 14 19 12-20 18 0 20 11 7-2 8-32 21-9 7-4-3-31 12-19 5 4-10-23 8-20 5-10-13-19 6-16 1-12-18-29 1-22 2-16-10-19-1-24-3-12-10-18-10-18 3-8 0-10-2-14v14c-1 34-63 47-70 2 0-5-1-6 1-12z" class="white"/>
      <path d="M251.974 118.037c-7 0-13 7-13 15 0 9 8 17 27 17 15 0 27-4 27-17 0-8-6-15-13-15h-1c-5 0-12 5-12 20-1-15-9-20-14-20z" class="white"/>
      <path d="M260.974 141.037a3.61 6.9 0 0 1-4 7 3.61 6.9 0 0 1-4-7 3.61 6.9 0 0 1 4-7 3.61 6.9 0 0 1 4 7zm18 1a3.61 6.9 0 0 1-4 7 3.61 6.9 0 0 1-4-7 3.61 6.9 0 0 1 4-7 3.61 6.9 0 0 1 4 7z"/>
      <path d="M237.974 142.037c6-4 15 2 22 8l-2 10c-15 14-29-5-26-17m62 3c-6-4-14-2-22 3l3 10c12 14 28-5 26-17m-27 39a7.03 9.49 0 0 1-7 9 7.03 9.49 0 0 1-7-9 7.03 9.49 0 0 1 7-10 7.03 9.49 0 0 1 7 10z" class="pink"/>
      <path d="M269.974 181.037a2.43 3.92 0 0 1-3 4 2.43 3.92 0 0 1-2-4 2.43 3.92 0 0 1 2-4 2.43 3.92 0 0 1 3 4z"/>
      <path d="M273.974 68.137c-5 12.7-27 7.6-27 1.6-16-36.3 37-34.5 27-1.6z" class="white"/>
      <path d="M230.974 109.037l65-3c1-8.8-20-35-23-39.8-7-8-19-11.3-26 1.1-2 3.8-17 28.1-16 41.7z" class="red"/>
      <path d="M305.974 115.037c0 7 4 17 1 24-1 2-3 2-4 2-10-34-63-21-75-3-4 7-6 1-6-3 0-6 1-10 1-19 0-20.3 83-32.8 83-1z" class="white"/>
      <path d="M257.974 160.037l17-1c12 11 24-3 26-18 12 13-8 23 5 19 0 17-31-1-9 13-11 10-19-13-18 7-13-14-14-2-22 2 3-13-2-2-11-2 16-19-9 0-13-6 15-12-13 1-11-20 17 17 0-5 12-15 1 15 10 32 24 21z" class="white"/>
      <path d="M274.974 156.037a9.39 9.39 0 0 1-9 9 9.39 9.39 0 0 1-9-9 9.39 9.39 0 0 1 9-9 9.39 9.39 0 0 1 9 9z" class="red"/>
    </g>
    <g id="two" class="stroke hidden">
      <path d="M165.476 426.382c-3 3 6 10 15 10 41 1 56-2 66-4 6-1 7 1 9-2 2-2-2-5-2-5l-36 4-35-1s-16-3-17-2z" class="black"/>
      <path d="M205.476 407.382c0-2 0-19-2-22-3-5 40-9 41-4 2 10 2 13 7 25 3 5-4 4 4 17 3 6-23 8-38 8-21 0-53 1-53-8 2-22 21-21 41-16z" class="black"/>
      <path d="M224.476 379.382s8-2 11-1c-1 20 7 28 6 33 0 3-6 4-12 7-5 2-1-8 3-10 0-10-7-18-8-29z" class="white"/>
      <path d="M193.192 385.453c-6-7-12-16-3-48 2-9-11-27-8-36 8-19 51-23 65-9 13 13 1 33 5 47 2 13 10 33 3 40-6 6-55 13-62 6z" class="red"/>
      <path d="M248.992 446.653c-3 3 4 10 15 10 40 0 63-4 70-7 5-2 1-7 1-7l-34 7-35-1s-16-3-17-2z" class="black"/>
      <path d="M285.992 423.653c4 2 3-3-1-5s4-11 1-25c-1-5 38-6 39-2-1 10-1 12 4 24 3 4-4 7 0 8 9 4 8 11 8 19 0 2-21 9-36 9-21 0-53 1-53-8 0-22 24-23 38-20z" class="black"/>
      <path d="M302.992 392.653s8-1 11 0c-3 21 7 27 6 32 0 3-6 4-12 7-5 2-1-8 3-10-3-9-7-18-8-29z" class="white"/>
      <path d="M332.192 387.453c8-8 7-14 12-24 4-8 14-16 10-29-2-8-5-17-8-26-8-19-59-24-65-9-6 16-2 36-5 47-2 6-12 26-4 41 6 11 52 8 60 0z" class="red"/>
      <path d="M340.192 179.453c-6-18-28-51-35-57-18-16-76-12-87-1-4 4-45 39-45 62m-6 69c-10 5-25 28-25 40 0 22 18 38 39 50 16 9 48 19 82 19 42 1 111-19 111-73 0-15-11-28-24-32" class="red"/>
      <path d="M364.192 267.453c17 36-27 70-88 80-6-21-2-18-2-36-3-4-6-9-2-16h-24c7 16 0 19-4 33-2 6 0 13 1 20-33-3-83-16-99-70-5 6-9 11-9 20 0 43 66 69 123 69 75 0 137-41 116-88-6-11-12-12-12-12z" class="white"/>
      <path d="M170.192 255.453c16 28 54 56 78 56 0 0 19-1 25-1 2 0 5 0 7-1 18 0 27 15 41 15 10-1 6-18-19-24 18-11 40-30 48-44-7 7-47 32-78 40l-24 1c-28-5-48-12-78-42z"/>
      <path d="M261.192 291.453c-10 0-17 1-17 12s7 13 17 13 17-1 17-13c0-11-7-12-17-12zm0 5c6 0 11-1 11 7 0 7-5 7-11 7s-11 0-11-7c0-8 5-7 11-7z" class="white"/>
      <path d="M399.192 249.453c34 57-49 60-49 7-1-42 2-56-11-79l-36-57c51-1 96 97 96 129zm-279-3c-31.1 43 62 62 47 6 1-43 0-47 6-70 5-11 45-64 45-64-62-1-85 95-98 128z" class="red"/>
      <path d="M334.192 174.453s-3-2 5 3c20 13 24 66 11 79-11 11-47 42-90 42s-82-28-93-46c-10-16-10-54 6-70l7-7" class="red"/>
      <path d="M267.192 106.453c-28-1-51 5-62 24-17 30 16 64 50 64-14 52-18 72-9 105 1 5 27 4 27 0 8-28-3-58 1-105 35 0 51-37 43-61-5-17-16-27-50-27zm-98 161c0 13-12 24-27 25-19 0-30-9-30-26-1-18 9-30 27-29 18 0 31 10 30 30z" class="white"/>
      <path d="M130.192 274.453c0 7 8 8 11 7m18-3l-8-1m-39-10s4 0 7 4m8-15c-18 0-40-7-42.9-1-5.6 13 17.9 13 27.9 12-5 15-41.1 11-32 27 8.5 11 30-15 35-8 5 8-20.6 8-17.8 19 3.8 12 26.8-5 34.8-13 0 1 21 1 27-14 10 1 14-1 14-7s-11-5-21-6c-2-12-17-9-25-9zm287 12c0 8-17 22-30 22-20 0-35-10-35-27 2-16 19-23 34-23 13-1 31 13 31 28z" class="white"/>
      <path d="M388.192 290.453c-1 2-2 5-5 6m-20-8l3-3m56-42c9 15-22 18-21 23 2 9 32-2 32 12 0 11-27 3-28 7-1 5 26 1 23 13-4 14-24-4-30-2-7 2-12 4-15 0-1-2-13 4-20-8-6 5-16 8-19 2-4-7 4-16 15-18 0-12 20-19 35-20 8 0 21-17 28-9z" class="white"/>
      <path d="M260 111.51c21-2 40 18 43 42 2 24-15 47-34 50-23 4-42-17-45-39-3-27 14-49 36-53z" class="pink"/>
      <path d="M230 134.51c-2 0-5 7-8 15-9 7-12 19-11 19 11-5 3 13 1 18 12 1 9 12 6 30 15-6 11 8 12 26 12-26 13-9 10 15 12-20 21-1 23 10 7-2 6-33 19-10 7-6-2-34 14-18 4 5-12-19 6-16 5-10-14-22 5-19 1-12-14-21 0-20 2-16-7-17 2-22-3-12-8-18-8-18 3-8 0-10-2-14v14c-1 34-63 47-70 2 0-5-1-6 1-12z" class="white"/>
      <g transform="translate(-2 3.51)">
        <path d="M254 117c-8-1-15 6-13 16s14 18 28 17c15 0 24-4 24-17 0-8-5-17-12-17-12 0-13 13-13 17-2-9-4-16-14-16z" class="white"/>
        <circle cx="259" cy="138" r="3.6"/>
        <circle cx="276" cy="139" r="3.6"/>
      </g>
      <path d="M236 145.51c7-6 17 1 23 8l2 9c-15 14-34-4-31-16m63-3c-6-4-14 6-22 11l2 8c12 14 28-5 26-17m-27 37c0 2-1 8-5 8-3 0-6-3-6-7 0-5 2-9 6-9s5 5 5 8z" class="pink"/>
      <path d="M269 182.51c0 5-5 5-5 0s5-4 5 0z" class="black"/>
      <path d="M272 71.61c-5 12.7-27 7.6-27 1.6-16-36.4 39-36.4 27-1.6z" class="white"/>
      <path d="M229 112.51l65-3c1-8.8-20-35-23-39.8-7-8-19-11.3-26 1.1 1 3.8-16 28.1-16 41.7z" class="red"/>
      <path d="M305 119.51c0 7 1 16 0 23-1 2-3 2-4 2-7-40-66-27-75-3-4 7-6 1-6-3 0-6 1-10 1-19 0-24 84-39.8 84 0z" class="white"/>
      <path d="M260 162.51h13c17 4 25-4 26-18 12 13-11 23 2 19 0 17-31-3-9 11-11 10-16-11-15 9-11-16-13-6-22 0 3-13-2-2-11-2 16-19-9 0-13-6 15-12-9 2-7-19 17 17-4-4 8-14-1 15 12 30 28 20z" class="white"/>
      <path d="M275 157.51c0 6-4 10-10 10-5 0-8-5-8-10 0-4 3-9 8-9 6 0 10 3 10 9z" class="red"/>
    </g>
    <g id="three" class="stroke hidden">
      <path d="M165.62 425.9c-3 3 6 10 15 10 41 1 56-2 66-4 6-1 7 1 9-2 2-2-2-5-2-5l-36 4-35-1s-16-3-17-2z" class="black"/>
      <path d="M205.62 406.9c0-2 0-19-2-22-3-5 40-9 41-4 2 10 3 16 8 28 3 5-5 1 3 14 3 6-23 8-38 8-21 0-53 1-53-8 0-22 21-21 41-16z" class="black"/>
      <path d="M224.62 378.9s6-1 9 0c-1 20 9 27 8 32 0 3-6 4-12 7-5 2-1-8 3-10-3-9-7-18-8-29z" class="white"/>
      <path d="M193.335 384.972c-6-7-12-16-3-48 2-9-11-27-8-36 8-19 51-23 65-9 13 13 1 33 5 47 2 13 7 32 3 40-6 6-55 13-62 6z" class="red"/>
      <path d="M249.135 446.172c-3 3 4 10 15 10 40 0 63-4 70-7 5-2 1-7 1-7l-34 7-35-1s-16-3-17-2z" class="black"/>
      <path d="M286.135 423.172c4 2 3-3-1-5s4-11 1-25c-1-5 38-6 39-2-1 10 0 15 5 27 3 4-4 7 0 8 7 2 7 8 7 16 0 2-21 9-36 9-21 0-53 1-53-8 0-22 24-23 38-20z" class="black"/>
      <path d="M303.135 392.172s6-1 9 0c-1 20 9 27 8 32 0 3-6 4-12 7-5 2-1-8 3-10-3-9-7-18-8-29z" class="white"/>
      <path d="M332.335 386.972c8-8 5-15 10-25 4-8 16-15 12-28-2-8-5-17-8-26-8-19-59-24-65-9-6 16-2 36-5 47-2 6-12 26-4 41 6 11 52 8 60 0z" class="red"/>
      <path d="M340.335 178.972c-10-17-28-51-35-57-18-16-75-11-87-1-4 4-21 20-44 58m-7 73c-10 5-25 28-25 40 0 22 18 38 39 50 16 9 48 19 82 19 42 1 111-19 111-73 0-15-11-28-24-32" class="red"/>
      <path d="M364.335 266.972c17 36-28 73-88 78-6-21-2-16-2-34-3-4-6-9-2-16h-24c7 16 0 17-4 31-2 6 0 13 1 20-33-3-83-14-99-68-5 6-9 11-9 20 0 43 66 68 123 68 75 0 137-40 116-87-6-11-12-12-12-12z" class="white"/>
      <path d="M170.335 254.972c16 28 54 56 78 56 0 0 19-1 25-1 2 0 5 0 7-1 18 0 27 15 41 15 10-1 6-18-19-24 18-11 40-30 48-44-7 7-45 40-78 40l-24 1c-28-5-48-12-78-42z"/>
      <path d="M261.335 290.972c-10 0-17 1-17 12s7 13 17 13 17-1 17-13c0-11-7-12-17-12zm0 5c6 0 11-1 11 7 0 7-5 7-11 7s-11 0-11-7c0-8 5-7 11-7z" class="white"/>
      <path d="M400.335 248.972c34 59-50 61-50 7-1-42 0-59-13-82l-32-52c38-14 95 95 95 127zm-280-3c-31.1 43 62 62 47 6-2-43-1-43 5-66 5-11 50-68 50-68-50-13-98 95-102 128z" class="red"/>
      <path d="M331.335 173.972l7 5c22 15 22 67 12 77-15 15-47 42-90 42-50 1-83-32-93-46-9-11-8-58 7-73 4-4 9-7 13-8" class="red"/>
      <path d="M265.335 106.972c-28-1-45-4-62 26-15 26 18 61 52 61-14 52-17 70-8 103 1 3 27 3 27 0 8-28-4-56 0-103 35 0 50-34 43-61-5-17-18-26-52-26zm-98 161c-1 14-10 24-26 26-19 0-33-9-33-26-2-19 10-39 33-33 18 5 26 15 26 33z" class="white"/>
      <path d="M129.335 273.972c1 8 12 8 15 7m16-2l-6-2m-44-11s4 0 7 4m13-17c-20 0-46.6-5-49.5 1-9.2 14 23.5 12 29.5 12-10 16-39 15-30.6 30 5.5 9 29.6-15 35.6-11 4 8-19.5 10-17 22 7 12 29-7 33-15-1 0 19 3 29-13 6 0 11-1 11-8 0-8-12-5-19-7-5-9-14-10-22-11zm283 13c0 17-14 30-31 30-18 0-32-13-32-30 0-13 16-26 29-26 16-1 34 7 34 26z" class="white"/>
      <path d="M385.335 288.972c-1 2-4 2-7 3m-15-7l2-4m55-40c12 13-20 19-19 24 2 8 31-3 31 13 0 7-17 5-27 5 5 9 24 3 21 15-5 15-24-7-29-3-6 5-17 3-19-3 0 1-12 3-15-7-7 7-17 7-18 4-4-6 2-15 13-17 3-5 12-16 21-16 27 0 30-21 41-15z" class="white"/>
      <path d="M260.033 110.83c21-2 40 18 43 42 2 24-15 47-34 50-23 4-42-17-45-39-3-27 14-49 36-53z" class="pink"/>
      <path d="M230.033 133.83c-2 0-5 7-8 15-9 7-12 19-11 19 11-5 3 13 1 18 12 1 9 12 6 30 15-6 11 8 12 26 12-26 17-5 14 19 12-20 18 0 20 11 7-2 8-32 21-9 7-4-3-31 12-19 5 4-10-23 8-20 5-10-13-19 6-16 1-12-18-29 1-22 2-16-10-19-1-24-3-12-10-18-10-18 3-8 0-10-2-14v14c-1 34-63 47-70 2 0-5-1-6 1-12z" class="white"/>
      <path d="M250.033 120.83c-7 0-13 7-13 15 0 9 8 18 27 18 15 0 27-5 27-18 0-8-6-15-13-15h-1c-5 0-13 6-13 21-1-15-8-21-13-21z" class="white"/>
      <path d="M248.033 142.83v2c4-1 7-1 11 2l1-2c-3-3-8-3-12-2zm31 0v2c-4-1-7-1-11 2l-1-2c4-2 8-3 12-2z"/>
      <path d="M235.033 145.83c7-4 17 2 24 7l-2 10c-15 14-30-5-27-17m61-2c-6-4-13 3-21 8l3 10c12 14 28-5 26-17m-27 37c0 5-3 8-7 8-3 0-6-4-6-8s2-9 6-9 7 4 7 9z" class="pink"/>
      <path d="M268.033 180.83c0 6-5 6-5 0 0-5 5-4 5 0z"/>
      <path d="M272.033 70.93c-5 12.7-27 7.6-27 1.6-16-36.3 37-34.5 27-1.6z" class="white"/>
      <path d="M229.033 111.83l61-4c1-8.6-16-34-19-38.8-7-8-19-11.3-26 1.1 1 2.4-14 26.7-16 41.7z" class="red"/>
      <path d="M304.033 117.83c0 7 3 16 0 23-1 2-2 3-3 3-9-35-62-25-73-5-4 7-6 2-6-2 0-6-6-7-2-19 0-20.1 84-31.8 84 0z" class="white"/>
      <path d="M256.033 162.83l17-1c14 7 24-4 26-18 12 13-8 23 5 19 0 17-31-1-9 13-11 10-19-13-18 7-13-14-14-2-22 2 3-13-2-2-11-2 16-19-9 0-13-6 15-12-13 1-11-20 17 17 0-5 12-15 0 15 8 33 24 21z" class="white"/>
      <path d="M273.033 157.83a9.61 10.1 0 0 1-10 10 9.61 10.1 0 0 1-8-10 9.61 10.1 0 0 1 8-9 9.61 10.1 0 0 1 10 9z" class="red"/>
    </g>
    <g id="four" class="stroke hidden">
      <path d="M165.924 425.28c-3 3 6 10 15 10 41 1 51 0 61-2 4-1 8-2 7-7l-31 2-35-1s-16-3-17-2z" class="black"/>
      <path d="M205.924 406.28c8 1-7-18-13-24-3-5 49-12 50-7-2 11 11 25 6 34 3 5-3 3 0 14 3 6-16 7-31 7-21 0-53 1-53-8 0-22 21-21 41-16z" class="black"/>
      <path d="M224.924 378.28s6-1 9 0c-7 24 9 27 8 32 0 3-6 4-12 7-5 2-1-8 3-10-5-8-15-14-8-29z" class="white"/>
      <path d="M182.64 380.35c-11-6-12-17 1-49 3-9-11-27-8-36 8-19 51-23 65-9 13 13 1 33 5 47 2 13 7 32 3 40-6 6-52 15-66 7z" class="red"/>
      <path d="M249.44 445.55c-3 3 4 10 15 10 40 0 63-4 70-7 5-2 1-7 1-7l-34 7-35-1s-16-3-17-2z" class="black"/>
      <path d="M286.44 422.55c4 2 0-3-4-5s-1-11-4-25c-1-5 41-7 42-3-1 10 7 25 7 25 3 4-4 10 0 11 7 2 8 9 8 17 0 2-19 8-34 8-21 0-53 1-53-8 0-22 18-18 38-20z" class="black"/>
      <path d="M303.44 391.55s6-1 9 0c-3 21 4 33 7 36 0 3-8 0-14 3-5 2-1-8 3-10-3-9-4-18-5-29z" class="white"/>
      <path d="M331.64 383.35c5-8 6-12 11-22 4-8 8-18 10-29 1-8-3-16-6-25-8-19-59-24-65-9-6 16-13 31-16 43-4 7-4 22-4 41 0 22 64 11 70 1z" class="red"/>
      <path d="M350.64 191.35c-9-16-27-51-43-61-20-13-75-11-87-1-4 4-40 44-63 82m10 40c-10 5-25 28-25 40 0 22 18 38 39 50 16 9 48 19 82 19 42 1 111-19 111-73 0-15-11-28-24-32" class="red"/>
      <path d="M364.64 266.35c25 40-31 78-95 81 0-12 12-35 3-53h-24c12 27-6 37-4 56-51-2-98-26-98-73-8 2-19 2-18 11 4 59 77 85 132 80 87-9 140-41 116-90-6-11-12-12-12-12z" class="white"/>
      <path d="M170.64 254.35c16 28 56 62 80 62 0 0 19-1 25-1 2 0 5 0 7-1 18 0 25 9 39 9 10-1 9-14-16-20 18-11 37-34 45-48-14 6-43 43-76 43l-24 1c-28-5-50-15-80-45z"/>
      <path d="M262.64 295.35c-10 0-17 1-17 12s7 13 17 13 17-1 17-13c0-11-7-12-17-12zm0 5c6 0 11-1 11 7 0 7-5 7-11 7s-11 0-11-7c0-8 5-7 11-7z" class="white"/>
      <path d="M397.64 247.35c34 59-47 62-47 8 7-46-6-73-13-82l-28-32c44-2 96 68 88 106zm-273-1c-31 43 58 61 43 5 11-41 11-45 26-59 17-16 38-62 38-62-75-1-105 80-107 116z" class="red"/>
      <path d="M342.64 181.35c11 22 15 60 7 74-9 12-45 54-88 54-50 1-90-39-94-58-3-14 12-51 24-57" class="red"/>
      <path d="M275.64 110.35c-28-1-45-1-62 29-15 26 18 61 52 61 3 53-23 85-18 108 1 3 27 3 27 0-6-31 17-36 10-108 40 8 62-30 52-61-5-18-29-29-61-29zm-110 157c-1 14-10 28-26 30-19 0-31-13-31-30-2-19 10-39 33-33 18 5 24 15 24 33z" class="white"/>
      <path d="M118.64 273.35c1 8 15 8 17 3m10 1l-5-5m-10-20c-20 0-56.8-14-60-2-7.2 20 38 6 36 14-7.5 14-40.8 10-34.9 29 4 12 32.9-14 37.9-7 3 9-17.7 20-12.1 30 7.1 12 21.1-12 26.1-22 0 0 17-3 22-17 3 3 15 8 17 0s-8-10-15-12c-5-9-9-12-17-13zm287 26c0 17-18 28-35 28-18 0-32-16-32-33 0-13 18-28 31-28 21-6 38 12 36 33z" class="white"/>
      <path d="M369.64 291.35l6-4m52-43c13 13-18 23-18 28 2 10 32-7 32 9 0 7-20 8-30 8 5 9 27 2 24 14-4 13-32-5-38-5-12 5-25 0-28-7-6 5-14 6-17 6-14-5 1-18 14-20 3-5 7-13 22-15 25-4 27-24 39-18z" class="white"/>
      <path d="M273.332 125.968c21-2 43 15 43 42 2 24-15 47-34 50-23 4-42-17-45-39-3-27 14-49 36-53z" class="pink"/>
      <path d="M243.332 148.968c-2 0-8 9-11 17-9 0-12 22-11 22 8 1 8 17 6 22 11-3 2 6 8 19 4 4 6 2 10 18 8-11 7 2 14 22 6-8 11-13 13-2 12 1 7-43 13-10 7-4 9-36 12-12 1 8 6-33 11-10 5-10-5-22 9-11 12-16-10-29 6-29 2-16-10-20-1-25-3-12-6-15-6-15 3-8 1-9-1-13l-3 15c-1 34-63 49-70 4 0-5-1-6 1-12z" class="white"/>
      <path d="M263.332 134.968c-7 1-13 8-13 16 0 9 8 19 27 19 15 0 24-6 24-19 0-8-4-17-11-19-10-2-13 17-13 21-3-14-6-19-14-18z" class="white"/>
      <path stroke-width=".812" d="M273.332 160.968c0 4-2 8-4 7-2 1-4-3-4-7s2-7 4-7 4 3 4 7zm19-1c0 4-2 8-4 7-3 1-4-4-4-7s1-7 4-7c2 0 4 3 4 7z"/>
      <path d="M248.332 160.968c5-6 21 7 23 9l-2 10c-15 14-29-7-26-19m62 3c-7-7-17 2-22 5l3 10c12 14 27-1 25-13m-26 33c0 5-3 7-6 7-4 0-8-2-8-7s3-10 7-10 7 5 7 10z" class="pink"/>
      <path d="M281.332 198.968a2.43 3.92 0 0 1-3 4 2.43 3.92 0 0 1-2-4 2.43 3.92 0 0 1 2-4 2.43 3.92 0 0 1 3 4z"/>
      <path d="M263.332 84.968c-5 12.7-27 7.6-27 1.6-16-36.3 37-34.5 27-1.6z" class="white"/>
      <path d="M242.332 126.968l59-2c1-8.7-28-34.9-31-39.7-7-8-19-11.3-26 1.1-1 3.2 2 22.4-2 40.6z" class="red"/>
      <path d="M320.332 134.968c0 7 0 8-2 17-1 7-3 6-5-1-10-25-54-18-76 4-2 8-6-11-6-15 0-6 2-4 5-10 17-29.5 79-31.7 84 5zm-51 43l17-1c10 11 21-2 24-16 12 13-10 24 3 20 0 17-29-3-7 11-11 10-17-14-16 6-13-14-13-5-21-1 3-14-2-1-11-1 8-16-10 1-13-5 7-10-12 0-10-21 12 14-3-1 9-11-2 16 13 32 25 19z" class="white"/>
      <path d="M287.332 175.968c0 5-4 9-9 9s-9-4-9-9 4-9 9-9 9 4 9 9z" class="red"/>
    </g>
    <g id="five" class="stroke hidden">
      <path d="M165.454 426.1c-3 3 6 9 15 9 9-1 69-1 68-8l-31 2-35-1s-16-3-17-2z" class="black"/>
      <path d="M199.454 405.1s-7-16-13-22c-3-5 55-12 56-7-5 15 6 26 5 31 3 6 2 9 1 17 3 6-16 7-31 7-21 0-53 1-53-8 0-22 15-23 35-18z" class="black"/>
      <path d="M216.454 382.1s6-1 9 0c-3 15 11 12 10 17 0 3-4 8-10 11-5 2-1-6 3-8-5-8-17-9-12-20z" class="white"/>
      <path d="M177.17 385.17c-12-5-13-21 6-53 5-8-11-27-8-36 8-19 51-23 65-9 13 13 1 33 5 47 2 13 4 44-5 43-24 3-49 14-63 8z" class="red"/>
      <path d="M248.97 446.37c-3 3 4 10 15 10 27 0 66-5 70-7 5-2 1-7 1-7l-34 7-35-1s-16-3-17-2z" class="black"/>
      <path d="M285.97 423.37c4 2 2-1-2-3s-1-12-6-27c-1-5 41-7 42-3-1 10 7 23 7 23 3 4-4 10 0 10 11 3 10 12 8 20 0 2-19 8-34 8-21 0-53 1-53-8-4-21 16-20 38-20z" class="black"/>
      <path d="M302.97 392.37s6-1 9 0c-3 21 4 33 7 36 0 3-8 0-14 3-5 2-1-8 3-10-3-9-4-18-5-29z" class="white"/>
      <path d="M314.17 389.17c16 3 24-15 29-26 4-8 7-19 9-30 1-8-3-16-6-25-8-19-59-24-65-9-6 16-22 33-25 45-4 7-7 30-2 46 7 24 43-4 60-1z" class="red"/>
      <path d="M365.17 213.17c-9-16-27-51-43-61-20-13-75-11-87-1-4 4-40 44-63 82m-3 10c-10 5-27 37-27 49 0 22 15 45 36 57 16 9 71 15 109 3 16-1 96-5 87-64 0-15-11-28-24-32" class="red"/>
      <path d="M373.17 266.17c-1 92-70 74-80 74-10 1-25 13-24 7 1-7 16-6 11-32h-24c0 22-10 25-15 40-53-1-100-27-95-77-8 2-19 2-18 11 8 85 107 90 124 80 12-7 21-12 28-12 11 0 100 20 109-80-6-11-16-11-16-11z" class="white"/>
      <path d="M169.17 252.17c9 52 63 77 87 77 0 0 19-1 25-1 2 0 7-1 7-1 18 0 20 3 32 11 14 13 23-9-9-22 18-11 45-36 48-52-18 14-46 47-79 47l-24 1c-29-3-64-20-87-60z"/>
      <path d="M268.17 306.17c-10 0-17 1-17 12s7 13 17 13 17-1 17-13c0-11-7-12-17-12zm0 5c6 0 11-1 11 7 0 7-5 7-11 7s-11 0-11-7c0-8 5-7 11-7z" class="white"/>
      <path d="M399.17 264.17c39 47-47 44-43 15 6-40-8-81-15-90l-31-38c35 0 100 73 89 113zm-272-14c-33.4 33 25 57 35 20 25-27 24-66 43-83 17-16 42-47 42-47-72-1-115 65-120 110z" class="red"/>
      <path d="M339.17 196.17c28 18 22 58 18 71-3 13-45 55-87 53-50 1-97-42-98-64-2-39 30-75 49-80" class="red"/>
      <path d="M299.17 122.17c-28-1-45-1-62 29-15 26 18 61 52 61 11 53-34 55-32 106 1 3 22 7 22 2 8-48 33-58 29-108 34 4 52-32 43-63-4-18-20-27-52-27z" class="white" stroke-linecap="round"/>
      <path d="M165.17 268.17c-1 14-10 28-26 30-19 0-31-13-31-30-2-19 10-36 33-30 18 5 24 12 24 30z" class="white"/>
      <path d="M115.17 274.17c1 8 15 8 17 3m9 5l-5-5m-17-27c-20.3 0-44.3-15-47.5-3-3.3 18 31.5 7 32.5 15 1 12-42.4 9-36.5 28 4 12 34.5-12 39.5-5 6 11-19.5 19-13.9 29 6.9 10 22.9-7 24.9-18 0 0 21 0 23-14 3 3 14 3 16-4s-6-10-16-14c-4-7-14-14-22-14zm303 34c0 17-18 28-35 28-18 0-32-16-32-33 0-13 18-28 31-28 21-6 38 12 36 33z" class="white"/>
      <path d="M370.17 296.17l8-4m52-43c14 11-19 21-19 26 3 11 34-5 34 11 0 7-22 7-32 7 2 10 25 3 23 15-4 13-30-5-36-5-12 5-27 0-30-7-6 5-12 7-15 5-9-3-1-16 11-18 3-4 2-12 23-17 31-7 30-22 41-17z" class="white"/>
      <path d="M310.732 135.768c6 2 32-3 26 36-8 43-19 54-35 53-19 0-36-20-39-42-3-27 10-50 48-47z" class="pink"/>
      <path d="M286.732 142.768c-7 1-11 8-11 16 0 9 6 19 25 19 15 0 24-6 24-19 0-8-5-16-12-18-12-1-13 17-11 21-3-14-7-20-15-19z" class="white"/>
      <path d="M297.732 168.768c0 4-2 8-4 7-2 1-4-3-4-7s2-7 4-7 4 3 4 7zm18 0c0 4-2 8-4 7-3 1-4-4-4-7s1-7 4-7c2 0 4 3 4 7z"/>
      <path d="M271.732 168.768c5-6 27 7 29 9l-4 7c-15 14-33-4-30-16m62 3c-7-7-17 2-22 5l3 10c12 14 25 6 23-6" class="pink"/>
      <path d="M266.732 156.768c-7 2-18 13-21 21 7 5-8 24-3 31 13-22-4 11 9 36 8-15 12 20 11 30 5 1 18-23 11 11 14-16 8-7 9 6 9-8 20-40 13-12 12 1 8-44 14-11 16-15 5-48 16-21 6-11-1-41 7-27 5-10-12-17 0-16-7-15 11-22 4-46-3 23-4 26-8 29-11 7-66 20-62-19z" class="white"/>
      <path d="M307.732 206.768c0 5-2 10-5 10-4 0-6-6-6-11s1-9 5-9 6 5 6 10z" class="pink"/>
      <path d="M304.732 206.768c0 2-1 5-3 5-1-1-2-3-2-5s1-5 2-5c2-1 3 2 3 5z"/>
      <path d="M271.732 98.868c-4 9.7-24 6.8-27 .5-15-31.1 38-36.3 27-.5z" class="white"/>
      <path d="M262.732 145.768c13-14 44-19 67-15 4-15-43-24.1-53-37.8-3-9.5-22-7.6-26 6-2 15 11 34.8 12 46.8z" class="red"/>
      <path d="M337.732 134.768c0 7 4 16 2 25-1 6-6 1-6-6-4-16-56-18-67 5 0 12-16-4-11-19 4-7 9-8 15-16 12-20.4 67-8.4 67 11zm-42 50l12-2c10 11 22 2 29-11 8 16-12 20-2 18 0 17-19-3-8 9-14 13-16-14-17 6-6-14-10 1-16 1 3-14-2-4-11-4 8-13-14 4-15-8-1-17-13 1-11-20 14 16 0 0 6-6 4 14 21 30 33 17z" class="white"/>
      <path d="M311.732 180.768c0 5-3 9-9 9-5 0-9-4-9-9s4-9 9-9 9 4 9 9z" class="red"/>
      <path d="M396 293c-5 4-10 3-15 1" class="pink"/>
    </g>
    <g id="six" class="stroke">
      <path d="M165.458 425.916c-3 3 0 8 15 9 10-1 78 2 68-11l-31 5-35-1s-16-3-17-2z" class="black"/>
      <path d="M195.458 405.916s0-7-19-20c-3-5 62-20 63-15-11 19 7 23 4 31 3 6 7 12 6 20-1 6-17 9-32 9-21 0-53 1-53-8 0-22 23-19 31-17z" class="black"/>
      <path d="M210.458 386.916c3 0 6-1 10 0 1 9 14 10 14 16 0 3-1 9-8 10-6 0-6-4-2-6-3-12-16-8-14-20z" class="white"/>
      <path d="M169.174 387.987c-13-3-16-23 3-55 5-8 0-28 3-37 8-19 51-23 65-9 13 13 1 33 5 47 2 13 6 32-1 36-17 8-38 26-75 18z" class="red"/>
      <path d="M248.974 446.187c-3 3 3 9 14 9 27 1 66-7 70-7 5-2 2-6 2-6l-28 2-41 4s-16-3-17-2z" class="black"/>
      <path d="M281.974 422.187c-4-3-6-20-9-29-1-5 43-10 44-6-3 13 10 26 10 26 3 4-1 10 3 11 6 2 7 11 5 19 0 2-23 0-29 3-22 10-58 6-58-3-4-21 22-22 34-21z" class="black"/>
      <path d="M298.974 398.187s6-4 9-3c0 18 11 23 12 30 0 3-4 5-11 6-5 2-3-6 1-8-4-8-10-14-11-25z" class="white"/>
      <path d="M315.174 388.987c17-8 23-17 28-28 4-8 7-17 9-28 1-8-3-16-6-25-8-19-59-24-65-9-6 16-10 36-13 48-4 7-23 29-17 45 9 24 55 1 64-3z" class="red"/>
      <path d="M364.174 268.987c-9-16-31-93-47-103-20-13-77-6-87 5-4 4-39 40-62 78m1-6c-10 5-34 40-34 52 0 22 20 44 41 56 16 9 71 11 109-1 22 13 100 9 86-61 0-15-8-29-21-33" class="red"/>
      <path d="M369.174 264.987c4 109-57 81-75 76-13-4-5-6 0-20h-24c0 22-23 21-28 36-57 1-108-25-102-76-8 2-18 2-17 11 4 91 112 91 130 78 11-8 16-16 27-14 38 9 84 37 109-79-6-11-20-12-20-12z" class="white"/>
      <path d="M171.174 272.987c12 36 28 61 93 65 19 3 26 0 48 9 15 5 21-11-8-15 18-11 54-47 57-63-18 14-36 51-69 51l-24 1c-29-3-74-8-97-48z"/>
      <path d="M268.174 305.987c-10 0-17 1-17 12s7 13 17 13 17-1 17-13c0-11-7-12-17-12zm0 5c6 0 11-1 11 7 0 7-5 7-11 7s-11 0-11-7c0-8 5-7 11-7z" class="white"/>
      <path d="M387.174 275.987c59 24-16 60-27 19 6-40-23-76-30-85l-33-38c32 0 94 64 90 104z" class="red"/>
      <path stroke-width="1.165" d="M337.174 218.987c14 10 29 61 27 77-3 18-31 45-87 40-60 1-105-41-101-65" class="red"/>
      <path d="M128.174 248.987c-33.2 33-4 47 10 46 8 7 41-6 44-26 8-48 112-88 112-88-68-59-156 29-166 68z" class="red"/>
      <path d="M292.174 154.987c-28-1-44-1-62 29-15 26 17 72 51 72 6 62-1 52-18 82 1 3 23 4 25 0 22-30 17-32 12-82 34 4 53-43 44-74-4-18-20-27-52-27zm-131 119c-1 14-5 28-25 28-19 0-32-11-32-28-2-19 10-36 33-30 18 5 24 12 24 30z" class="white"/>
      <path d="M118.174 286.987s10 2 10-5m5 5l-5-5m-14-30c-20.3 0-39.3-22-45.4-9-5.8 16 28.8 13 29.4 20 .8 11-43.7 3-37.9 22 3.5 14 30.6-6 37.3 1 6.6 9-26.1 13-20.5 23 5.7 11 25.1-5 29.1-13 0 0 25 5 27-9 3 3 14 11 20 2 3-4-6-15-16-18 0-12-15-19-23-19zm307 50c0 17-16 25-33 25-18 0-32-14-32-31 0-13 19-31 32-31 23 0 35 16 33 37z" class="white"/>
      <path d="M375.174 312.987l10-4m48-52c12 16-23 26-22 31 4 14 37-9 37 7-1 9-33 12-33 12 10 6 27 0 25 11-8 12-27-1-33-1-10 6-28 3-32-4-8 6-16 7-19 5-8-6 0-15 11-17 3-4 5-14 19-19 26-8 40-32 47-25z" class="white"/>
      <path d="M332.632 156.268c22 6 3 94-30 94-19 0-36-20-39-42-3-27 14-53 69-52z" class="pink"/>
      <path d="M312.632 159.268c-13 0-15 32 9 32 30 0 16-29 11-29-8 0-7 4-9 18-2-12-3-21-11-21z" class="white"/>
      <path d="M323.632 188.268c0 4-1 6-3 6s-4-3-4-7 1-6 3-6 4 3 4 7zm12-2c0 4-1 7-3 7-3 0-3-4-3-7 0-2 0-6 3-6 2-1 3 2 3 6z"/>
      <path d="M298.632 191.268c7-8 23-2 23 7l-1 6c-15 14-34-1-31-13m42 2l1 8c7 7 14 1 15-3 2-21-16-11-16-5z" class="pink"/>
      <path d="M287.632 167.268c-7 2-24 16-27 24 4 24-5 32-1 49 14-32-3 7 12 25 1-25-2 6 6 21 0-10 2-14 4 13 13-31 8 9 7 13 24-7 27-43 27-14 11-2 7-45 11-14 16-15 11-49 15-18 20-29-1-47 9-40 0-12-6-8-5-20l1-7c-20 17-63 19-59-20z" class="white"/>
      <path d="M332.632 214.268c0 5-2 10-7 10-4 0-7-5-7-10s2-9 6-9 8 4 8 9z" class="pink"/>
      <path d="M328.632 215.268c0 2 0 4-3 4-2 0-1-2-1-4s0-5 1-5c2-1 3 2 3 5z"/>
      <path d="M276.632 127.068c-4 9.7-25 6-27 .5-15-31.1 35-33.2 27-.5z" class="white"/>
      <path d="M260.632 181.268c13-14 59-27 82-23-25-42-36-26.3-50-33.3-20-13.6-28-7.3-31 3.5-4 13.8 3 38.8-1 52.8z" class="red"/>
      <path d="M327.632 138.268c7 6 24 18 21 24-2 4-1 16-6 14-10-34-69-2-82 23-2 4-13-16-8-24 4-7 5-8 11-16 13-17 52-30.1 64-21z" class="white"/>
      <path d="M318.632 203.268h17c3 3 12-2 12-11 10 8-7 13 1 13-1 8-16 2-6 11-5 3-6 4-9 1-6-7-11 0-16 2-3-6-5 4-6 2-2-6-5-1-11-1 7-10-8 1-14-11 15-2-3 2-2-15 15 13-4-3 2-10 6 5 14 36 32 19z" class="white"/>
      <path d="M338.632 198.268c0 4-3 8-9 10-5 1-14 1-12-8 3-9 7-11 12-11s9 4 9 9z" class="red"/>
      <path fill="none" d="M399 308c-5 5-14 1-14 1m-255-43l7 5m158 70c-13-2-36 8-45 21"/>
    </g>
  </svg>
    
    
  
    <!--Snow-->
   <g id="snow2" fill="#f0f7ff" fill-opacity="1">
          <circle cx="500" cy="-71" r="6"/>
          <circle cx="650" cy="-98" r="4"/>
          <circle cx="135" cy="-90" r="4"/>
          <circle cx="770" cy="-88" r="6"/>
          <circle cx="150" cy="-84" r="4"/>
          <circle cx="458" cy="-70" r="6"/>
          <circle cx="685" cy="-75" r="4"/>
          <circle cx="733" cy="-75" r="4"/>
          <circle cx="850" cy="-84" r="6"/>
          <circle cx="268" cy="-98" r="4"/>
          <circle cx="848" cy="-73" r="4"/>
          <circle cx="623" cy="-82" r="6"/>
          <circle cx="385" cy="-80" r="4"/>
          <circle cx="900" cy="-82" r="4"/>
          <circle cx="70"  cy="-75" r="6"/>
          <circle cx="450" cy="-71" r="4"/>
          <circle cx="600" cy="-98" r="6"/>
          <circle cx="280" cy="-93" r="4"/>         
          <circle cx="45" cy="-78" r="4"/>       
  </g>
    
    
  <text id="look" x="300" y="270" class="txt" dx="0,2,2,2,2,2,2,2,2,0,0,2,0,0,2,2,2,2,2,0,0,0" dy="0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0" rotate="0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0">
  xmas is coming !
  </text>
  <text id="look2" x="300" y="270" class="txt hidden" dx="0,2,2,2,0,0 2,2,2,0,0,0" dy="0,0,0,0,0,0,0,0,0,0,0,0" rotate="0,0,0,0,0,0,0,0,0,0,0,0">
    look busy !
  </text>
</svg> 
  
</svg>

</div>
              
            
!

CSS

              
                body{
  background-color:#1d1f20;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#container{
  max-width:900px;
  width:100%;
  overflow:hidden; 
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

              
            
!

JS

              
                // Audio Player
var audio;

function initAudioPlayer(){
       audio = new Audio();      audio.src="http://144.217.195.24:9035/;stream/1";
       audio.loop = true;
       audio.play(); 
}
window.addEventListener("load", initAudioPlayer);
              
            
!
999px

Console