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 viewBox="0 0 335 316" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="Magic-man">
    <g id="Cat-body">
      <g id="Cat">
        <path d="M167.455,15.223c0,0 -3.324,-2.984 -7.41,-3.181c-4.087,-0.198 -14.822,-1.061 -14.822,-1.061c0,0 2.072,-8.02 2.117,-10.606c-2.329,0.583 -6.196,5.237 -6.352,5.303c-0.156,0.066 -5.99,-0.591 -7.411,1.061c-1.356,-0.907 -5.167,-3.182 -5.167,-3.182c0,0 -0.534,5.194 3.05,7.424c0.669,2.2 3.069,5.78 3.176,6.364c0.107,0.583 1,1.751 4.235,1.06c1.427,1.796 3.951,6.281 4.235,7.424c0.283,1.143 4.926,2.172 5.293,3.182c0.367,1.011 1.692,6.892 -1.059,9.545c-2.75,2.653 -4.237,5.14 -2.117,5.303c2.12,0.164 20.269,-19.733 22.232,-28.636Z" style="fill:#fea2ab;" id="cat-one"/>
        
<path d="M167.455,15.223c0,0 -3.324,-2.985 -7.41,-3.182c-4.087,-0.197 -14.822,-1.061 -14.822,-1.061c0,0 4.322,-4.838 4.367,-7.424c-2.329,0.583 -8.446,2.056 -8.602,2.121c-0.156,0.066 -5.99,-0.591 -7.411,1.061c-1.356,-0.906 -5.167,-3.182 -5.167,-3.182c0,0 -0.534,5.194 3.05,7.424c0.669,2.201 3.069,5.78 3.176,6.364c0.107,0.583 1,1.751 4.235,1.06c1.427,1.797 3.951,6.281 4.235,7.425c0.283,1.143 4.926,2.171 5.293,3.181c0.367,1.011 1.692,6.893 -1.059,9.546c-2.75,2.653 -4.237,5.139 -2.117,5.303c2.12,0.163 20.269,-19.734 22.232,-28.636Z" style="fill:#fea2ab;" id="cat-two" display="none"/>
      </g>
      <path d="M144.164,8.86c0,0 -1.811,-2.355 -2.117,-2.121c1.228,-1.287 3.176,-3.182 3.176,-3.182c0,0 -1.339,4.64 -1.059,5.303Z" style="fill:#d58089;" id="ear-right-inner"/>
      <path d="M144.164,8.86c0,0 0.371,-1.688 -1.72,-2.341c1.228,-1.287 4.278,-1.591 4.278,-1.591c0,0 -2.839,3.269 -2.558,3.932Z" style="fill:#d58089;" id="ear-right-inner2" display="none"/>
      <path d="M131.46,8.86c0,0 0.57,-2.287 -2.117,-3.182c0.225,0.89 0.537,2.878 2.117,3.182Z" style="fill:#d58089;"/>
      <ellipse cx="139.955" cy="13.102" rx="1.084" ry="1.061" style="fill:#353535;" id="eye-right"/>
      <ellipse cx="134.661" cy="13.102" rx="1.084" ry="1.061" style="fill:#353535;" id="eye-left"/>
      <path d="M135.703,15.754c0,0 0.852,2.519 0,2.868c0.03,-0.039 3.595,0.208 3.125,0c-0.47,-0.208 -1.748,-0.701 -1.059,-2.868c-1.248,1.092 -2.066,0 -2.066,0Z" style="fill:#353535;"/>
      <path d="M139.929,18.405c0,0 3.475,-3.063 4.235,-6.363c1.004,0.172 1.951,4.552 -3.125,7.424c-0.238,-0.13 -0.964,0.189 -1.11,-1.061Z" style="fill:#d58089;"/>
      <path d="M155.109,34.149c0,0 -0.255,-5.255 -1.153,-5.176c0.691,-1.175 4.886,-2.278 8.116,-6.16c-1.779,4.89 -6.963,11.336 -6.963,11.336Z" style="fill:#d58089;"/>
    </g>
    <path d="M35.119,269.766c0,0 -1.457,-5.873 0,-8.485c1.458,-2.611 -0.874,-9.012 -6.352,-13.787c-5.477,-4.776 -15.162,-14.608 -16.939,-20.152c-1.777,-5.543 -9.66,-8.615 -10.587,-4.242c-0.927,4.373 -2.691,8.148 7.411,15.909c10.102,7.761 14.603,14.916 14.822,17.957c0.219,3.041 1.013,13.053 4.235,13.861c3.221,0.807 7.41,-1.061 7.41,-1.061Z" style="fill:#f69649;"/>
    <path d="M26.65,271.887c0,0 -6.196,-4.449 -9.528,-4.242c-3.333,0.207 -2.614,-4.237 -3.176,-6.364c-0.563,-2.126 -4.801,-9.176 -8.47,-8.484c-3.669,0.692 -6.715,2.193 -4.971,5.303c1.743,3.11 4.511,2.659 6.03,4.242c1.519,1.583 4.368,6.245 5.293,8.687c0.925,2.442 4.645,2.644 6.352,2.98c1.708,0.335 10.255,1.769 8.47,-2.122Z" style="fill:#de3153;"/>
    <path d="M284.97,267.645c0,0 -0.802,-4.251 5.293,-10.606c6.095,-6.355 9.528,-10.606 9.528,-10.606c0,0 4.433,-5.228 7.411,-1.06c2.978,4.167 1.824,5.123 -2.117,8.13c-3.941,3.008 -10.479,8.665 -10.587,12.021c-0.109,3.356 0,4.242 0,4.242c0,0 -7.385,2.453 -9.528,-2.121Z" style="fill:#e22f50;"/>
    <path d="M295.557,268.714c0,0 2.181,-6.274 4.234,-7.433c0.574,-0.323 1.934,-2.654 3.615,-3.093c3.405,-0.889 6.375,-1.265 0.62,5.458c-1.199,1.402 -2.321,0.903 -5.293,2.938c-0.878,0.601 0,3.182 0,3.182c0,0 -2.812,6.033 -3.176,-1.052Z" style="fill:#e22f50;"/>
    <path id="sand" d="M8.652,284.615c0,0 -1.035,8.565 13.763,9.545c14.798,0.98 23.012,4.344 25.409,5.303c2.396,0.959 52.934,8.485 52.934,8.485c0,0 61.968,12.249 93.165,5.303c31.196,-6.946 31.76,-2.122 31.76,-2.122c0,0 48.451,-7.139 52.935,-9.545c4.483,-2.406 41.246,-10.304 44.464,-10.606c3.219,-0.302 20.143,-6.739 5.294,-12.727c-14.849,-5.988 -62.18,-18.628 -80.46,-15.779c-18.281,2.849 -35.007,-7.114 -45.524,-8.615c-10.517,-1.5 -58.599,2.2 -79.402,3.109c-20.802,0.908 -42.421,9.954 -53.993,11.013c-11.571,1.058 -40.242,1.584 -43.406,2.848c-3.163,1.263 -20.7,6.382 -16.939,13.788Z" style="fill:#cec4b2;"/>
    <path id="shoe.-left" d="M164.279,257.039l0,8.485c0,0 -7.546,-0.142 -13.771,2.121c-6.208,2.257 -10.579,0 -10.579,0l0,-1.061c0,0 11.679,-2.484 12.705,-4.242c1.026,-1.758 2.351,-5.271 3.176,-5.351c0.825,-0.079 8.469,0.048 8.469,0.048Z" style="fill:#2c2c2c;"/>
    <path id="shoe.-right" d="M176.984,257.039l0,7.424c0,0 4.854,0.513 7.41,0c1.738,-0.348 7.758,4.485 9.529,4.243c0.982,-0.135 9.528,0 9.528,0c0,0 -1.302,-2.198 -3.176,-2.122c-1.875,0.077 -9.991,-4.008 -11.646,-5.303c-1.166,-0.912 -3.275,-4.135 -3.176,-4.242c0.099,-0.107 -8.469,0 -8.469,0Z" style="fill:#2c2c2c;"/>
    <g id="sock.-right">
      <path d="M176.984,217.797l0,39.242l8.469,0l0,-38.181c0,0 -4.761,0.848 -8.469,-1.061Z" style="fill:#4e31fe;stroke:#2c2c2c;stroke-width:0.75px;"/>
      <g id="Stripes">
        <path d="M182.277,222.039l-5.293,7.425l0,1.06l5.293,-7.424l0,-1.061Z" style="fill:#dbdbdb;"/>
        <path d="M180.16,231.585l5.293,7.424l0,1.061l-5.293,-7.425l0,-1.06Z" style="fill:#dbdbdb;"/>
        <path d="M180.16,246.433l5.293,7.424l0,1.061l-5.293,-7.424l0,-1.061Z" style="fill:#dbdbdb;"/>
        <path d="M182.277,239.009l-5.293,7.424l0,1.061l5.293,-7.424l0,-1.061Z" style="fill:#dbdbdb;"/>
      </g>
    </g>
    <g id="sock.-left">
      <path d="M155.81,217.797l0,39.242l8.469,0l0,-39.242c0,0 -3.729,1.466 -8.469,0Z" style="fill:#4e31fe;stroke:#2c2c2c;stroke-width:0.75px;"/>
      <g id="Stripes1">
        <path d="M161.103,222.039l-5.293,7.425l0,1.06l5.293,-7.424l0,-1.061Z" style="fill:#dbdbdb;"/>
        <path d="M158.986,231.585l5.293,7.424l0,1.061l-5.293,-7.425l0,-1.06Z" style="fill:#dbdbdb;"/>
        <path d="M158.986,246.433l5.293,7.424l0,1.061l-5.293,-7.424l0,-1.061Z" style="fill:#dbdbdb;"/>
        <path d="M161.103,239.009l-5.293,7.424l0,1.061l5.293,-7.424l0,-1.061Z" style="fill:#dbdbdb;"/>
      </g>
    </g>
    <path id="pant.-right" d="M194.981,162.646c0,0 -6.128,26.122 -3.176,40.303c2.952,14.18 -3.176,14.848 -3.176,14.848c0,0 -4.11,3.08 -11.645,0c-6.592,-3.165 -4.235,-6.364 -4.235,-6.364c0,0 0.77,-6.951 2.131,-9.545c0.066,-3.522 0,-37.121 0,-37.121l21.16,-10.606c0,0 -0.741,7.068 -1.059,8.485Z" style="fill:#de3659;stroke:#2c2c2c;stroke-width:0.75px;"/>
    <path id="pant.-left" d="M169.573,163.707c0,0 -0.511,19.174 -1.059,21.212c-0.548,2.038 -0.209,6.133 0,8.484c0.209,2.352 0.276,9.35 -1.059,11.667c1.317,2.232 2.157,9.286 -1.058,11.666c-3.216,2.381 -15.385,2.001 -14.822,-3.181c-3.786,-5.2 0.883,-11.629 1.059,-12.727c0.175,-1.099 0.878,-19.214 0,-21.212c-0.878,-1.999 -2.118,-12.728 -2.118,-12.728l0,-7.424l0,-2.121c0,0 17.897,6.311 19.057,6.364Z" style="fill:#de3659;stroke:#2c2c2c;stroke-width:0.75px;"/>
    <g id="pant.-shadows">
      <path d="M168.514,198.706c0,0 -3.447,-17.409 -6.352,-21.483c-2.905,-4.073 0.931,-18.538 6.352,-10.176c0.057,9.704 -1.059,16.96 -1.059,16.96c0,0 0.984,13.043 1.059,14.699Z" style="fill:#d5274b;"/>
      <path d="M193.923,163.707c0,0 -12.217,22.62 -4.235,39.242c1.33,4.387 2.117,7.424 2.117,7.424c0,0 -1.632,-21.869 -1.059,-25.454c0.574,-3.586 3.177,-21.212 3.177,-21.212Z" style="fill:#d5274b;"/>
    </g>
    <g id="Cape">
      <path id="cape.-shadow" d="M196.04,155.222c0,0 -0.788,5.128 -1.059,6.363c-0.271,1.236 -4.025,2.725 -4.235,3.182c-0.209,0.458 -19.621,10.928 -35.995,1.061c-1.262,-0.807 -4.428,-2.102 -4.235,-2.121c0.007,-1.116 0,-6.364 0,-6.364c0,0 24.41,13.429 45.524,-2.121Z" style="fill:#2d2d2d;fill-opacity:0.5;"/>
      <path id="cape1" d="M130.401,166.888c-1.054,-2.235 -11.882,-110.706 30.702,-141.059c11.144,10.956 22.233,-1.06 22.233,-1.06c0,0 48.662,45.148 31.76,142.119c-9.527,-18.475 -25.408,-4.242 -25.408,-4.242c0,0 -16.818,10.095 -40.23,-2.121c-10.931,-5.114 -19.057,6.363 -19.057,6.363Z" style="fill:#292929;"/>
      <path id="cape2" d="M130.401,166.888c-1.054,-2.235 -11.882,-110.707 30.702,-141.059c11.144,10.955 22.233,-1.061 22.233,-1.061c0,0 48.662,45.149 31.76,142.12c-5.71,-6.504 -8.908,-1.993 -8.908,-1.993c0,0 -7.361,7.029 -19.414,2.429c-9.695,-3.7 -15.421,-3.181 -28.714,0.472c-20.324,10.375 -28.327,0.626 -27.659,-0.908Z" style="fill:#292929;" display="none"/>
      <path id="cape3" d="M130.401,166.888c-1.054,-2.235 -11.882,-110.707 30.702,-141.059c11.144,10.955 22.233,-1.061 22.233,-1.061c0,0 48.662,45.149 31.76,142.12c-1.019,5.847 -8.908,6.257 -8.908,6.257c0,0 -4.27,-0.71 -12.664,-8.071c-5.583,-4.896 -16.543,5.392 -24.204,5.844c-5.681,0.335 -10.672,-9.099 -21.76,-6.872c-17.753,10.679 -17.827,4.376 -17.159,2.842Z" style="fill:#292929;" display="none"/>
      <path d="M163.548,102.242l-0.036,0.122l-0.038,0.125l-0.041,0.127l-0.017,0.052l-0.024,0.076l-0.042,0.13l-0.044,0.131l-0.006,0.017l-0.036,0.116l-0.042,0.135l-0.014,0.044l-0.025,0.094l-0.038,0.14l-0.04,0.141l-0.042,0.143l-0.043,0.144l-0.046,0.146l-0.046,0.147l-0.049,0.148l-0.05,0.149l-0.052,0.151l-0.053,0.151l-0.055,0.153l-0.056,0.154l-0.057,0.154l-0.059,0.156l-0.061,0.157l-0.061,0.157l-0.063,0.158l-0.064,0.159l-0.065,0.16l-0.067,0.161l-0.059,0.141l-0.008,0.02l-0.068,0.162l-0.07,0.162l-0.07,0.163l-0.071,0.164l-0.073,0.163l-0.073,0.165l-0.074,0.164l-0.075,0.165l-0.075,0.165l-0.077,0.166l-0.077,0.165l-0.077,0.166l-0.158,0.331l-0.16,0.331l-0.162,0.331l-0.163,0.329l-0.165,0.329l-0.166,0.327l-0.167,0.325l-0.076,0.146l-0.092,0.177l-0.167,0.32l-0.167,0.317l-0.168,0.314l-0.166,0.31l-0.166,0.306l-0.164,0.301l-0.105,0.19l-0.058,0.106l-0.161,0.291l-0.159,0.286l-0.157,0.28l-0.154,0.273l-0.151,0.266l-0.148,0.259l-0.145,0.252l-0.013,0.024l-0.127,0.22l-0.136,0.236l-0.132,0.227l-0.25,0.427l-0.229,0.388l-0.112,0.189l-0.093,0.157l-0.179,0.302l-0.152,0.254l-0.123,0.202l-0.09,0.149l-0.075,0.122l-0.167,0.04l-0.04,-0.168l0.075,-0.121l0.091,-0.148l0.123,-0.201l0.152,-0.252l0.181,-0.3l0.093,-0.157l0.112,-0.189l0.227,-0.388l0.247,-0.427l0.131,-0.227l0.135,-0.236l0.125,-0.22l0.014,-0.024l0.142,-0.253l0.145,-0.26l0.149,-0.267l0.152,-0.273l0.154,-0.281l0.156,-0.286l0.158,-0.292l0.057,-0.106l0.103,-0.191l0.16,-0.302l0.162,-0.307l0.163,-0.311l0.163,-0.314l0.164,-0.318l0.163,-0.321l0.09,-0.178l0.073,-0.146l0.162,-0.326l0.161,-0.328l0.16,-0.329l0.158,-0.331l0.157,-0.331l0.154,-0.332l0.152,-0.332l0.075,-0.165l0.075,-0.166l0.073,-0.165l0.073,-0.165l0.072,-0.165l0.071,-0.165l0.071,-0.164l0.069,-0.163l0.069,-0.163l0.067,-0.163l0.067,-0.162l0.065,-0.161l0.008,-0.02l0.056,-0.141l0.063,-0.16l0.062,-0.16l0.06,-0.158l0.06,-0.158l0.058,-0.157l0.056,-0.155l0.056,-0.155l0.053,-0.154l0.053,-0.152l0.051,-0.152l0.05,-0.15l0.048,-0.148l0.046,-0.148l0.045,-0.146l0.044,-0.145l0.041,-0.143l0.04,-0.142l0.039,-0.14l0.036,-0.138l0.035,-0.137l0.022,-0.092l0.008,-0.044l0.023,-0.135l0.019,-0.115l0.002,-0.018l0.013,-0.132l0.011,-0.13l0.006,-0.075l0.003,-0.052l0.005,-0.126l0.003,-0.122l0.001,-0.123l0.375,-0.261l0.28,0.361Z" style="fill:#aca9a9;"/>
      <path d="M194.224,37.9l0.012,0.156l0.012,0.159l0.011,0.159l0.01,0.161l0.01,0.162l0.008,0.162l0.008,0.164l0.006,0.164l0.006,0.166l0.005,0.166l0.004,0.168l0.003,0.168l0.002,0.17l0.002,0.17l0,0.172l0,0.172l-0.001,0.173l-0.002,0.175l-0.003,0.175l-0.003,0.176l-0.005,0.177l-0.005,0.178l-0.006,0.179l-0.007,0.18l-0.008,0.18l-0.008,0.182l-0.009,0.183l-0.011,0.183l-0.01,0.184l-0.012,0.186l-0.013,0.186l-0.013,0.187l-0.014,0.187l-0.015,0.189l-0.015,0.19l-0.017,0.19l-0.017,0.191l-0.018,0.192l-0.018,0.193l-0.02,0.194l-0.02,0.195l-0.021,0.195l-0.022,0.196l-0.022,0.197l-0.023,0.198l-0.024,0.199l-0.025,0.2l-0.025,0.2l-0.026,0.201l-0.027,0.202l-0.028,0.202l-0.028,0.204l-0.029,0.204l-0.03,0.205l-0.03,0.206l-0.031,0.206l-0.032,0.207l-0.032,0.208l-0.033,0.209l-0.034,0.21l-0.07,0.42l-0.073,0.424l-0.075,0.427l-0.078,0.43l-0.08,0.432l-0.083,0.435l-0.071,0.359l-0.015,0.078l-0.088,0.441l-0.091,0.443l-0.093,0.445l-0.096,0.448l-0.098,0.45l-0.1,0.453l-0.103,0.455l-0.105,0.458l-0.108,0.46l-0.11,0.462l-0.112,0.464l-0.115,0.467l-0.116,0.468l-0.119,0.471l-0.121,0.472l-0.123,0.475l-0.126,0.477l-0.127,0.478l-0.13,0.481l-0.131,0.482l-0.134,0.484l-0.135,0.486l-0.138,0.488l-0.139,0.489l-0.142,0.491l-0.143,0.492l-0.145,0.494l-0.147,0.495l-0.148,0.497l-0.151,0.499l-0.152,0.499l-0.154,0.501l-0.155,0.503l-0.158,0.503l-0.158,0.505l-0.161,0.506l-0.162,0.507l-0.164,0.508l-0.165,0.509l-0.166,0.51l-0.169,0.511l-0.169,0.512l-0.171,0.513l-0.173,0.514l-0.173,0.514l-0.175,0.515l-0.177,0.516l-0.177,0.517l-0.179,0.517l-0.181,0.517l-0.181,0.519l-0.182,0.518l-0.184,0.52l-0.185,0.519l-0.186,0.52l-0.187,0.52l-0.188,0.521l-0.189,0.52l-0.19,0.521l-0.191,0.521l-0.192,0.521l-0.193,0.522l-0.058,0.157l-0.136,0.364l-0.194,0.521l-0.195,0.521l-0.197,0.521l-0.196,0.521l-0.198,0.521l-0.198,0.52l-0.199,0.52l-0.2,0.52l-0.201,0.52l-0.201,0.519l-0.201,0.518l-0.202,0.519l-0.203,0.517l-0.203,0.517l-0.204,0.517l-0.204,0.515l-0.204,0.515l-0.205,0.515l-0.205,0.513l-0.206,0.513l-0.206,0.511l-0.206,0.511l-0.207,0.51l-0.206,0.509l-0.207,0.508l-0.207,0.507l-0.208,0.505l-0.207,0.505l-0.415,1.005l-0.415,1l-0.416,0.995l-0.415,0.988l-0.414,0.983l-0.414,0.976l-0.413,0.968l-0.412,0.962l-0.411,0.954l-0.409,0.947l-0.407,0.937l-0.405,0.93l-0.404,0.92l-0.4,0.911l-0.398,0.902l-0.396,0.891l-0.392,0.882l-0.389,0.87l-0.386,0.86l-0.062,0.137l-0.319,0.711l-0.378,0.837l-0.374,0.825l-0.369,0.812l-0.365,0.8l-0.36,0.787l-0.355,0.773l-0.35,0.76l-0.344,0.745l-0.339,0.732l-0.333,0.716l-0.327,0.701l-0.321,0.687l-0.314,0.67l-0.307,0.654l-0.301,0.638l-0.293,0.621l-0.265,0.559l-0.021,0.045l-0.279,0.586l-0.27,0.569l-0.263,0.551l-0.5,1.045l-0.465,0.969l-0.43,0.89l-0.392,0.808l-0.352,0.723l-0.31,0.635l-0.268,0.545l-0.223,0.452l-0.176,0.356l-0.128,0.258l-0.104,0.21l-0.146,0.049l-0.048,-0.145l0.104,-0.21l0.127,-0.258l0.176,-0.356l0.222,-0.453l0.266,-0.545l0.309,-0.635l0.351,-0.723l0.39,-0.808l0.428,-0.89l0.464,-0.97l0.498,-1.046l0.261,-0.551l0.27,-0.569l0.277,-0.587l0.021,-0.045l0.263,-0.559l0.291,-0.622l0.299,-0.639l0.305,-0.655l0.312,-0.671l0.319,-0.686l0.325,-0.702l0.33,-0.718l0.337,-0.732l0.342,-0.746l0.347,-0.761l0.353,-0.774l0.357,-0.787l0.362,-0.801l0.367,-0.813l0.371,-0.826l0.375,-0.837l0.317,-0.712l0.062,-0.137l0.382,-0.861l0.385,-0.872l0.389,-0.882l0.392,-0.893l0.395,-0.902l0.397,-0.913l0.399,-0.921l0.402,-0.931l0.404,-0.939l0.405,-0.947l0.407,-0.955l0.408,-0.963l0.409,-0.97l0.41,-0.977l0.411,-0.983l0.411,-0.99l0.411,-0.995l0.411,-1.001l0.411,-1.006l0.206,-0.505l0.205,-0.506l0.205,-0.507l0.205,-0.509l0.204,-0.509l0.205,-0.51l0.204,-0.511l0.204,-0.513l0.203,-0.513l0.204,-0.513l0.202,-0.515l0.203,-0.516l0.202,-0.516l0.201,-0.516l0.201,-0.518l0.201,-0.518l0.2,-0.518l0.199,-0.519l0.199,-0.519l0.198,-0.52l0.198,-0.52l0.197,-0.521l0.196,-0.52l0.196,-0.521l0.194,-0.521l0.194,-0.522l0.193,-0.521l0.193,-0.521l0.133,-0.364l0.058,-0.158l0.191,-0.521l0.189,-0.521l0.189,-0.522l0.188,-0.521l0.186,-0.521l0.186,-0.52l0.185,-0.52l0.183,-0.52l0.182,-0.52l0.182,-0.519l0.18,-0.519l0.179,-0.518l0.178,-0.518l0.176,-0.517l0.176,-0.517l0.174,-0.515l0.172,-0.515l0.172,-0.515l0.17,-0.513l0.168,-0.513l0.167,-0.512l0.166,-0.511l0.164,-0.509l0.163,-0.509l0.161,-0.508l0.16,-0.507l0.158,-0.505l0.156,-0.505l0.155,-0.503l0.153,-0.502l0.152,-0.5l0.15,-0.5l0.148,-0.497l0.146,-0.497l0.144,-0.495l0.143,-0.493l0.141,-0.492l0.139,-0.49l0.137,-0.488l0.135,-0.487l0.133,-0.485l0.131,-0.483l0.129,-0.482l0.127,-0.479l0.125,-0.478l0.123,-0.475l0.121,-0.474l0.119,-0.472l0.117,-0.469l0.114,-0.467l0.112,-0.465l0.11,-0.463l0.107,-0.461l0.106,-0.458l0.103,-0.456l0.1,-0.454l0.098,-0.451l0.096,-0.449l0.094,-0.446l0.09,-0.444l0.089,-0.441l0.086,-0.438l0.015,-0.078l0.068,-0.358l0.081,-0.432l0.078,-0.431l0.075,-0.427l0.073,-0.424l0.071,-0.422l0.067,-0.418l0.033,-0.208l0.032,-0.208l0.031,-0.206l0.031,-0.206l0.03,-0.205l0.029,-0.204l0.029,-0.204l0.028,-0.202l0.027,-0.202l0.026,-0.201l0.026,-0.201l0.025,-0.199l0.024,-0.199l0.024,-0.198l0.023,-0.197l0.022,-0.196l0.021,-0.195l0.021,-0.195l0.02,-0.193l0.019,-0.193l0.018,-0.192l0.018,-0.191l0.017,-0.19l0.016,-0.189l0.015,-0.189l0.015,-0.187l0.014,-0.187l0.013,-0.185l0.012,-0.185l0.012,-0.184l0.01,-0.183l0.01,-0.182l0.009,-0.181l0.009,-0.18l0.008,-0.179l0.006,-0.179l0.006,-0.177l0.006,-0.176l0.004,-0.176l0.004,-0.174l0.002,-0.174l0.002,-0.172l0.001,-0.171l0.001,-0.171l-0.001,-0.169l-0.001,-0.169l-0.002,-0.167l-0.003,-0.167l-0.004,-0.165l-0.005,-0.164l-0.005,-0.164l-0.006,-0.162l-0.007,-0.161l-0.008,-0.161l-0.009,-0.159l-0.01,-0.158l-0.011,-0.157l-0.001,-0.022l-0.01,-0.134l-0.012,-0.154l-0.014,-0.155l0.276,-0.326l0.327,0.276Z" style="fill:#aca9a9;"/>
    </g>
    <path id="Hand1" d="M173.536,107.495l16.681,0c0,0 13.174,10.39 13.234,11.667c0.059,1.277 2.117,4.242 2.117,4.242c0,0 -3.678,-0.312 -4.235,-2.121c-0.556,-1.81 -10.758,-10.06 -11.116,-9.545c-0.358,0.514 5.773,5.278 5.823,6.363c0.05,1.085 5.293,11.667 5.293,11.667c0,0 -4.416,-1.48 -6.352,-6.364c-1.935,-4.884 -6.352,-7.424 -6.352,-7.424l3.176,6.363c0,0 -0.222,7.855 -1.059,8.485c-0.836,0.631 -1.058,-1.06 -1.058,-1.06l0,-6.364l-4.235,-5.303l2.117,5.303l0,5.965c0,0 -2.121,3.909 -2.117,0c0.004,-3.909 0,-5.965 0,-5.965l-4.235,-6.364c0,0 -9.522,-2.082 -9.501,-5.302c1.139,-2.344 1.819,-4.243 1.819,-4.243Z" style="fill:#fc9da7;"/>
  <path id="Hand2" d="M173.536,107.495l16.68,0c0,0 13.924,5.139 13.984,6.417c0.059,1.277 3.617,3.492 3.617,3.492c0,0 -3.811,1.188 -4.367,-0.621c-0.556,-1.81 -12.876,-5.56 -13.234,-5.046c-0.358,0.515 8.38,4.623 8.823,5.614c0.277,0.62 9.793,6.417 9.793,6.417c0,0 -1.756,1.571 -8.602,-2.614c-4.482,-2.74 -11.602,-5.174 -11.602,-5.174l7.411,5.613c0,0 6.793,7.104 5.957,7.735c-0.837,0.631 -5.207,-2.56 -5.207,-2.56l-3.352,-4.114l-7.985,-4.553l3.617,5.303l0.404,5.215c0,0 -1.775,3.909 -1.771,0c0.004,-3.909 -1.5,-5.215 -1.5,-5.215l-4.985,-6.364c0,0 -9.522,-2.082 -9.501,-5.303c1.139,-2.343 1.82,-4.242 1.82,-4.242Z" style="fill:#fc9da7;display: none"/>
  <path id="Hand3" d="M173.536,107.495l16.68,0c0,0 13.176,10.389 13.234,11.667c0.162,3.564 -4.53,11.779 -4.633,9.492c0,0 2.189,-7.062 1.633,-8.871c-0.556,-1.81 -9.126,-7.06 -9.484,-6.546c-0.358,0.515 8.208,8.286 8.073,9.364c-0.323,2.591 -7.638,8.344 -7.367,6.768c0,0 6.178,-5.715 3.308,-8.215c-3.961,-3.45 -6.352,-5.174 -6.352,-5.174l4.411,7.863c0,0 -4.986,6.354 -5.823,6.985c-0.836,0.631 1.507,-4.06 1.507,-4.06l0.75,-4.114l-4.021,-4.553l0.617,5.303c-0.07,0.915 -0.981,1.654 -2.734,2.215c0,0 -5.541,-1.345 -4.633,-1.5c0.712,-0.121 4.633,-1.465 4.633,-1.465c0.334,-2.144 -0.435,-3.999 -2.118,-5.614c0,0 -9.522,-2.082 -9.501,-5.303c1.139,-2.343 1.82,-4.242 1.82,-4.242Z" style="fill:#fc9da7;" display="none"/>
    <path id="neck.-wrap" d="M153.96,32.141c0,0 16.843,15.276 35.514,-0.377c-1.939,-3.075 -6.138,-8.056 -6.138,-8.056c0,0 -10.452,11.789 -22.233,1.061c-3.676,3.592 -7.143,7.372 -7.143,7.372Z" style="fill:#fff;"/>
    <g id="chrome.-cone">
      <path d="M171.717,6.739l11.619,16.969c-0.081,0.216 -9.981,12.069 -22.233,1.061c6.286,-10.447 10.614,-18.03 10.614,-18.03Z" style="fill:#110505;"/>
      <path d="M162.177,25.681l9.54,-18.942l-6.379,21.211c0,0 -1.587,-0.841 -3.161,-2.269Z" style="fill:#555454;"/>
      <path d="M171.717,6.739l1.791,22.376c-0.104,0.534 2.15,0.174 4.534,-1.165c-1.101,-3.758 -6.325,-21.211 -6.325,-21.211Z" style="fill:#6d6d6d;"/>
    </g>
  </g>
