cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
                  <svg id="wolf_003-01-01"
         xmlns="http://www.w3.org/2000/svg" 
         version="1.1" 
         viewBox="0 0 520 370"
         style="max-height:560; max-width:95%">

        <!--ui lol-->

        <g id="G">
            <rect x="235" y="210" height="20" width="55" fill="#bbb"/>
            <text x="242" y="228" font-size="20" fill="black">RUN</text>
        </g>

        <g id="S">
            <rect x="290" y="210" height="20" width="55" fill="black"/>
            <text x="293" y="228" font-size="20" fill="white">STOP</text>
        </g>

        <!--try 1st on these two-->

        <g id="head">
            <path 
                  fill="#000" 
                  d="m 234.46,6.3499 -47.375,11.525 -9.65,8.725 -26.775,13.7 5.15,7.6 10.7,2.45 -2.925,11.475 8.325,-3.5 23.5,-1.375 12.225,16.5 33.428,-17.17 13.472,-39.855 -18.55,-1.7256 z">

                <animate attributeName="d" 
                         begin="G.click" 
                         end="S.click" 
                         dur="1s"
                         values="
                                 m 234.46,6.3499 -47.375,11.525 -9.65,8.725 -26.775,13.7 5.15,7.6 10.7,2.45 -2.925,11.475 8.325,-3.5 23.5,-1.375 12.225,16.5 33.428,-17.17 13.472,-39.855 -18.55,-1.7256 z;
                                 M 234.46,6.3499 179.0333,20.694227 177.435,26.5999 151.05637,41.873014 155.81,47.8999 l 10.7,2.45 -0.23412,11.454576 5.63412,-3.479576 23.5,-1.375 14.9398,19.63164 30.7132,-20.30164 10.00632,-40.616757 -18.14466,1.029538 z;
                                 m 158.52092,25.455374 -43.31409,7.057995 -8.43172,10.349365 -22.714093,12.481726 7.180457,10.036548 12.730466,-2.017005 -3.3311,15.535914 11.57373,-6.34264 16.59645,-0.562817 7.75799,12.032995 37.89501,-12.702995 13.87809,-38.230634 -24.64137,-1.7256 z;
                                 m 152.02345,11.648268 -52.248093,13.961548 -1.934264,7.100635 -21.9019,14.106091 5.15,7.6 9.075634,4.480457 -1.300634,11.881091 8.325,-5.936548 23.906087,-1.781091 11.81891,16.906091 33.428,-17.17 13.472,-39.855 -35.60584,-5.380422 z;
                                 M 148.36864,6.7751712 96.932723,18.300171 87.28272,30.273902 65.380817,43.567811 l 5.15,7.6 10.7,2.45 -2.925,11.475 8.325,-3.5 21.469543,-4.21764 9.78845,9.190356 37.89501,-7.017716 25.24865,-41.479366 -33.98147,-5.380422 z;
                                 M 139.43463,5.9629884 92.059624,19.924536 75.50607,33.116542 54.41635,44.379993 l 7.586548,9.630457 18.415736,0.419543 -10.234644,5.789721 7.512817,7.058376 23.906093,-8.684645 12.225,16.5 33.428,-17.17 16.72073,-41.073274 -21.79873,-4.56824 z;
                                 m 143.08944,21.39446 -49.811546,15.179823 -5.182991,11.161548 -23.526269,16.948731 5.15,8.006091 11.918274,0.01345 -6.173731,9.850635 5.48236,4.621827 29.185273,-7.872462 9.78845,11.626904 35.05237,-10.266447 10.62936,-51.225559 -23.017,-0.101234 z;
                                 m 141.46508,36.825933 -39.65926,19.646828 -8.431725,12.379822 -19.465362,10.045178 7.586548,9.630457 8.669543,-1.204823 -4.143274,12.693275 6.294547,4.21574 24.718273,-11.527289 10.60064,12.032999 31.80363,-13.10909 19.56337,-50.819468 -29.51446,1.929223 z;
                                 m 155.14149,32.21773 -41.55727,13.762587 -3.38476,10.067551 -31.697694,19.070208 8.282621,8.942553 9.804969,0.212413 -2.477484,11.475 7.877488,4.555308 25.29007,-11.220377 7.30231,9.787239 34.77055,-10.009722 13.472,-39.855 -18.55,-1.7256 z;
                                 m 167.22446,26.847521 -47.375,21.370382 -4.27979,12.752656 -24.089897,11.909931 9.177657,9.390069 12.93758,-2.025173 -7.40017,10.132448 4.74486,6.792899 25.29007,-10.772865 19.83279,17.395032 25.82021,-14.93241 22.86986,-54.623073 -32.42303,1.854539 z;
                                 m 180.64998,32.21773 -46.47997,18.23776 -4.72731,14.095208 -23.19486,13.7 5.59752,5.809931 12.93759,5.582622 -3.37252,11.027479 9.22003,1.87021 25.73759,-12.115415 4.40503,16.357355 31.23317,12.62467 81.97769,-81.135272 -88.95804,9.316083 z;
                                 m 191.83792,39.378007 -46.47997,20.02783 -4.27979,11.410105 -25.87997,13.252482 7.38759,8.047518 12.49007,1.554968 -6.50514,7.89486 5.6399,5.45035 38.71559,-10.772866 1.03706,9.339716 22.24007,15.49877 L 301.368,77.473574 197.43692,48.433445 Z;
                                 m 220.92654,31.770211 -50.95514,17.342726 -3.83227,8.725 -30.87218,16.574101 11.69693,13.321427 10.93536,-2.565389 -6.12715,10.414142 5.89842,5.261352 39.04363,-1.988341 26.93952,15.485491 51.8653,-15.896971 -2.74368,-57.046055 -48.08615,1.407022 z;
                                 m 234.46,6.3499 -47.375,11.525 -9.65,8.725 -26.775,13.7 5.15,7.6 10.7,2.45 -2.925,11.475 8.325,-3.5 23.5,-1.375 12.225,16.5 33.428,-17.17 13.472,-39.855 -18.55,-1.7256 z"
                         repeatCount="indefinite"/>
            </path>
        </g>
        <g id="body">
            <path 
                  fill="#000" 
                  d="m 331.31,7.3249 -6.775,0.525 -30.975,10.075 -57.278,-2.4793 -10.328,26.769 -30.808,15.043 14.39,18.767 33.689,23.042 48.311,-13.992 9.725,-11.2 9.7217,14.043 52.339,4.0971 15.257,-12.126 8.337,-35.96 -6.9554,-14.429 -19.775,-17.2 z">

                <animate attributeName="d" 
                         begin="G.click" 
                         end="S.click" 
                         dur="1s"
                         values="
                                 m 331.31,7.3249 -6.775,0.525 -30.975,10.075 -57.278,-2.4793 -10.328,26.769 -30.808,15.043 14.39,18.767 33.689,23.042 48.311,-13.992 9.725,-11.2 9.7217,14.043 52.339,4.0971 15.257,-12.126 8.337,-35.96 -6.9554,-14.429 -19.775,-17.2 z;
                                 m 350.59933,16.241199 -32.16706,-2.040489 -15.24106,6.409303 -52.686,-5.272368 -24.55121,26.876955 -30.808,15.043 14.39,18.767 37.95042,27.34399 55.10778,-30.198841 11.36133,1.790591 5.86264,12.102137 53.54008,10.392475 17.44086,-28.297832 -3.88341,-25.22842 -8.04583,-6.14608 -7.81639,-11.774337 z;
                                 m 287.85823,35.364384 -25.4552,2.149366 -52.90394,-0.483376 -22.76023,-4.103666 -22.10465,27.581183 -27.96536,23.164828 26.16665,19.985271 44.06365,12.39057 63.11402,-25.269503 15.81637,5.043656 7.3782,4.886617 11.63681,10.00475 58.70878,-29.181835 -20.49549,-28.650356 -13.45286,-7.931538 -15.71409,-6.235532 z;
                                 m 287.45214,30.491288 -33.98313,-1.099365 -43.15774,-0.889467 -37.37952,-6.540214 -10.328,26.769 -29.99582,30.068381 12.76564,13.081721 40.18646,14.107986 48.71709,-6.27626 26.78084,-13.230457 13.78261,4.296809 21.06997,3.284917 67.23669,0.462831 L 335.3421,45.166154 316.61005,36.016342 304.95688,33.02954 Z;
                                 m 270.80239,13.841542 -67.28261,7.428553 -11.07653,-4.138198 -23.57241,-0.04275 -32.66303,31.236005 -21.4679,15.449092 24.1362,15.112177 88.10524,9.640987 24.35161,-16.022459 19.87728,4.637564 23.52881,-3.825019 23.50651,15.061567 19.72401,-14.968641 18.08319,-9.564061 -34.9757,-39.200574 -27.49074,-7.859898 z;
                                 m 272.02067,5.7197143 -33.98313,3.3676396 -39.50291,8.0445431 -47.12572,-2.073209 -10.328,26.769 -28.37145,31.286655 53.37477,20.797457 39.37428,-2.135663 28.00643,-20.895556 19.0651,-7.139086 7.28515,7.139449 20.66388,-5.649094 57.4905,-6.440722 -3.03356,-16.467614 -14.67113,-31.078746 -31.95775,-2.9868024 z;
                                 m 271.61457,13.43545 -51.44505,11.083376 -39.90901,3.98363 -21.94805,1.175522 -20.48028,55.601488 46.75545,24.789194 26.57274,-10.47158 40.59256,-28.125512 11.35668,7.530841 20.28338,-5.920812 15.81307,12.418637 19.0395,-13.36483 8.75954,-4.410266 20.11365,-3.066598 -22.38687,-30.672655 -21.39937,-15.981726 z;
                                 m 284.20341,17.496364 -26.26739,4.585914 -42.75165,14.135914 -60.93282,6.048618 3.8852,13.367985 -30.808,15.043 -0.22929,31.761925 51.96311,17.76282 36.94044,-7.49455 31.24785,-20.134007 17.03134,-12.759026 12.94814,6.127557 15.257,-5.222452 55.4436,-3.472689 L 332.04153,46.574717 309.0178,22.065073 Z;
                                 M 275.2624,5.4466528 249.24415,13.579448 209.3188,35.2899 l -21.47661,-0.241714 -29.57124,3.945615 -17.83,32.04866 -7.98587,25.47976 24.73866,17.671789 85.45494,-21.599791 20.46541,-23.28297 24.48978,17.175622 24.1454,-6.643316 14.36197,-17.49621 -3.29845,-29.24724 -17.2483,-9.953826 -3.21686,-14.0673783 z;
                                 m 282.87019,1.8665136 -12.14521,-0.3700347 -27.39486,5.5998266 -18.7915,16.7639465 -32.25635,16.028583 -41.54842,59.347219 17.0751,12.949276 46.66701,0.21861 32.20037,-20.704758 11.51507,-19.702829 7.93163,10.015345 24.14541,2.754548 30.02507,-22.866419 -4.19349,-30.589792 14.52544,-3.688583 L 299.215,6.3937965 Z;
                                 m 288.68792,7.6842397 -21.54308,0.5249999 -15.31189,7.3898954 -19.68654,19.001534 -25.54359,7.525753 -28.57041,-0.620107 -4.85325,70.231485 c 10.03629,3.80219 49.42943,20.83085 41.2968,14.53919 l 27.7252,-11.3069 34.33846,-27.758146 13.30183,3.750102 12.06243,6.782204 13.46694,-18.838762 10.12707,-14.479167 2.44246,-24.274382 -11.27217,-23.465243 z;
                                 m 268.10211,14.397 -25.57073,21.558316 -5.01899,7.389896 -37.13972,5.576013 -16.59324,29.901621 10.36359,41.446524 26.47298,9.81665 32.79396,-17.23456 36.22803,-6.3842 3.45976,-10.30497 22.25219,-5.200244 14.30002,-19.173803 7.20169,-23.761454 -3.29845,-26.114618 -25.30362,-7.268722 -23.35513,-1.984409 z;
                                 m 332.99214,17.529623 -43.91894,5.000172 -21.57715,19.472866 -48.77517,-2.031783 4.8876,41.537073 -27.22786,16.83307 43.92614,26.374799 20.711,-1.12394 25.48762,-12.64945 3.01224,-12.095035 10.16921,7.777755 22.35534,-10.670969 25.10238,2.194552 26.68521,-29.247237 -0.69016,-22.931831 -9.92961,-11.829792 z;
                                 m 331.31,7.3249 -6.775,0.525 -30.975,10.075 -57.278,-2.4793 -10.328,26.769 -30.808,15.043 14.39,18.767 33.689,23.042 48.311,-13.992 9.725,-11.2 9.7217,14.043 52.339,4.0971 15.257,-12.126 8.337,-35.96 -6.9554,-14.429 -19.775,-17.2 z" 
                         repeatCount="indefinite"/>
            </path>
        </g>
        <g id="tail">
            <path 
                  fill="#000" 
                  d="m 482.15,51.699 -36.72,-0.528 -59.17,-7.66 -11.62,-10.83 -6.2434,51.773 37.677,-16.113 46.226,12.151 z">

                <animate attributeName="d" 
                         begin="G.click" 
                         end="S.click" 
                         dur="1s"
                         values="
                                 m 482.15,51.699 -36.72,-0.528 -59.17,-7.66 -11.62,-10.83 -6.2434,51.773 37.677,-16.113 46.226,12.151 z;
                                 m 479.1405,60.390516 -28.73708,-12.409509 -45.28037,-1.066902 -33.89191,-7.508711 -1.07397,23.757588 38.26775,11.070631 41.14493,1.156707 z;
                                 m 436.66777,79.332393 -26.16163,-22.050843 -68.10401,-4.411269 -16.89919,-8.393452 25.43173,37.965893 39.70745,3.379387 28.35799,-3.280473 z;
                                 m 435.04341,71.616657 -37.93828,-12.30465 -36.02279,-2.380812 -49.3865,-21.794467 -7.05558,55.021731 58.79375,-5.554624 38.10417,1.592624 z;
                                 m 404.99264,44.002444 -36.3139,-4.182823 -18.56087,-10.096548 -43.70122,-9.205635 31.11701,43.651173 74.63132,1.755021 8.86559,-11.808392 z;
                                 M 412.70838,33.444068 382.48584,18.70287 354.58487,15.915966 308.44711,9.5529712 l -0.15203,31.0623398 47.0171,5.003752 32.82499,-3.280473 z;
                                 m 417.17539,35.880616 -35.90782,-15.14729 -29.52533,-6.441725 -54.2596,4.195381 25.43173,24.158786 64.47903,4.191569 24.29707,-1.250016 z;
                                 m 421.64239,36.286707 -27.3799,-13.929016 -35.21061,-7.253908 -56.69614,7.444112 -7.05558,24.158786 62.85466,0.536747 47.03819,-0.03174 z;
                                 M 410.43929,30.129989 380.43206,16.623986 343.63792,6.7263986 285.0286,9.769437 l 16.57998,21.789336 61.39542,12.975629 30.11538,-4.85466 z;
                                 M 399.25136,48.4782 364.76894,10.806259 332.44999,4.9363288 291.29384,6.1892976 328.90714,32.006291 367.47918,48.11454 384.16903,46.840019 Z;
                                 M 410.43928,45.793096 398.33274,26.02185 361.53861,12.544124 l -51.89657,2.148004 4.94454,26.712027 59.60535,2.235212 26.53523,1.410583 z;
                                 m 415.36198,26.997367 -44.3278,-10.373382 -28.2913,4.870486 -27.73062,-0.5371 15.68495,30.292166 46.17983,0.89266 45.77848,-12.014938 z;
                                 m 471.30165,43.55551 -44.3278,-0.975517 -21.57854,5.765521 -56.81925,-5.012275 30.0055,32.977271 40.80963,2.235212 29.66786,-16.042594 z;
                                 m 482.15,51.699 -36.72,-0.528 -59.17,-7.66 -11.62,-10.83 -6.2434,51.773 37.677,-16.113 46.226,12.151 z"
                         repeatCount="indefinite"/>
            </path>
        </g>
        <g id="front1">
            <path 
                  fill="#000" 
                  d="m 247.06,84.186 14.528,34.603 26.415,11.358 17.698,-8.4527 -1.3207,-5.8112 -32.754,-4.2263 13.471,-35.396 z">

                <animate attributeName="d" 
                         begin="G.click" 
                         end="S.click" 
                         dur="1s"
                         values="m 247.06,84.186 14.528,34.603 26.415,11.358 17.698,-8.4527 -1.3207,-5.8112 -32.754,-4.2263 13.471,-35.396 z;
                                 m 211.87039,62.579002 -8.63059,70.271158 28.39929,15.38096 8.0314,-5.30569 -2.8005,-6.75469 -16.25204,-5.55787 50.73636,-55.405783 z;
                                 m 189.55822,56.281662 -39.64535,49.106318 15.45053,23.13465 18.51019,3.73005 -1.72679,-13.12085 -15.69817,-9.50549 111.33185,-34.821931 z;
                                 m 221.3784,37.673989 -65.78025,32.790137 5.70434,24.759016 15.26145,13.882328 8.0194,-5.8112 -10.01288,-22.906506 98.39372,-8.777687 z;
                                 m 149.59807,67.555434 -52.477072,16.328889 -31.249975,23.540737 3.07871,8.19705 17.765595,-4.18683 22.474432,-17.221227 111.33902,-16.715799 z;
                                 m 121.17168,63.49452 -50.040532,8.207058 -19.879417,15.418914 4.296985,8.603138 18.577777,-4.592926 25.317067,-8.693305 89.41009,6.431414 z;
                                 m 165.43563,63.881431 -80.091288,17.953254 -26.78297,1.611807 -5.043118,6.166589 21.014326,9.214181 46.02773,-6.256757 47.17658,-2.502598 z;
                                 m 132.94832,81.749452 -13.4923,13.892339 -27.595156,7.703179 -26.972051,-0.33087 4.364579,11.24463 29.377982,4.70772 84.943086,-21.182807 z;
                                 m 161.47624,104.23611 -36.04146,40.42072 -22.81191,8.22538 -7.810487,9.448 39.850897,0.007 18.7105,-19.44189 73.88585,-43.898829 z;
                                 m 166.84646,111.39638 17.2131,18.04487 -25.49701,32.39131 32.01855,-1.29242 11.6573,-32.66224 17.36795,-18.99438 0.493,-25.998137 z;
                                 m 202.64785,123.03183 25.71593,10.43707 8.51431,21.20338 -6.46794,9.89551 19.2651,-2.23106 0.36228,-11.38658 -9.7999,-46.13642 z;
                                 m 217.41592,129.29708 18.10814,-3.88349 22.83486,11.358 60.65966,-12.03285 8.07717,-15.20906 -61.84264,15.91198 -23.22542,-25.550617 z;
                                 m 242.47689,124.8219 19.00318,-2.09342 12.09444,-4.3051 51.26181,24.66358 6.28708,-17.44665 -29.62136,-4.2263 -49.18144,-28.235727 z;
                                 m 247.06,84.186 14.528,34.603 26.415,11.358 17.698,-8.4527 -1.3207,-5.8112 -32.754,-4.2263 13.471,-35.396 z"                  
                         repeatCount="indefinite"/>
            </path>
        </g>        
        <g id="front2">
            <path 
                  fill="#000" 
                  d="m 259.21,88.676 31.698,25.886 13.736,6.8678 18.49,1.849 17.298,-5.9402 0.92774,-9.6444 -18.733,3.6266 -18.775,-7.3246 -16.641,-25.094 z">

                <animate attributeName="d" 
                         begin="G.click" 
                         end="S.click" 
                         dur="1s"
                         values="m 259.21,88.676 31.698,25.886 13.736,6.8678 18.49,1.849 17.298,-5.9402 0.92774,-9.6444 -18.733,3.6266 -18.775,-7.3246 -16.641,-25.094 z;                   
                                 m 207.60252,92.517975 46.35116,37.494675 12.11163,8.08607 20.11437,3.06728 12.83099,-8.37675 -11.255,-5.58349 -13.04772,2.40833 -10.65317,-9.35506 -40.43003,-64.146519 z;
                                 m 174.04438,74.115888 33.2088,52.628852 20.23346,6.8678 11.58644,-2.618 -1.3822,-6.3463 -7.60018,-3.95912 -10.61117,-0.43431 0.71739,-19.91343 94.56407,-40.706803 z;
                                 m 167.01152,38.40037 30.08937,48.141325 -11.44166,6.461709 14.02299,20.123116 15.67364,0.96335 9.45565,-5.1774 -4.11371,-6.52568 -12.68363,-4.075869 81.86645,-65.698359 z;
                                 m 141.8496,64.329699 -51.956826,39.287011 11.705546,12.14699 8.33771,1.44291 2.27262,-14.06203 6.61302,-3.959117 32.84061,-1.246497 31.98642,-4.888051 43.86661,-4.789434 z;
                                 m 133.72777,72.045435 -25.96698,24.261635 -33.776689,14.17745 -19.276498,4.69163 -0.976112,7.86691 15.547029,5.78707 22.282229,-5.30741 56.351901,-21.94389 38.18134,-21.439176 z;
                                 m 154.03233,86.239452 4.48988,12.078893 -16.31476,14.989625 -14.80949,20.12311 -23.71723,11.52174 35.85159,0.91397 18.22132,-21.14498 25.48896,-11.7916 22.74986,-46.616843 z;
                                 m 161.34198,96.797828 14.64216,12.891082 -21.59395,25.95409 -22.11914,11.1891 40.03912,-0.66102 5.39474,-7.61394 14.97259,-17.89624 25.08287,-26.004802 -30.04202,-6.413796 z;
                                 m 169.59859,93.510515 31.698,25.886005 8.81331,27.4536 -9.7036,14.37949 24.9058,-0.12248 3.61284,-10.53943 -3.96492,-22.32941 21.50156,-42.678473 -30.06652,4.442139 z;
                                 m 196.89715,97.985689 40.64835,23.648411 29.39911,31.92877 -7.46601,11.24687 23.56324,-2.36006 -2.20488,-17.2522 -22.31314,-22.3294 -8.4821,-20.30261 -11.71831,-28.226621 z;
                                 m 225.98578,109.17362 47.36111,17.38317 24.0289,13.58056 24.75524,-5.75879 2.97745,-7.73027 -10.70772,-4.72171 -18.28548,3.6266 -16.98493,-12.69481 -22.45872,-27.331588 z;
                                 m 232.25102,105.14597 15.58738,24.99096 25.81896,27.90112 -1.64828,7.21918 19.08807,-1.91254 -8.47013,-15.46213 3.19535,-6.6663 -35.78065,-35.07068 14.68521,-29.569175 z;
                                 m 251.94179,100.22328 20.51006,18.2782 19.55372,21.63587 45.78857,17.95963 8.79517,-7.73027 -9.36516,-5.16923 -24.99825,-10.69396 -10.71968,-14.93239 -18.43107,-28.674139 z;
                                 m 259.21,88.676 31.698,25.886 13.736,6.8678 18.49,1.849 17.298,-5.9402 0.92774,-9.6444 -18.733,3.6266 -18.775,-7.3246 -16.641,-25.094 z"               
                         repeatCount="indefinite"/>
            </path>
        </g>
        <g id="back1">
            <path 
                  fill="#000" 
                  d="m 311.78,88.676 -6.5056,16.008 -13.57,9.8787 -20.603,8.4527 24.2,0.36581 27.573,-12.517 13.873,-9.1113 20.73,-19.152 -56.263,-8.4527 z">

                <animate attributeName="d" 
                         begin="G.click" 
                         end="S.click" 
                         dur="1s"
                         values="m 311.78,88.676 -6.5056,16.008 -13.57,9.8787 -20.603,8.4527 24.2,0.36581 27.573,-12.517 13.873,-9.1113 20.73,-19.152 -56.263,-8.4527 z;
                                 m 316.47585,120.43545 -8.57969,20.89077 -22.42221,11.24602 -5.55254,10.62798 14.80391,0.25996 29.09775,-15.39118 7.64282,-16.63367 12.7842,-77.493474 -100.03534,13.981629 z;
                                 m 319.08964,108.16839 39.78882,19.25673 1.45538,15.97007 -24.25782,5.20397 42.47411,1.17799 -7.35086,-36.47639 -13.74121,-8.70521 -17.71697,-42.03818 -54.23254,-2.749288 z;
                                 m 370.25716,94.767371 48.72283,12.759269 25.82086,25.31017 14.72695,-0.0752 -3.82031,-11.81693 L 426.4277,90.559641 414.31085,87.945803 400.11699,67.169438 323.54943,57.904555 Z;
                                 m 308.53128,83.009902 13.79896,8.292264 22.97823,5.411695 23.66096,-4.136133 16.48426,2.396267 27.97909,0.884016 -23.08131,-9.1113 -39.77762,-13.872814 -64.38482,-7.234426 z;
                                 m 332.49067,81.385537 19.48424,-4.296569 32.72442,13.939614 15.94523,-1.699585 -0.57158,-7.756017 -11.81786,-2.770807 -2.37066,-7.486935 L 334.73629,47.29014 257.76263,59.5481 Z;
                                 m 304.47036,72.432345 44.25582,7.07399 9.17111,-4.334499 21.63051,9.670974 13.64162,0.771902 4.0197,-6.831721 -10.49248,-10.735665 -52.77254,-16.309361 -53.01427,3.730042 z;
                                 m 313.40437,83.396812 38.97663,-0.235655 17.69904,9.472609 15.53913,6.422243 3.08325,-7.756018 -5.3204,-8.862177 -11.71076,-2.613838 -1.19894,-15.903269 -90.78076,-13.325797 z;
                                 m 292.42882,89.035342 22.58303,0.344892 14.17607,11.668766 16.09343,6.66263 6.2993,-3.21433 -1.51563,-10.726926 -21.03335,-8.216264 -8.35863,-28.549868 -43.285,22.873516 z;
                                 m 291.32521,85.432029 16.07884,28.114141 9.25339,6.74608 11.17073,-1.39268 1.82413,-9.92709 -9.57094,-8.93686 -2.23763,-28.354549 -27.92631,-40.440236 -51.38305,32.907894 z;
                                 m 290.63875,103.80341 -9.19071,9.74276 -6.40972,11.66877 -3.59734,15.16546 8.08938,8.86864 6.09217,-13.41203 11.18789,-18.95669 22.61277,-76.40024 -96.08124,42.603425 z;
                                 m 272.73805,119.46652 -22.16871,14.21793 -9.09482,9.8787 -0.46472,10.24277 9.43193,2.6034 11.46237,-12.06949 37.59142,-26.56447 -20.88911,-29.89242 -30.30699,14.8182 z;
                                 m 299.58909,104.25093 4.23482,9.29524 -23.41538,13.45884 -10.75762,7.11015 9.43193,6.63106 28.91555,-5.80424 17.00562,-8.66379 8.64703,-54.953396 -54.47293,21.08345 z;
                                 m 311.78,88.676 -6.5056,16.008 -13.57,9.8787 -20.603,8.4527 24.2,0.36581 27.573,-12.517 13.873,-9.1113 20.73,-19.152 -56.263,-8.4527 z"            
                         repeatCount="indefinite"/>
            </path>
        </g>
        <g id="back2">
            <path 
                  fill="#000" 
                  d="m 313.62,71.774 49.826,19.562 -1.4868,34.06 -7.228,16.313 -8.4502,8.1296 -23.401,0.16815 21.91,-14.837 2.2412,-17.162 z">

                <animate attributeName="d" 
                         begin="G.click" 
                         end="S.click" 
                         dur="1s"
                         values="m 313.62,71.774 49.826,19.562 -1.4868,34.06 -7.228,16.313 -8.4502,8.1296 -23.401,0.16815 21.91,-14.837 2.2412,-17.162 z;
                                 m 296.29469,88.367547 68.45563,-9.996133 -1.11514,33.320536 17.84775,21.14162 6.59756,28.42213 -29.68192,0.71984 17.17868,-11.56515 -8.54158,-12.21923 z;
                                 m 296.41909,74.287859 54.95775,-22.893877 22.7651,32.174606 23.22885,5.754624 22.81885,15.439268 14.36549,14.38136 -7.73464,4.65537 -29.7107,-19.08126 z;
                                 m 332.3002,64.870447 72.16103,1.693979 21.25432,1.978781 22.41667,13.064269 14.29091,2.444321 6.64977,10.320434 -8.54686,3.437112 -25.37301,-9.852355 z;
                                 m 389.153,97.783028 -71.59532,-8.864394 34.24924,-30.50853 18.76185,16.313 21.60056,1.632138 12.33504,10.726526 30.03183,4.249295 -3.03799,15.325307 z;
                                 m 298.59463,53.112976 34.39452,-15.361856 9.07158,14.161522 30.5385,0.06934 20.78838,11.378331 26.14214,6.259521 1.19934,9.934574 -10.34763,0.299929 z;
                                 m 300.62508,62.433898 50.63818,-14.549675 21.66041,-0.457768 24.04103,15.500818 30.53458,6.099143 2.58884,8.289977 -13.82604,4.655387 -37.14966,-13.507178 z;
                                 m 291.69106,51.469432 54.29301,3.318344 38.31016,-0.863859 19.98012,17.531275 11.44828,3.256503 12.33504,6.665612 -5.29813,10.340666 -31.87047,-12.694995 z;
                                 m 320.22483,82.426239 -7.90374,-20.267043 32.97204,-4.874011 19.17552,17.655552 17.50581,0.521805 5.68762,14.488706 -13.89138,2.616177 -29.98005,-15.371931 z;
                                 m 254.82497,67.820386 27.00622,-27.960332 59.88179,22.795339 9.77766,28.843486 16.61078,11.709741 -7.7379,10.01353 -16.57649,-6.78169 -7.60418,-19.399584 z;
                                 m 255.38836,72.422239 44.83018,-36.327723 26.27885,59.22964 -10.36062,23.920794 -12.92538,31.84802 -6.39534,-1.62192 -4.046,-11.25686 12.98161,-25.21731 z;
                                 m 256.54552,60.925834 70.04617,-11.714266 -9.04464,52.377842 -3.64786,11.83782 -38.43387,38.56078 -8.63293,-10.57227 26.38518,-31.39514 4.47878,-9.5542 z;
                                 m 293.37379,71.685823 48.93096,5.241447 -42.21088,67.6238 -23.78614,13.6279 -17.40055,-2.1633 2.55501,-7.43965 16.09227,-6.78169 24.61707,-23.42724 z;
                                 m 313.62,71.774 49.826,19.562 -1.4868,34.06 -7.228,16.313 -8.4502,8.1296 -23.401,0.16815 21.91,-14.837 2.2412,-17.162 z"   
                         repeatCount="indefinite"/>
            </path>
        </g>
    </svg>
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console