Pen Settings

HTML

CSS

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

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

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.

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

              
                <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.5 r10040"
   sodipodi:docname="_test1.svg"
   width="1600"
   height="1000"
   viewBox="0 0 3428.5714 3000">
  <defs
     id="defs4">
    <inkscape:path-effect
       is_visible="true"
       id="path-effect2987"
       effect="spiro" />
    <inkscape:path-effect
       is_visible="true"
       id="path-effect3032"
       effect="spiro" />
    <inkscape:path-effect
       is_visible="true"
       id="path-effect3032-1"
       effect="spiro" />
    <inkscape:path-effect
       is_visible="true"
       id="path-effect3032-11"
       effect="spiro" />
    <inkscape:path-effect
       is_visible="true"
       id="path-effect3032-6"
       effect="spiro" />
    <inkscape:path-effect
       is_visible="true"
       id="path-effect3032-5"
       effect="spiro" />
    <inkscape:path-effect
       is_visible="true"
       id="path-effect3032-2"
       effect="spiro" />
    <inkscape:path-effect
       is_visible="true"
       id="path-effect3032-57"
       effect="spiro" />
    <inkscape:path-effect
       is_visible="true"
       id="path-effect3001"
       effect="spiro" />
    <inkscape:path-effect
       is_visible="true"
       id="path-effect3776"
       effect="spiro" />
    <inkscape:path-effect
       effect="spiro"
       id="path-effect3780"
       is_visible="true" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.28"
     inkscape:cx="595.60769"
     inkscape:cy="271.95332"
     inkscape:document-units="px"
     inkscape:current-layer="g3137"
     showgrid="true"
     inkscape:showpageshadow="false"
     inkscape:window-width="1310"
     inkscape:window-height="1035"
     inkscape:window-x="625"
     inkscape:window-y="0"
     inkscape:window-maximized="0">
    <inkscape:grid
       type="xygrid"
       id="grid2985"
       empspacing="5"
       visible="true"
       enabled="true"
       snapvisiblegridlinesonly="true" />
  </sodipodi:namedview>
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Calque 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,8947.638)">
    <g
       id="g3210"
       transform="matrix(85.141013,0,0,24.246586,-889.50253,-9010.5748)">
      <path
         id="path3200"
         d="M 0.91363997,2.5956964 H 58.770598 V 53.619696 H 0.91363997 z"
         inkscape:connector-curvature="0"
         style="fill:#aaccff" />
    </g>
    <path
       style="fill:#ffffff;stroke:#ceeaff;stroke-width:19.99707794"
       inkscape:connector-curvature="0"
       d="m -3276.4426,-8513.211 c -95.2923,47.8708 -173.3343,-14.5359 -126.6264,-83.9313 -15.6937,-27.2065 -27.4213,-143.7698 87.8612,-127.1451 67.0074,-83.6621 128.876,-49.4734 157.2035,-20.0666 69.7154,-105.8173 188.8148,-48.0611 198.5487,7.4223 56.9643,-50.2484 141.819,21.4789 93.9169,75.5567 45.0341,28.8486 16.5573,175.5216 -128.2042,133.7792 -45.5032,62.8073 -130.9763,22.1225 -118.2571,13.958 -30.2253,78.4664 -126.9995,47.0167 -164.4426,0.4335 z"
       id="path3392">
      <animateTransform
         attributeName="transform"
         type="translate"
         from="0,0"
         to="4000,0"
         dur="100.11s"
         begin="0s"
         repeatCount="indefinite"
         id="animateTransform3394" />
    </path>
    <path
       id="path3388"
       d="m -2174.4426,-8605.2112 c -95.2923,47.8708 -173.3343,-14.5359 -126.6264,-83.9313 -15.6937,-27.2065 -27.4213,-143.7698 87.8612,-127.1451 67.0074,-83.6621 128.876,-49.4734 157.2035,-20.0666 69.7154,-105.8173 188.8148,-48.0611 198.5487,7.4223 56.9643,-50.2484 141.819,21.4789 93.9169,75.5567 45.0341,28.8486 16.5573,175.5216 -128.2042,133.7792 -45.5032,62.8073 -130.9763,22.1225 -118.2571,13.958 -30.2253,78.4664 -126.9995,47.0167 -164.4426,0.4335 z"
       inkscape:connector-curvature="0"
       style="fill:#ffffff;stroke:#ceeaff;stroke-width:19.99707794">
      <animateTransform
         id="animateTransform3390"
         repeatCount="indefinite"
         begin="0s"
         dur="100.11s"
         to="4000,0"
         from="0,0"
         type="translate"
         attributeName="transform" />
    </path>
    <path
       style="fill:#ffffff;stroke:#ceeaff;stroke-width:19.99707794"
       inkscape:connector-curvature="0"
       d="m -1272.6997,-8413.253 c -95.2923,47.8708 -173.3343,-14.5359 -126.6264,-83.9313 -15.6937,-27.2065 -27.4213,-143.7698 87.8612,-127.1451 67.0074,-83.6621 128.876,-49.4734 157.2035,-20.0666 69.7154,-105.8173 188.8148,-48.0611 198.5487,7.4223 56.9643,-50.2484 141.81897,21.4789 93.9169,75.5567 45.03413,28.8486 16.5573,175.5216 -128.2042,133.7792 -45.5032,62.8073 -130.9763,22.1225 -118.2571,13.958 -30.2253,78.4664 -126.9995,47.0167 -164.4426,0.4335 z"
       id="path3384">
      <animateTransform
         attributeName="transform"
         type="translate"
         from="0,0"
         to="4000,0"
         dur="100.11s"
         begin="0s"
         repeatCount="indefinite"
         id="animateTransform3386" />
    </path>
    <path
       id="path3372"
       d="m -374.44262,-8587.2112 c -95.29228,47.8708 -173.33429,-14.5359 -126.62636,-83.9313 -15.6937,-27.2065 -27.42133,-143.7698 87.86122,-127.1451 67.0074,-83.6621 128.87594,-49.4734 157.20349,-20.0666 69.7154,-105.8173 188.81477,-48.0611 198.54869,7.4223 56.96427,-50.2484 141.81897,21.4789 93.91695,75.5567 45.03408,28.8486 16.55728,175.5216 -128.20426,133.7792 -45.50319,62.8073 -130.97625,22.1225 -118.25711,13.958 -30.22528,78.4664 -126.99951,47.0167 -164.44262,0.4335 z"
       inkscape:connector-curvature="0"
       style="fill:#ffffff;stroke:#ceeaff;stroke-width:19.99707794">
      <animateTransform
         id="animateTransform3374"
         repeatCount="indefinite"
         begin="0s"
         dur="100.11s"
         to="4000,0"
         from="0,0"
         type="translate"
         attributeName="transform" />
    </path>
    <path
       id="path3448"
       d="m 692.7741,-8467.1778 c -102.7001,51.592 -186.80889,-15.6659 -136.47,-90.456 -16.91368,-29.3214 -29.55298,-154.9461 94.69133,-137.029 72.21637,-90.1658 138.89437,-53.3194 169.42407,-21.6265 75.1349,-114.0434 203.4927,-51.7974 213.9833,7.9993 61.3926,-54.1547 152.8436,23.1485 101.2178,81.4302 48.535,31.0912 17.8444,189.1662 -138.1705,144.1789 -49.0405,67.6898 -141.158,23.8422 -127.4501,15.0429 -32.5749,84.5663 -136.8721,50.6718 -177.2259,0.4673 z"
       inkscape:connector-curvature="0"
       style="fill:#ffffff;stroke:#ceeaff;stroke-width:19.99707794">
      <animateTransform
         id="animateTransform3450"
         repeatCount="1"
         fill="freeze"
         begin="0s"
         dur="100.11s"
         to="4000,0"
         from="0,0"
         type="translate"
         attributeName="transform" />
    </path>
    <path
       style="fill:#ffffff;stroke:#ceeaff;stroke-width:19.99707794"
       inkscape:connector-curvature="0"
       d="m 1522.3545,-8378.5263 c -102.7,51.592 -186.8088,-15.6659 -136.4699,-90.456 -16.9137,-29.3214 -29.553,-154.9461 94.6913,-137.029 72.2164,-90.1658 138.8944,-53.3194 169.4241,-21.6265 75.1349,-114.0434 203.4927,-51.7974 213.9833,7.9993 61.3925,-54.1547 152.8436,23.1485 101.2178,81.4302 48.535,31.0912 17.8444,189.1662 -138.1705,144.1789 -49.0405,67.6898 -141.158,23.8422 -127.4501,15.0429 -32.5749,84.5663 -136.8721,50.6718 -177.226,0.4673 z"
       id="path3460">
      <animateTransform
         attributeName="transform"
         type="translate"
         from="0,0"
         to="4000,0"
         dur="100.11s"
         begin="0s"
         repeatCount="1"
         fill="freeze"
         id="animateTransform3462" />
    </path>
    <path
       id="path3464"
       d="m 2662.3545,-8578.5265 c -102.7,51.592 -186.8088,-15.6659 -136.4699,-90.456 -16.9137,-29.3214 -29.553,-154.9461 94.6913,-137.029 72.2164,-90.1658 138.8944,-53.3194 169.4241,-21.6265 75.1349,-114.0434 203.4927,-51.7974 213.9833,7.9993 61.3925,-54.1547 152.8436,23.1485 101.2178,81.4302 48.535,31.0912 17.8444,189.1662 -138.1705,144.1789 -49.0405,67.6898 -141.158,23.8422 -127.4501,15.0429 -32.5749,84.5663 -136.8721,50.6718 -177.226,0.4673 z"
       inkscape:connector-curvature="0"
       style="fill:#ffffff;stroke:#ceeaff;stroke-width:19.99707794">
      <animateTransform
         id="animateTransform3466"
         repeatCount="1"
         fill="freeze"
         begin="0s"
         dur="100.11s"
         to="4000,0"
         from="0,0"
         type="translate"
         attributeName="transform" />
    </path>
    <g
       id="g3137"
       transform="matrix(54.491666,0,0,54.491666,836.6607,-8764.1814)">
      <path
         id="path3123"
         d="m -34.182488,32.969141 c 0.162165,-2.971659 5.936685,-30.0784412 15.78223,-24.2238844 5.294108,3.1480894 12.408112,2.6515284 14.3141157,1.1010858 C 4.7122468,2.6892764 10.113757,2.2347236 18.765,7.169 23.890513,10.289846 28.860997,9.3643959 33.448,6.465 37.970818,3.3238042 42.563456,1.1805566 47.769,2.242 60.222441,4.4252116 75.662212,20.818778 80.697465,32.969144"
         inkscape:connector-curvature="0"
         style="fill:#c6e9af"
         sodipodi:nodetypes="csscccc" />
      <path
         id="path3125"
         d="m -5.873,25.391 c -0.257,-3.221 0.705,-6.524 2.651,-9.103 1.946,-2.579 4.859,-4.41 8.027,-5.046 2.887,-0.579 5.874,-0.19 8.775,0.316 2.901,0.506 5.813,1.131 8.756,1.019 3.65,-0.139 7.147,-1.403 10.655,-2.42 3.508,-1.017 7.236,-1.799 10.791,-0.961 3.681,0.867 6.73,3.353 9.7,5.695 4.721,3.723 9.591,7.257 14.594,10.59 L -5.873,25.392"
         inkscape:connector-curvature="0"
         style="fill:#aade87" />
      <path
         id="path3127"
         d="m -10.768,32.065 c 1.843,-5.4 5.539,-10.148 10.323,-13.259 7.026,-4.57 16.258,-5.409 24.116,-2.492 2.448,0.909 4.757,2.15 7.151,3.194 2.394,1.044 4.922,1.899 7.532,1.967 2.379,0.062 4.726,-0.533 7.002,-1.229 2.276,-0.697 4.531,-1.503 6.881,-1.885 4.868,-0.793 10.023,0.341 14.109,3.103 4.086,2.762 7.059,7.123 8.138,11.936 l -85.251,-1.335"
         inkscape:connector-curvature="0"
         style="fill:#8dd35f" />
      <path
         id="path3129"
         d="M -30.250039,18.655025 C -22.369039,15.289025 -12.78,15.274 -4.628,17.915 c 5.714,1.851 10.859,5.099 16.341,7.556 2.741,1.228 5.585,2.264 8.54,2.8 2.955,0.536 6.032,0.56 8.935,-0.212 2.701,-0.718 5.173,-2.096 7.612,-3.463 2.438,-1.367 4.907,-2.75 7.605,-3.478 4.318,-1.165 8.962,-0.564 13.183,0.912 4.221,1.477 11.911,6.118 11.911,6.118 l 1.660964,23.539599 -101.410003,0"
         inkscape:connector-curvature="0"
         style="fill:#71c837"
         sodipodi:nodetypes="cccsccccccc" />
    </g>
    <g
       transform="translate(1034,-8060)"
       id="layer1-2"
       inkscape:label="Calque 1">
      <path
         sodipodi:type="arc"
         style="fill:#ffeeaa;fill-opacity:1;stroke:none"
         id="path3013"
         sodipodi:cx="355"
         sodipodi:cy="250"
         sodipodi:rx="85"
         sodipodi:ry="80"
         d="m 440,250 c 0,44.18278 -38.0558,80 -85,80 -46.9442,0 -85,-35.81722 -85,-80 0,-44.18278 38.0558,-80 85,-80 43.14377,0 79.4442,30.42043 84.43042,70.75423"
         transform="translate(335,42.362183)"
         sodipodi:start="0"
         sodipodi:end="6.1673543"
         sodipodi:open="true" />
      <path
         sodipodi:open="true"
         sodipodi:end="6.1673543"
         sodipodi:start="0"
         transform="translate(-30,42.362183)"
         d="m 440,250 c 0,44.18278 -38.0558,80 -85,80 -46.9442,0 -85,-35.81722 -85,-80 0,-44.18278 38.0558,-80 85,-80 43.14377,0 79.4442,30.42043 84.43042,70.75423"
         sodipodi:ry="80"
         sodipodi:rx="85"
         sodipodi:cy="250"
         sodipodi:cx="355"
         id="path3011"
         style="fill:#ffeeaa;fill-opacity:1;stroke:none"
         sodipodi:type="arc" />
      <g
         id="tail">
        <path
           sodipodi:nodetypes="ccccc"
           inkscape:connector-curvature="0"
           id="path3842"
           d="m 550,602.36218 c 174.61314,204.17743 453.9984,40.3701 340,-170 7.60027,6.3617 32.83767,-14.1481 30,-10 123.697,363.73439 -378.42214,363.80369 -450,190 -9.53214,-26.40555 20.30859,-9.03472 80,-10 z"
           style="fill:#ffeeaa;fill-opacity:1;stroke:none" />
        <path
           sodipodi:nodetypes="ccc"
           inkscape:connector-curvature="0"
           id="path3844"
           d="m 840,292.36218 c 80.93005,90.91276 -74.36371,117.94458 80,170 114.1123,-73.26744 -84.30243,-192.64756 -80,-170 z"
           style="fill:#a05a2c;fill-opacity:1;stroke:none" />
        <animateTransform
           keySplines="0.8 0.7 0.3 0.8"
           calcMode="spline"
           id="animateTransform12"
           repeatCount="1"
           begin="0s;animateTransform13.end"
           dur="1s"
           to="30 500 500"
           from="0 500 500"
           type="rotate"
           attributeName="transform" />
        <animateTransform
           keySplines="0.8 0.7 0.3 0.8"
           calcMode="spline"
           id="animateTransform13"
           repeatCount="1"
           begin="animateTransform12.end"
           dur="1s"
           to="0 500 500"
           from="30 500 500"
           type="rotate"
           attributeName="transform" />
      </g>
      <g
         id="ears">
        <path
           sodipodi:open="true"
           sodipodi:end="6.1673543"
           sodipodi:start="0"
           transform="matrix(1.7202207,0,0,1.6712077,724.40441,-118.59143)"
           d="m 20,250 c 0,22.09139 -17.90861,40 -40,40 -22.09139,0 -40,-17.90861 -40,-40 0,-22.09139 17.90861,-40 40,-40 20.30294899,0 37.385508,15.21021 39.731963,35.37711"
           sodipodi:ry="40"
           sodipodi:rx="40"
           sodipodi:cy="250"
           sodipodi:cx="-20"
           id="path3014"
           style="fill:#ffcc00;fill-opacity:1;stroke:none"
           sodipodi:type="arc" />
        <path
           sodipodi:open="true"
           sodipodi:end="6.1673543"
           sodipodi:start="0"
           transform="matrix(0.96666667,0,0,1,376,52.362183)"
           d="m 30,250 c 0,38.65993 -33.5786438,70 -75,70 -41.421356,0 -75,-31.34007 -75,-70 0,-38.65993 33.578644,-70 75,-70 38.0680293,0 70.097827,26.61787 74.497431,61.90995"
           sodipodi:ry="70"
           sodipodi:rx="75"
           sodipodi:cy="250"
           sodipodi:cx="-45"
           id="path3016"
           style="fill:#ffcc00;fill-opacity:1;stroke:none"
           sodipodi:type="arc" />
      </g>
      <path
         sodipodi:nodetypes="ccccc"
         inkscape:connector-curvature="0"
         id="path3816"
         d="m 580,912.36218 c 2.78651,-68.88654 -63.76844,-225.8846 -60,-300 28.71922,-0.44391 51.33328,-22.03973 80,-20 0.522,0.46855 179.9585,286.27448 180,290 -35.58174,2.86545 -172.58997,35.81329 -200,30 z"
         style="fill:#ffeeaa;fill-opacity:1;stroke:#000000;stroke-width:0.98681986;stroke-opacity:0" />
      <path
         sodipodi:nodetypes="csccc"
         inkscape:connector-curvature="0"
         id="path3804"
         d="m 280,862.36218 c -0.43846,-1.36189 128.79934,-278.7569 130,-280 0.50807,-0.52603 109.34429,29.32916 110,30 0.81163,0.83042 -78.98063,289.77179 -80,290 47.20083,3.22376 -127.05053,-11.95855 -160,-40 z"
         style="fill:#ffeeaa;fill-opacity:1;stroke:#000000;stroke-width:1.36604786;stroke-opacity:0" />
      <path
         transform="matrix(1,0,0,-1,510,612.36218)"
         d="m -60,170 c 0,16.56854 -13.431458,30 -30,30 -16.56854,0 -30,-13.43146 -30,-30 0,-16.56854 13.43146,-30 30,-30 16.568542,0 30,13.43146 30,30 z"
         sodipodi:ry="30"
         sodipodi:rx="30"
         sodipodi:cy="170"
         sodipodi:cx="-90"
         id="path3007"
         style="fill:#ffffff;fill-opacity:1"
         sodipodi:type="arc" />
      <path
         transform="matrix(1,0,0,1.5000001,680,112.36216)"
         d="m -60,220 c 0,11.04569 -13.431458,20 -30,20 -16.56854,0 -30,-8.95431 -30,-20 0,-11.04569 13.43146,-20 30,-20 16.568542,0 30,8.95431 30,20 z"
         sodipodi:ry="20"
         sodipodi:rx="30"
         sodipodi:cy="220"
         sodipodi:cx="-90"
         id="path3009"
         style="fill:#ffffff;fill-opacity:1"
         sodipodi:type="arc" />
      <path
         sodipodi:nodetypes="cc"
         transform="translate(0,52.362183)"
         inkscape:connector-curvature="0"
         id="path3017"
         d="m 619.87693,391.8557 c -413.25129,405.42953 -206.62564,202.71477 0,0 z"
         style="fill:#ffb380;fill-opacity:1" />
      <path
         transform="translate(505,236.36218)"
         d="m -70,205 c 0,8.28427 -6.715729,15 -15,15 -8.284271,0 -15,-6.71573 -15,-15 0,-8.28427 6.715729,-15 15,-15 8.284271,0 15,6.71573 15,15 z"
         sodipodi:ry="15"
         sodipodi:rx="15"
         sodipodi:cy="205"
         sodipodi:cx="-85"
         id="path3021"
         style="fill:#000000;fill-opacity:1"
         sodipodi:type="arc" />
      <path
         transform="matrix(1.5,0,0,1.4999998,754,186.36221)"
         d="m -100,170 c 0,5.52285 -4.47715,10 -10,10 -5.52285,0 -10,-4.47715 -10,-10 0,-5.52285 4.47715,-10 10,-10 5.52285,0 10,4.47715 10,10 z"
         sodipodi:ry="10"
         sodipodi:rx="10"
         sodipodi:cy="170"
         sodipodi:cx="-110"
         id="path3023"
         style="fill:#000000;fill-opacity:1"
         sodipodi:type="arc" />
      <path
         sodipodi:nodetypes="cscsccscccscsccscscscccscscsccc"
         inkscape:connector-curvature="0"
         id="path3001"
         d="m 540,762.36218 c 27.1069,-95.4349 -3.16869,-27.83068 -40,-20 -85.72186,18.22529 0.20864,-74.51415 -60,-80 C 390.47356,647.92652 360.17665,802.33697 274.50246,716.01572 254.32191,695.68276 303.05452,638.04903 290,612.36218 c -8.10541,-28.81539 -50.37728,-11.6546 -60,-40 -9.75197,-26.36781 -0.31166,-45.46967 10,-50 22.21503,-9.75995 25.6023,-21.05673 30,-40 3.16949,-25.12927 -43.48357,-39.0751 -50,-70 -5.71592,-25.95069 27.08789,-45.14777 20,-80 -8.09614,-44.93113 77.70747,39.43837 68.09959,5.38757 C 301.63913,314.85354 284.98768,270.41369 290,262.36218 c 22.20706,-25.66932 67.6528,-39.39557 80,-30 27.2213,20.71399 31.04843,54.44477 50,30 18.6057,-30.7296 -96.27066,-72.68594 50,-90 61.08481,-7.69128 34.9264,120.85889 70,100 19.26808,-11.45906 -39.29555,-66.5955 55.43974,-87.97409 67.3066,-13.52318 75.70267,35.51664 44.56026,57.97409 -18.84297,13.58807 -6.38084,28.76536 0,40 67.54379,-3.25633 -1.7721,-64.6496 80,-50 120.64857,21.61439 -41.7319,93.59261 10,110 22.48007,14.36147 57.29815,-81.58502 70,-50 16.80083,25.01766 -1.51153,81.23686 -60,130 -2.25914,38.95035 50.0919,9.36443 70,10 44.37324,1.41662 -49.90464,87.02176 -80,80 -0.7945,19.17191 48.39097,32.97093 60,60 26.86485,62.5489 -26.82008,67.32003 -80,30 -54.11456,-7.08451 -8.8676,70.58066 30,60 32.46337,-8.83727 7.60634,92.51878 -80,20 -58.33602,-33.59492 -51.80865,-27.53245 -20,30 10.66551,43.25007 -85.09658,65.18829 -100,50 z"
         style="fill:#a05a2c;fill-opacity:1" />
      <path
         transform="translate(0,52.362183)"
         sodipodi:nodetypes="cscscccc"
         inkscape:connector-curvature="0"
         id="path3069"
         d="m 340,490 c -55.34055,-92.68962 -7.76975,-157.1054 0,-170 9.77087,-16.21565 69.25325,-92.3597 130,-10 31.78985,24.30365 62.47352,9.52368 70,0 59.26414,-74.99021 109.28951,-18.72632 130,10 26.1001,47.83558 24.57897,92.86813 10,140 -9.09012,46.86895 -65.30778,103.93961 -170,110 -71.36989,0.42987 -120.3341,-8.45114 -170,-80 z"
         style="fill:#ffcc00;fill-opacity:1" />
      <path
         transform="matrix(0.61459893,0.95178619,-0.92934442,0.69737461,501.00532,121.56017)"
         d="m 210.39308,205 c 0,16.46946 -20.32318,29.8206 -45.39308,29.8206 -25.0699,0 -45.39308,-13.35114 -45.39308,-29.8206 0,-16.46946 20.32318,-29.8206 45.39308,-29.8206 25.0699,0 45.39308,13.35114 45.39308,29.8206 z"
         sodipodi:ry="29.820597"
         sodipodi:rx="45.393078"
         sodipodi:cy="205"
         sodipodi:cx="165"
         id="path3102"
         style="fill:#ffeeaa;fill-opacity:1"
         sodipodi:type="arc" />
      <path
         sodipodi:end="6.2789483"
         sodipodi:start="0"
         transform="matrix(0.46046576,-0.88767747,0.88767747,0.46046576,282.03971,468.57985)"
         d="m 230,250 c 0,19.6666 -22.38576,35.60952 -50,35.60952 -27.61424,0 -50,-15.94292 -50,-35.60952 0,-19.6666 22.38576,-35.60952 50,-35.60952 27.53154,0 49.8829,15.85112 49.99955,35.45864 L 180,250 z"
         sodipodi:ry="35.609524"
         sodipodi:rx="50"
         sodipodi:cy="250"
         sodipodi:cx="180"
         id="path3106"
         style="fill:#ffeeaa;fill-opacity:1"
         sodipodi:type="arc" />
      <g
         id="eyes">
        <circle
           transform="translate(355,-317.63782)"
           sodipodi:ry="26"
           sodipodi:rx="26"
           sodipodi:cy="755"
           sodipodi:cx="65"
           d="m 91,755 c 0,14.3594 -11.640597,26 -26,26 -14.359403,0 -26,-11.6406 -26,-26 0,-14.3594 11.640597,-26 26,-26 14.359403,0 26,11.6406 26,26 z"
           id="circle33"
           r="26"
           cy="755"
           cx="65"
           style="fill:#000000">
          <animate
             begin="5.1s;animateEyesL.end+5.1s"
             repeatCount="1"
             dur="0.5s"
             values="26;0;26"
             attributeName="r"
             id="animateEyesL" />
        </circle>
        <circle
           transform="translate(355,-317.63782)"
           sodipodi:ry="26"
           sodipodi:rx="26"
           sodipodi:cy="755"
           sodipodi:cx="225"
           d="m 251,755 c 0,14.3594 -11.6406,26 -26,26 -14.3594,0 -26,-11.6406 -26,-26 0,-14.3594 11.6406,-26 26,-26 14.3594,0 26,11.6406 26,26 z"
           id="circle3099"
           r="26"
           cy="755"
           cx="225"
           style="fill:#000000">
          <animate
             begin="5.1s;animateEyesR.end+5.1s"
             repeatCount="1"
             dur="0.5s"
             values="26;0;26"
             attributeName="r"
             id="animateEyesR" />
        </circle>
      </g>
      <path
         sodipodi:nodetypes="ccccc"
         inkscape:connector-curvature="0"
         id="path3000"
         d="m 445,582.36218 c -44.97311,-4.16023 -61.70067,-83.09876 -5,-90 1.93256,-43.55101 93.289,-82.35117 120,0 64.93584,13.02356 34.13041,96.77568 -10,90 -14.31279,11.89664 -50.47073,26.29458 -105,0 z"
         style="fill:#ffeeaa;fill-opacity:1" />
      <path
         sodipodi:nodetypes="ccc"
         inkscape:connector-curvature="0"
         id="path3004"
         d="m 420,532.36218 c 17.17441,-60.82655 160.87136,-57.58268 160,0 5.19142,57.84709 -149.13217,67.07479 -160,0 z"
         style="fill:#ffffff;fill-opacity:1" />
      <path
         sodipodi:nodetypes="cccc"
         inkscape:connector-curvature="0"
         id="path3008"
         d="m 460,492.36218 c 13.61832,-5.89844 36.14152,-23.61998 75,0 -0.7139,28.70539 -12.76185,55.5497 -35,60 -24.15306,-3.42662 -35.12038,-25.2966 -40,-60 z"
         style="fill:#784421;fill-opacity:1" />
      <path
         sodipodi:nodetypes="ccccc"
         inkscape:connector-curvature="0"
         id="path3010"
         d="m 475,562.36218 c -0.432,1.5094 25.51232,15.30954 25,-10 -0.16633,18.7871 14.10066,18.0535 26,11 -13.66493,7.98584 -14.70115,4.37342 -26,4 -9.31217,-1.3044 -10.92619,7.08492 -25,-5 z"
         style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.35131621px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
      <g
         id="paws">
        <path
           sodipodi:open="true"
           sodipodi:end="6.1673543"
           sodipodi:start="0"
           transform="matrix(1.0625,0,0,0.94999994,212.5,479.61221)"
           d="M 228.23529,445 C 228.23529,500.22848 179.7767,545.00001 120,545.00001 60.2233,545.00001 11.764709,500.22848 11.764709,445 11.764709,389.77152 60.2233,344.99999 120,344.99999 c 54.93739,0 101.16078,38.02554 107.51002,88.44279"
           sodipodi:ry="100.00001"
           sodipodi:rx="108.23529"
           sodipodi:cy="445"
           sodipodi:cx="120"
           id="path3783"
           style="fill:#ffcc00;fill-opacity:1"
           sodipodi:type="arc" />
        <path
           sodipodi:open="true"
           sodipodi:end="6.2703227"
           sodipodi:start="0"
           transform="matrix(1.0245902,0,0,1.113553,-492.76131,0.604023)"
           d="m 1268.75,805.3125 c 0,47.11679 -51.2074,85.3125 -114.375,85.3125 C 1091.2074,890.625 1040,852.42929 1040,805.3125 1040,758.19571 1091.2074,720 1154.375,720 c 62.5938,0 113.5604,37.53023 114.3655,84.21519"
           sodipodi:ry="85.3125"
           sodipodi:rx="114.375"
           sodipodi:cy="805.3125"
           sodipodi:cx="1154.375"
           id="path3824"
           style="fill:#ffcc00;fill-opacity:1;stroke:#000000;stroke-opacity:0"
           sodipodi:type="arc" />
        <path
           sodipodi:nodetypes="cccc"
           inkscape:connector-curvature="0"
           id="path3832"
           d="m 300,902.36218 c -17.60718,-15.94242 -54.31133,2.46883 -40,70 l 20,10 c -34.63905,-49.69453 -10.09859,-82.94283 20,-80 z"
           style="fill:#a05a2c;fill-opacity:1;stroke:none" />
        <path
           style="fill:#a05a2c;fill-opacity:1;stroke:none"
           d="m 360,912.36218 c -17.60718,-15.94242 -54.31133,15.46883 -40,83 l 20,2 c -34.63905,-49.69455 -10.09859,-87.94283 20,-85 z"
           id="path3834"
           inkscape:connector-curvature="0"
           sodipodi:nodetypes="cccc" />
        <path
           sodipodi:nodetypes="cccc"
           inkscape:connector-curvature="0"
           id="path3836"
           d="m 720,902.36218 c 17.60718,-15.94242 54.31133,2.46883 40,70 l -20,10.00002 c 34.63905,-49.69455 10.09859,-82.94285 -20,-80.00002 z"
           style="fill:#a05a2c;fill-opacity:1;stroke:none" />
        <path
           sodipodi:nodetypes="cccc"
           inkscape:connector-curvature="0"
           id="path3838"
           d="m 640,902.36218 c 17.60718,-15.94242 54.31133,22.46883 40,90 l -20,-3 c 34.63905,-49.69455 10.09859,-89.94283 -20,-87 z"
           style="fill:#a05a2c;fill-opacity:1;stroke:none" />
      </g>
    </g>
    <g
       transform="translate(3152.412,-8111.7733)"
       id="layer1-1"
       inkscape:label="Calque 1">
      <path
         sodipodi:nodetypes="ccccccccccccccccc"
         inkscape:connector-curvature="0"
         id="path3780"
         d="m 500,412.36218 c -39.77363,87.50482 -162.27267,160.78284 -210,160 59.0696,-37.93289 153.11069,-163.45885 190,-270 -50.93233,93.22576 -144.83942,156.5884 -180,140 47.19942,-17.69528 90.61817,-5.33522 180,-190 -25.82298,35.60584 -64.33301,51.25238 -90,60 57.79727,-47.45165 121.88868,-128.39313 140,-210 -27.74026,52.66539 189.953,240.77977 200,230 -28.94864,1.25357 -140.94788,-42.29102 -170,-80 27.06614,75.43123 154.81273,139.6332 190,170 -27.44107,15.00538 -120.4031,-26.51328 -160,-60 59.82101,67.98149 162.48289,202.47779 220,210 -33.80483,30.96235 -144.43518,-60.42311 -210,-110 C 700.2868,571.12006 735.84248,661.70635 853.27414,688.18744 736.67181,684.9634 634.44752,618.13598 529.86758,561.41273 436.46512,633.35617 335.85014,666.58851 233.24932,689.76758 356.79821,643.91131 439.52038,558.37195 500,412.36218 z"
         style="fill:#55d400;fill-opacity:1;stroke:none" />
      <path
         sodipodi:nodetypes="cccc"
         inkscape:connector-curvature="0"
         id="path3790"
         d="m 510,712.36218 c 5.61467,-157.37992 12.59047,-362.69173 20,-520 22.37213,169.22805 43.16952,387.06253 60,540 -22.22127,-5.82394 -56.51832,-35.90303 -80,-20 z"
         style="fill:#a05a2c;fill-opacity:1;stroke:none" />
    </g>
    <g
       inkscape:label="Calque 1"
       id="g3143"
       transform="translate(1972.412,-8281.7733)">
      <path
         style="fill:#55d400;fill-opacity:1;stroke:none"
         d="m 500,412.36218 c -39.77363,87.50482 -162.27267,160.78284 -210,160 59.0696,-37.93289 153.11069,-163.45885 190,-270 -50.93233,93.22576 -144.83942,156.5884 -180,140 47.19942,-17.69528 90.61817,-5.33522 180,-190 -25.82298,35.60584 -64.33301,51.25238 -90,60 57.79727,-47.45165 121.88868,-128.39313 140,-210 -27.74026,52.66539 189.953,240.77977 200,230 -28.94864,1.25357 -140.94788,-42.29102 -170,-80 27.06614,75.43123 154.81273,139.6332 190,170 -27.44107,15.00538 -120.4031,-26.51328 -160,-60 59.82101,67.98149 162.48289,202.47779 220,210 -33.80483,30.96235 -144.43518,-60.42311 -210,-110 C 700.2868,571.12006 735.84248,661.70635 853.27414,688.18744 736.67181,684.9634 634.44752,618.13598 529.86758,561.41273 436.46512,633.35617 335.85014,666.58851 233.24932,689.76758 356.79821,643.91131 439.52038,558.37195 500,412.36218 z"
         id="path3145"
         inkscape:connector-curvature="0"
         sodipodi:nodetypes="ccccccccccccccccc" />
      <path
         style="fill:#a05a2c;fill-opacity:1;stroke:none"
         d="m 510,712.36218 c 5.61467,-157.37992 12.59047,-362.69173 20,-520 22.37213,169.22805 43.16952,387.06253 60,540 -22.22127,-5.82394 -56.51832,-35.90303 -80,-20 z"
         id="path3148"
         inkscape:connector-curvature="0"
         sodipodi:nodetypes="cccc" />
    </g>
    <g
       transform="translate(2532.412,-7921.7733)"
       id="g3156"
       inkscape:label="Calque 1">
      <path
         sodipodi:nodetypes="ccccccccccccccccc"
         inkscape:connector-curvature="0"
         id="path3158"
         d="m 500,412.36218 c -39.77363,87.50482 -162.27267,160.78284 -210,160 59.0696,-37.93289 153.11069,-163.45885 190,-270 -50.93233,93.22576 -144.83942,156.5884 -180,140 47.19942,-17.69528 90.61817,-5.33522 180,-190 -25.82298,35.60584 -64.33301,51.25238 -90,60 57.79727,-47.45165 121.88868,-128.39313 140,-210 -27.74026,52.66539 189.953,240.77977 200,230 -28.94864,1.25357 -140.94788,-42.29102 -170,-80 27.06614,75.43123 154.81273,139.6332 190,170 -27.44107,15.00538 -120.4031,-26.51328 -160,-60 59.82101,67.98149 162.48289,202.47779 220,210 -33.80483,30.96235 -144.43518,-60.42311 -210,-110 C 700.2868,571.12006 735.84248,661.70635 853.27414,688.18744 736.67181,684.9634 634.44752,618.13598 529.86758,561.41273 436.46512,633.35617 335.85014,666.58851 233.24932,689.76758 356.79821,643.91131 439.52038,558.37195 500,412.36218 z"
         style="fill:#55d400;fill-opacity:1;stroke:none" />
      <path
         sodipodi:nodetypes="cccc"
         inkscape:connector-curvature="0"
         id="path3160"
         d="m 510,712.36218 c 5.61467,-157.37992 12.59047,-362.69173 20,-520 22.37213,169.22805 43.16952,387.06253 60,540 -22.22127,-5.82394 -56.51832,-35.90303 -80,-20 z"
         style="fill:#a05a2c;fill-opacity:1;stroke:none" />
    </g>
    <g
       inkscape:label="Calque 1"
       id="g3162"
       transform="translate(-87.58805,-8271.7733)">
      <path
         style="fill:#55d400;fill-opacity:1;stroke:none"
         d="m 500,412.36218 c -39.77363,87.50482 -162.27267,160.78284 -210,160 59.0696,-37.93289 153.11069,-163.45885 190,-270 -50.93233,93.22576 -144.83942,156.5884 -180,140 47.19942,-17.69528 90.61817,-5.33522 180,-190 -25.82298,35.60584 -64.33301,51.25238 -90,60 57.79727,-47.45165 121.88868,-128.39313 140,-210 -27.74026,52.66539 189.953,240.77977 200,230 -28.94864,1.25357 -140.94788,-42.29102 -170,-80 27.06614,75.43123 154.81273,139.6332 190,170 -27.44107,15.00538 -120.4031,-26.51328 -160,-60 59.82101,67.98149 162.48289,202.47779 220,210 -33.80483,30.96235 -144.43518,-60.42311 -210,-110 C 700.2868,571.12006 735.84248,661.70635 853.27414,688.18744 736.67181,684.9634 634.44752,618.13598 529.86758,561.41273 436.46512,633.35617 335.85014,666.58851 233.24932,689.76758 356.79821,643.91131 439.52038,558.37195 500,412.36218 z"
         id="path3164"
         inkscape:connector-curvature="0"
         sodipodi:nodetypes="ccccccccccccccccc" />
      <path
         style="fill:#a05a2c;fill-opacity:1;stroke:none"
         d="m 510,712.36218 c 5.61467,-157.37992 12.59047,-362.69173 20,-520 22.37213,169.22805 43.16952,387.06253 60,540 -22.22127,-5.82394 -56.51832,-35.90303 -80,-20 z"
         id="path3166"
         inkscape:connector-curvature="0"
         sodipodi:nodetypes="cccc" />
    </g>
    <g
       id="g4"
       transform="matrix(0.38300635,0,0,0.38300635,58
              
            
!

CSS

              
                body
  margin 0
  background #333

svg
  display block
  margin 0 auto

              
            
!

JS

              
                // Full SVG...
              
            
!
999px

Console