</svg>
              
            
!

CSS

              
                html{
  display: grid;
  height: 100%;
}
body{
  margin: auto;
  background: #392F4B;
}
svg{
  width: 110%;
}
              
            
!

JS

              
                const t1 = new TimelineMax({ repeat: -1, yoyo: true });
t1.to('#eye-left, #eye-right', 0.5, { scaleY: .4})
.to('#Hand1', 0.5, { morphSVG: '#Hand2' }, "hand-=0.5")
.to('#Hand1', 0.5, { morphSVG: '#Hand3' }, "hand-=0.25")
.to("#cat-one", 0.5, { morphSVG: '#cat-two' }, "-=0.5")
.to("#ear-right-inner", 0.5, { morphSVG: '#ear-right-inner2'}, "-=0.75")
TweenMax.to("#cape1", 0.2, { morphSVG: '#cape2', repeat: -1, yoyo: true })
// Motion
const burstPolygon = new mojs.Burst({
  radius: { 0 : 180 },
  top: '30%',
  left: '20%',
  count: 30,
  children: {
    shape: 'polygon',
    radius: { 20 : 5 },
    duration: 1500,
    repeat: 9999,
  },
});
const burstCross = new mojs.Burst({
  radius: { 0 : 135 },
  top: '40%',
  left: '80%',
  count: 15,
  children: {
    shape: 'cross',
    stroke: 'orange',
    strokeWidth: { 9 : 3 },
    radius: { 20 : 5 },
    angle: { 360 : 0 },
    duration: 1500,
    repeat: 9999,
  },
});
const swirls = {
  radius: 5,
  direction: -1,
  swirlSize: 85,
  swirlFrequency: 10,
  repeat: 999
};
const swirl = new mojs.ShapeSwirl({
  ...swirls,
  fill: 'papayawhip',
  top: '10%',
  y: { 0: -150 },
  duration: 3000,
});
const swirl2 = new mojs.ShapeSwirl({
  ...swirls,
  fill: 'mediumvioletred',
  top: '80%',
  left: '80%',
  y: { 0: 50 },
  duration: 3000,
});
const swirl3 = new mojs.ShapeSwirl({
  ...swirls,
  fill: 'yellow',
  top: '80%',
  left: '20%',
  y: { 0: -100 },
  duration: 3000,
});
const circs = {
  fill: 'none',
  opacity: { 1 : 0 },
  duration: 1800,
  repeat: 999
};
const circ = new mojs.Shape({
  ...circs,
  radius: { 0 : 100 },
  top: '40%',
  left: '80%',
  stroke: 'peachpuff',
});
const circ2 = new mojs.Shape({
  ...circs,
  radius: { 0 : 250 },
  top: '30%',
  left: '20%',
  stroke: 'magenta'
});
const tl = new mojs.Timeline({
  repeat: 999
})
.add(burstPolygon, burstCross, swirl, swirl2, swirl3, circ, circ2)
.play();
              
            
!
999px

Console