css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

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

Add External Scripts/Pens

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

+ add another resource

Use npm Packages

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

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

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

HTML Settings

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

            
              <!-- I CREATED THE SVG ASSETS IN SKETCH BY TRACING VECTORS ON TOP OF A DRAWING -->

<!-- THE METAL & NON-METAL FEATURES ARE ALL LAYERED INTO ONE COMPOSITE DRAWING, AND THE METAL FEATURES ARE SET TO A HIDDEN INITAL STATE WITH CSS -->

<!-- WATCH AGGRETSUKO ON NETFLIX IT'S CUTE AND RELATABLE -->

<?xml version="1.0" encoding="UTF-8"?>
<svg width="405px" height="434px" viewBox="0 0 405 434" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(9.000000, 4.000000)">

<!-- EAR LEFT -->
<g id="earLeft">
<polyline id="path2" stroke="#000000" fill="#ffffff" stroke-width="6" points="37.9948783 179.01699 37.9948783 152.026954 11.242887 152.026954 29.3920817 138.526893 0.17248349 127.568178 29.3920817 116.202714 24.9874213 85.9485937 19.0836809 57.3853427 19.0836809 22.5561273 24.9874213 7.40553629 37.9948783 0 60.5665373 7.40553629 91.8264511 22.5561273 120.472767 39.0345381"></polyline>
<polygon id="path3" fill="#8B572A" points="56.4254049 117.179965 43.9093492 78.7333633 40.3333333 49.0246255 40.3333333 29.8013245 61.7894288 43.781907 74.3054845 63.005208 81.4575163 73.4906449 70.1307408 93.2596175"></polygon>
</g>

<!-- EAR RIGHT -->
<g id="earRight" transform="translate(327.000000, 93.000000) scale(-1, 1) translate(-327.000000, -93.000000) translate(267.000000, 4.000000)">
<polyline id="path2" fill="#ffffff" stroke="#000000" stroke-width="6" points="37.7279858 178 37.7279858 151.163293 11.0427705 151.163293 29.1466627 137.739926 0 126.843467 29.1466627 115.54257 24.7529969 85.4603222 18.8639929 57.0593383 18.8639929 22.4279866 24.7529969 7.36346566 37.7279858 0 60.2433032 7.36346566 91.4251887 22.4279866 120 38.812784"></polyline>
<polygon id="path1" fill="#8B572A" points="54.7899883 114.478431 41.7465101 74.5505882 38.019802 43.6972549 38.019802 23.7333333 60.3800504 38.252549 73.4235287 58.2164706 80.8769448 69.1058824 69.0728626 89.6364988"></polygon>
</g>

<!-- HEAD -->
<polygon id="Head" stroke="#000000" stroke-width="6" fill="#F5A623" points="30 214.877752 44.2115026 144.399274 59.9486667 103.901954 80.3300249 71.0838625 106.854355 44.7814793 134.259132 28.1055084 163.764214 18 187.610235 18 211.48314 18 244.130279 28.1055084 273.269068 44.7814793 302.77079 71.0838625 321.045122 96.1953492 338.052551 128.537767 347.179635 169.288324 353 201.055826 353 214.877752 338.052551 233.518018 302.77079 256.001319 244.130279 267 180.304535 267 134.259132 267 84.3894941 256.001319 52.5354308 238.490352"></polygon>

<!-- EYE SPOT LEFT -->
<path d="M141.863013,104 C141.863013,104 140.149183,104.399454 136.721524,105.198362 L132.662915,107.922464 L130.509856,110.655665 L128.476908,115.337748 L128,119.92645 L128.952151,124.230024 L130.509856,127.27652 L132.374189,129.749292 L134.931506,131.822755 L137.942209,133.210047 L141.29472,134 L143.180494,134 L146.156017,133.643806 L148.309701,132.981251 L150.260423,131.822755 L152.291289,130.27145 L154.210786,128.005157 L155.649836,125.611899 L156.523717,123.394572 L157,120.51599 L157,117.610108 L156.523717,114.858924 L155.649836,112.221487 L153.833798,109.05886 L151.467368,106.97803 L149.561818,105.673287 L146.635214,104.523024 L143.631798,104 C142.452608,104 141.863013,104 141.863013,104 Z" id="eyeSpotLeft" fill="#FFFFFF"></path>

<!-- EYE SPOT RIGHT -->
<polygon id="eyeSpotRight" fill="#FFFFFF" points="233.112877 104 230.498289 104.226753 227.40068 105.388757 224.243497 107.427598 221.670217 110.315903 219.963138 113.547571 219.246804 116.646032 219 118.664827 219.246804 120.908221 219.657383 123.287408 220.592914 125.650429 222.60471 128.823253 224.766996 130.829762 227.130213 132.346553 230.162436 133.544553 232.813142 134 234.646632 134 236.603837 133.544553 239.3137 132.744234 241.688125 131.389102 244.119634 129.385395 245.652766 127.203431 246.774905 125.227314 247.473388 122.819028 248 120.601716 248 118.238264 247.691962 115.640514 246.774905 113.212614 245.652766 110.709919 244.35855 108.794154 242.348622 106.992628 240.828566 106.058887 238.8861 104.967582 236.941558 104.226753 235.143147 104"></polygon>

<!-- WHITE FLUFF LEFT -->
<polygon id="whiteFluffLeft" fill="#FFFFFF" points="108.057029 158 94.4972757 164.431486 79.4337087 178.563605 72 188.814537 84.7515438 188.814537 79.4337087 200.557573 74.9022884 207.812289 72 217.847123 82.8917544 214.833757 82.8917544 224.436395 86.6403923 234.572417 94.4972757 241.8803 97.2451871 236.68709 108.057029 241.8803 121.473302 245 132 241.8803 119.094079 234.572417 111.03923 221.99929 105.977479 205.733633 105.977479 193.738482 108.057029 180.448459 111.03923 168.201195 114.773338 161.202023"></polygon>

<!-- WHITE FLUFF RIGHT -->
<polygon id="whiteFluffRight" fill="#FFFFFF" points="266.947724 159 279.377497 165.431486 293.185767 179.563605 300 189.814537 288.311085 189.814537 293.185767 201.557573 297.339569 208.812289 300 218.847123 290.015892 215.833757 290.015892 225.436395 286.57964 235.572417 279.377497 242.8803 276.858579 237.68709 266.947724 242.8803 254.649473 246 245 242.8803 256.830427 235.572417 264.214039 222.99929 268.853977 206.733633 268.853977 194.738482 266.947724 181.448459 264.214039 169.201195 260.791107 162.202023"></polygon>

<!-- BROWN FLUFF LEFT -->
<polygon id="brownFluffLeft" fill="#8B572A" points="99.0165749 164 106.839309 179.447106 123.952879 187.460264 144.364321 184.26093 160.189284 172.683581 151.95666 191.854503 147.769354 211.388001 154.708012 222.263001 165.533926 231.500708 183.901277 243.011926 203 248.263577 165.533926 251 144.364321 248.263577 129.565423 240.403203 110.530996 226.233094 99.0165749 207.5 96 187.460264"></polygon>

<!-- BROWN FLUFF RIGHT -->
<polygon id="brownFluffRight" fill="#8B572A" points="278.983425 164 282 187.460264 278.983425 207.5 267.469004 226.233094 248.434577 240.403203 233.635679 248.263577 212.466074 251 175 248.263577 194.098723 243.011926 212.466074 231.500708 223.291988 222.263001 230.230646 211.388001 226.04334 191.854503 217.810716 172.683581 233.635679 184.26093 254.047121 187.460264 271.160691 179.447106"></polygon>

<!-- WHITE SNOUT -->
<polygon id="whiteSnout" fill="#FFFFFF" points="127 224.999758 130.191351 206.691354 137.948706 187.593907 152.166031 167.366058 165.837088 155.064078 177.810045 148 187.28347 148 199.150408 148 210.241071 155.064078 221.73245 167.366058 236.152828 186.499879 244.312696 202.498048 248 219.123908 248 224.999758 236.152828 240.403814 218.591413 251.002729 199.150408 256 187.5 256 165.837088 256 152.166031 248.999344 137.948706 240.403814"></polygon>

<!-- NOSE -->
<polygon id="blackNose" fill="#000000" points="175 198.566226 176.251821 196.141681 179.925673 193.045148 185.858778 192 192.856846 192 198.075071 193.825393 201.358704 196.814168 202 200.996757 198.995986 205.170866 195.367177 208.036917 191.160398 210.804191 188.662108 212 185.136762 212 181.911105 210.158643 178.136465 206.178598 175 202"></polygon>

<!-- MOUTH -->
<polygon id="mouth" fill="#000000" points="188.995894 228.519258 184.326944 228.519258 180.288285 226.156709 176.627633 223.644196 173.05528 223.644196 171 226.081727 171 228.519258 175.855221 232.425286 181.125029 234.538229 184.914767 236 191.59653 236 197.194729 234.538229 200.722091 231.892692 203.99002 229.299966 205 226.156709 203.99002 223.644196 201.388964 223 199.062478 225.437282 195.522502 227.067949 192.690184 228.519258"></polygon>

<!-- TEETH (USED ONLY TO HAVE A POINT TO MORPH FROM) -->
<polygon id="teeth" fill="#000000" stroke="#000000" points="177.230043 229.807418 180.956203 231.499811 189.441524 234 197.77295 232.019336 202.131238 228.236715 203 226.546662 201.164844 225.614835 198.224706 228.236715 192.674973 229.807418 186.862543 229.807418 180.956203 227.793778 177.230043 225.614835 174.05327 225 173 226.546662 174.05327 228.236715"></polygon>

<!-- EYE RIGHT -->
<polygon id="eyeRight" fill="#000000" points="265.39885 206.47368 258.133191 208 247.672027 207.23684 239.540162 203.81672 232.834245 198.441268 229.118678 192.406064 227.252874 185.754691 226 179.231508 226 171.218753 227.252874 164.235794 230.304012 157.391281 233.890408 149.597304 238.641875 143.938124 242.321983 142.092182 247.672027 141 251.950712 142.092182 256.648991 143.938124 260.722522 145.700315 262.83738 147.491562 264.19832 149.597304 266.74206 147.491562 269.214883 145.700315 272.274463 143.938124 276.421444 142.092182 280.722079 141 285.819691 141 288.100868 143.009171 289 145.700315 289 147.491562 288.100868 149.597304 285.819691 151.341548 283.505588 153.567788 279.600909 155.891453 276.421444 157.391281 273.41674 158.94153 276.421444 161.656603 278.715285 166.07319 280.722079 171.218753 281.841561 176.806145 283.505588 182.942193 281.841561 190.740443 279.600909 195.948392 275.076546 200.745277 272.274463 203.81672"></polygon>

<!-- EYE RIGHT WHITE (IDENTICAL COPY OF EYE RIGHT USED ONLY AS STARTING POINT TO MORPH TO WHITE PUPIL)-->
<polygon id="eyeRightWhite" fill="#000000" points="265.39885 206.47368 258.133191 208 247.672027 207.23684 239.540162 203.81672 232.834245 198.441268 229.118678 192.406064 227.252874 185.754691 226 179.231508 226 171.218753 227.252874 164.235794 230.304012 157.391281 233.890408 149.597304 238.641875 143.938124 242.321983 142.092182 247.672027 141 251.950712 142.092182 256.648991 143.938124 260.722522 145.700315 262.83738 147.491562 264.19832 149.597304 266.74206 147.491562 269.214883 145.700315 272.274463 143.938124 276.421444 142.092182 280.722079 141 285.819691 141 288.100868 143.009171 289 145.700315 289 147.491562 288.100868 149.597304 285.819691 151.341548 283.505588 153.567788 279.600909 155.891453 276.421444 157.391281 273.41674 158.94153 276.421444 161.656603 278.715285 166.07319 280.722079 171.218753 281.841561 176.806145 283.505588 182.942193 281.841561 190.740443 279.600909 195.948392 275.076546 200.745277 272.274463 203.81672"></polygon>

<!-- EYE LEFT -->
<polygon id="eyeLeft" fill="#000000" points="112.837673 209 104.341995 206.491875 96.5149654 199.303518 92.6056193 188.201252 92.6056193 178.769641 94.9442237 171.017256 98.171581 165.095818 100.919545 160.312724 102.721646 157.32629 96.5149654 156.085085 91.7368757 153.215228 87.9400828 150.428518 86 144.913387 87.9400828 141.092054 91.7368757 140 98.171581 141.092054 102.721646 143.613894 106.351277 146.044872 110.544924 149.28589 115.630659 144.913387 121.532613 142.199538 128.866076 141.092054 132.973015 142.199538 137.064114 146.044872 139.992997 150.428518 143.525498 158.486919 145.054554 166.133013 146 176.112366 145.054554 184.829942 143.525498 190.749665 139.992997 196.540809 133.952644 203.369149 127.391213 206.491875 121.532613 209"></polygon>

<!-- EYE LEFT WHITE (IDENTICAL COPY OF EYE LEFT USED ONLY AS STARTING POINT TO MORPH TO WHITE PUPIL) -->
<polygon id="eyeLeftWhite" fill="#000000" points="112.837673 209 104.341995 206.491875 96.5149654 199.303518 92.6056193 188.201252 92.6056193 178.769641 94.9442237 171.017256 98.171581 165.095818 100.919545 160.312724 102.721646 157.32629 96.5149654 156.085085 91.7368757 153.215228 87.9400828 150.428518 86 144.913387 87.9400828 141.092054 91.7368757 140 98.171581 141.092054 102.721646 143.613894 106.351277 146.044872 110.544924 149.28589 115.630659 144.913387 121.532613 142.199538 128.866076 141.092054 132.973015 142.199538 137.064114 146.044872 139.992997 150.428518 143.525498 158.486919 145.054554 166.133013 146 176.112366 145.054554 184.829942 143.525498 190.749665 139.992997 196.540809 133.952644 203.369149 127.391213 206.491875 121.532613 209"></polygon>

<!-- TAIL -->
<g id="tail" transform="translate(224.000000, 355.000000)">
<polygon id="path" stroke="#000000" stroke-width="5" fill="#8B572A" points="19.0303602 0.5434375 30.5051649 0.5434375 47.3397244 0.5434375 59.0025174 0.5434375 65.9071181 2.774375 71.7380968 8.80203125 75.3315972 16.0035938 75.3315972 26.4226563 70.1899089 33.5279688 63.6345486 39.3467969 54.3036458 42.3125 41.2572591 42.3125 25.7870768 39.3467969 12.95625 33.5279688 5.23452691 29.2465625 0.62672526 24.97375"></polygon>
<path d="M56.1950155,34.234375 C56.2258171,28.734375 56.2258171,36.9027621 56.2258171,20.1720104 C56.2258171,3.44125865 68.9877116,6.35100718 61.4232967,4.45477556 C53.8588818,2.55854394 48.5704157,16.5349467 48.5704157,24.9261549 C48.5704157,33.317363 56.164214,39.734375 56.1950155,34.234375 Z" id="oval4" fill="#F5A623" transform="translate(56.195016, 20.281204) scale(-1, 1) translate(-56.195016, -20.281204) "></path>
<path d="M40.7313673,34.2162248 C40.7620112,28.7162248 40.7620112,36.8846119 40.7620112,20.1538601 C40.7620112,17.1160582 41.5780954,15.4939363 42.2181981,13.6048017 C45.1034734,5.08949135 52.0921514,5.98855824 45.9328911,4.43662532 C38.4071894,2.54039371 33.1457887,16.5167965 33.1457887,24.9080046 C33.1457887,33.2992128 40.7007234,39.7162248 40.7313673,34.2162248 Z" id="oval4Copy" fill="#F5A623" transform="translate(40.770389, 20.263054) scale(-1, 1) rotate(-13.000000) translate(-40.770389, -20.263054) "></path>
<path d="M24.1572751,30.1726434 C24.1880766,25.8918614 24.1880766,32.2495132 24.1880766,19.2275674 C24.1880766,16.8631732 25.0083589,15.6006369 25.6517544,14.130278 C28.5518719,7.50260755 35.5765006,8.20237289 29.3855563,6.99446625 C24.4610165,6.03364606 20.5010675,10.3087104 18.3368996,15.2116097 C17.1767642,17.8398841 15.1670476,21.8541926 15.1670476,24.1334479 C15.1670476,30.6645266 24.1264736,34.4534255 24.1572751,30.1726434 Z" id="oval4Copy2" fill="#F5A623" transform="translate(23.513683, 19.424790) scale(-1, 1) rotate(-40.000000) translate(-23.513683, -19.424790) "></path>
</g>

<!-- LEG LEFT -->
<polyline id="legLeft" stroke="#000000" stroke-width="4" fill="#8B572A" points="141 371.875956 148.240056 394.795658 148.240056 411.823112 162.554815 423.729232 173.658708 427 181 420.450979 177.178344 405.083234 177.178344 386.162177 177.178344 371.875956 141 369"></polyline>

<!-- METAL LEG LEFT -->
<polygon id="metalLegLeft" stroke="#000000" stroke-width="4" fill="#8B572A" points="140.917396 370 138.923397 382.638075 138.923397 398.58891 138.923397 405.007544 132.189245 408.176681 128 414.933857 128 422.530552 134.458698 427 147.226419 425.596244 159.117467 421.061823 164.056349 414.933857 164.056349 405.007544 161.788153 398.5 168.886222 388.068437 173 377.241908 173 373.328149"></polygon>

<!-- LEG RIGHT -->
<polygon id="legRight" stroke="#000000" stroke-width="4" fill="#8B572A" points="229 375.628029 221.759944 396.571894 221.759944 412.131464 207.445185 423.011195 196.341292 426 189 420.01555 192.821656 405.97261 192.821656 375.628029 229 373"></polygon>

<!-- METAL LEG RIGHT -->
<polygon id="metalLegRight" stroke="#000000" stroke-width="4" fill="#8B572A" points="237.082604 370 239.076603 382.638075 239.076603 405.007544 245.810755 408.176681 250 414.933857 250 422.530552 243.541302 427 230.773581 425.596244 218.882533 421.061823 213.943651 414.933857 213.943651 405.007544 216.211847 398.5 209.113778 388.068437 205 377.241908 205 373.328149"></polygon>


<!-- SUIT -->
<g id="suit" transform="translate(137.000000, 271.000000)" stroke="#000000">
<polygon id="path7" stroke-width="4" fill="#4A90E2" points="3.82239163 0.607608909 3.82239163 17.3413952 0.156738281 57.8091641 3.82239163 105.253434 53.59438 107.519697 101.9355 105.253434 106.440461 59.948489 101.9355 17.3413952 101.9355 0.607608909"></polygon>
<polyline id="path8" stroke-width="4" fill="#FFFFFF" points="6.40435988 2.79432398 37.2059602 11.3397763 24.0365738 26.5435391 51.4101563 42.1687353 85.2487714 26.5435391 70.3721176 11.3397763 100.446018 2.79432398"></polyline>
<polyline id="path9" stroke-width="5" fill="#8B572A" points="36.2419355 0 51.5668945 34.9180485 66.3525391 0"></polyline>
<polyline id="path10" stroke-width="4" points="1.78142326 56.8579768 41.3974452 69.6194564 54.0679656 55.1096203 65.5688477 69.6194564 105.926427 56.8579768"></polyline>
</g>
  
<!-- HAND LEFT -->
<polygon id="handLeft" stroke="#000000" stroke-width="4" fill="#8B572A" points="138 331.926505 138 339.765374 132.497584 347.275123 121.643707 351 115 347.275123 115 336.266767 121.643707 329.831798 126.5 327"></polygon>

<!-- ARM LEFT -->
<polygon id="armLeft" stroke="#000000" stroke-width="5" fill="#FFFFFF" points="140.150592 272 142 290.834583 142 303.57025 140.150592 317.793083 136.725888 331 121 327.387093 121 314.519954 124.895093 301.5 129.456853 284.884214 133.380711 272"></polygon>
  
<!-- HAND RIGHT -->
<polygon id="handRight" stroke="#000000" stroke-width="4" fill="#8B572A" points="243 331.926505 254.5 327 259.356293 329.831798 266 336.266767 266 347.275123 259.356293 351 248.502416 347.275123 243 339.765374"></polygon>

<!-- ARM RIGHT -->
<polygon id="armRight" stroke="#000000" stroke-width="5" fill="#FFFFFF" points="239.849408 272 246.619289 272 250.543147 284.884214 255.104907 301.5 259 314.519954 259 327.387093 243.274112 331 239.849408 317.793083 238 303.57025 238 290.834583"></polygon>
  
<!-- METAL LEFT HAND -->
<polygon id="metalLeftHand" stroke="#000000" stroke-width="4" fill="#8B572A" points="110.299177 305 100.195329 305 85.4724587 299.496983 76.4313794 289.518317 71.108315 280.997517 64 275.305835 77.4664895 278.770412 85.5780651 277.533798 85.4724587 270.921088 79.0204119 262.576089 76.4313794 254.519234 77.4664895 242.466967 80.3371391 235.139902 79.0204119 226.673129 85.5780651 235.139902 90.4758434 237.266672 92.7869576 242.466967 95.9476057 248.887582 103.162365 246.332885 108.339592 244.965921 114.455542 246.332885 122.212582 248.887582 126.870997 244.965921 129.435723 237.266672 134.621332 232.473722 137.540594 230.753349 141.531844 222 141.531844 235.139902 143.724434 239.53837 143.724434 248.887582 141.531844 259.01718 144.929688 269.787382 146 280.997517 144.929688 287.298072 137.540594 296.022974 126.870997 301.319316"></polygon>

<!-- METAL LEFT ARM -->
<polygon id="metalLeftArm" stroke="#000000" stroke-width="4" fill="#FFFFFF" points="145 288 142.247589 306.901521 128.915494 322.991536 118.599763 325 103 311.309674"></polygon>

<!-- METAL RIGHT HAND -->
<polygon id="metalRightHand" stroke="#000000" stroke-width="4" fill="#8B572A" points="270.700823 305 254.129003 301.310413 243.459406 296.001258 236.070312 287.255251 235 280.939454 236.070312 269.702202 239.468156 258.905946 237.275566 248.751844 237.275566 239.380017 239.468156 234.970908 237.275566 221 241.810773 230.423397 246.378668 232.298278 251.564277 237.102823 254.129003 244.820697 258.787418 248.751844 266.544458 246.190968 272.660408 244.820697 277.837635 246.190968 285.052394 248.751844 288.213042 242.315698 290.476036 234.970908 295.421935 234.970908 301.979588 224.273258 300.662861 234.970908 303.533511 242.315698 304.568621 254.397119 301.979588 262.473464 295.527541 270.83865 295.421935 277.467356 303.533511 278.706961 317 275.234004 309.891685 280.939454 304.568621 289.480866 295.527541 299.483671 280.804671 305"></polygon>

<!-- METAL RIGHT ARM -->
<polygon id="metalRightArm" stroke="#000000" stroke-width="4" fill="#FFFFFF" points="236 288 278 311.309674 262.400237 325 252.084506 322.991536 238.752411 306.901521"></polygon>

<!-- METAL NOSE -->
<polygon id="metalNose" fill="#000000" points="173 169.566226 174.251821 167.141681 177.925673 164.045148 183.858778 163 190.856846 163 196.075071 164.825393 199.358704 167.814168 200 171.996757 196.995986 176.170866 193.367177 179.036917 189.160398 181.804191 186.662108 183 183.136762 183 179.911105 181.158643 176.136465 177.178598 173 173"></polygon>

<!-- METAL LEFT EYE BLACK -->
<polygon id="metalLeftEyeBlack" fill="#000000" points="147.270364 105 138.848889 109.150071 123.430704 128.509928 116.727068 140.421077 107.57997 147.341432 100.924003 158.988405 85.9630848 161.64445 74 158.988405 74 165.273308 83.7544338 174.073243 96.7697617 180.322446 107.57997 184.590326 110.635182 201.740382 116.727068 217.087611 125.286253 226 131.07359 226 131.07359 217.087611 128.321162 207.002493 131.07359 196.096285 133.808362 190.937703 144.8269 186.884021 154.549555 180.322446 162 176.715009 159.076318 165.273308 154.549555 158.988405 149.466656 153.199726 144.8269 147.341432 142.491132 138.329085 142.491132 130.742934 144.8269 120.866658 147.270364 109.150071"></polygon>

<!-- METAL LEFT EYE WHITE PUPIL-->
<polygon id="metalLeftEyeWhite" fill="#FFFFFF" points="154 168.290017 146.541513 159.17034 135.490429 148.390845 128.661554 145 117.947763 148.390845 111.862661 156.645008 109 164.30747 111.862661 174.683455 123.204336 179 138.161093 176.590805 148.703644 172.209833"></polygon>

<!-- METAL RIGHT EYE BLACK    -->
<polygon id="metalRightEyeBlack" fill="#000000" points="226.729636 101 235.151111 105.252965 250.569296 125.092819 257.272932 137.299286 266.42003 144.39122 273.075997 156.326961 288.036915 159.048858 300 156.326961 300 162.767687 290.245566 171.785803 277.230238 178.189945 266.42003 182.56364 263.364818 200.138904 257.272932 215.866643 248.713747 225 242.92641 225 242.92641 215.866643 245.678838 205.53148 242.92641 194.354871 240.191638 189.06839 229.1731 184.914203 219.450445 178.189945 212 174.493067 214.923682 162.767687 219.450445 156.326961 224.533344 150.39476 229.1731 144.39122 231.508868 135.155426 231.508868 127.381188 229.1731 117.260046 226.729636 105.252965"></polygon>

<!-- METAL RIGHT EYE WHITE PUPIL -->
<polygon id="metalRightEyeWhite" fill="#FFFFFF" points="223 168.660018 230.458487 159.003889 241.509571 147.590306 248.338446 144 259.052237 147.590306 265.137339 156.330009 268 164.443203 265.137339 175.42954 253.795664 180 238.838907 177.449087 228.296356 172.810412"></polygon>

<!-- METAL EYE DOT LEFT -->
<polygon id="metalEyeDotLeft" fill="#FFFFFF" points="155.191182 114 149.660815 120.046438 146 132.462827 149.660815 145.691464 161.055974 152 169.718712 148.892875 173 142.066196 171.448706 134.320009 165.752403 129.684407 159.5 125.156066 156.560371 120.046438"></polygon>

<!-- METAL EYE DOT RIGHT -->
<polygon id="metalEyeDotRight" fill="#FFFFFF" points="219.808818 114 225.339185 120.046438 229 132.462827 225.339185 145.691464 213.944026 152 205.281288 148.892875 202 142.066196 203.551294 134.320009 209.247597 129.684407 215.5 125.156066 218.439629 120.046438"></polygon>

<!-- RAGE FOREHEAD TATTOO-->
<g id="rage" transform="translate(167.000000, 85.000000)" fill="#000000">
<polygon id="rage4" points="31.8643022 0.682705966 28.5269886 3.52703303 28.5269886 11.9812456 28.5269886 17.9477539 25.4789595 22.1787553 28.5269886 31.1540527 31.8643022 36.224676 36.0146484 36.224676 37.2232333 31.1540527 34.8414862 29.1831055 32.9944513 24.7885076 36.0146484 22.1787553 36.0146484 13.0840066 34.8414862 7.52865323 37.2232333 6.06061346"></polygon>
<polygon id="rage3" points="21.5386186 36.0420366 24.8421964 34.5341797 24.8421964 29.9517489 23.1904075 25.1962003 19.3061523 23.9982244 19.3061523 30.0201305"></polygon>
<polygon id="rage2" points="12.3928445 24.8274592 12.3928445 31.0190208 14.9525479 36.0489613 17.8782848 33.0323819 16.8274148 27.5376199"></polygon>
<polygon id="rage1" points="4.52734375 35.8516069 9.26300604 35.8516069 9.26300604 27.423362 11.0189542 21.3019132 18.7486683 13.2510653 19.794478 19.7577015 24.9729226 19.7577015 24.9729226 9.81034712 24.9729226 3.9243386 21.0435458 0.764071378 14.7501332 0.764071378 9.26300604 5.63993697 3.53466797 3.9243386 1.78462358 8.8486772 6.77077415 9.81034712 1.78462358 15.3206898 1.78462358 19.7577015 6.77077415 18.3078391 5.86412464 22.7188832 1.78462358 23.8129883 1.78462358 27.423362 4.52734375 27.423362 4.52734375 31.1635742 0.0404829545 32.6696999 1.78462358 37.2469371"></polygon>
</g>

<!-- METAL MOUTH -->
<polygon id="metalMouth" stroke="#000000" stroke-width="4" fill="#D0021B" points="174.811472 194.383736 164.800509 189 167.423071 195.879417 158.973452 242.758307 154 249.98173 163.779424 246.299508 194.054655 246.299508 213.760915 256.465147 222.030707 258 225.04454 252.307895 230 254.744423 226.085722 247.747468 222.030707 225.082334 203.557491 226.075069 222.030707 224.365714 212.871035 195.879417 216.087108 189 209.894219 193.009135"></polygon>

<!-- METAL TEETH -->
<polyline id="metalTeeth" stroke="#000000" stroke-width="2" fill="#FFFFFF" points="203.295102 227.23628 203.632106 226.61072 217 250 203.295102 226.133582 187.97136 243.370534 183.67318 231.611093 174.501606 244.533509 167.074411 229.953938 161 243.370534 166.031718 198.7384 171.926258 214.416524 177.522885 196.502301 183.67318 213.189975 190.836188 196.502301 195.12781 213.189975 203.295102 196.502301 207.083646 214.416524 213.544031 196.502301 165.646401 195 161 245.575236 187.58307 244.958179"></polyline>

</g>
</g>
</svg>

            
          
!
            
              body {
  background: #CDE7F0;
}

svg {
  margin: 50px auto;
  display: block;
  max-width: 100%;
}

#metalLeftEyeWhite,
#metalRightEyeWhite,
#rage {
  opacity: 0;
}

#metalNose,
#metalLeftEyeBlack,
#metalRightEyeBlack,
#metalEyeDotLeft,
#metalEyeDotRight,
#metalLeftArm,
#metalLeftHand,
#metalRightArm, 
#metalRightHand,
#metalLegLeft,
#metalLegRight,
#metalMouth,
#metalTeeth {
  display: none;
}

            
          
!
            
              // I LOVE THE GREENSOCK MORPH SVG PLUGIN

//IT'S FREE TO USE ON CODEPEN

//DOCS HERE
//https://greensock.com/docs/Plugins/MorphSVGPlugin

var tl = new TimelineMax({
			repeat:-1,
			delay:2,
			repeatDelay:2,
      yoyo: true
	});

MorphSVGPlugin.convertToPath("polygon, polyline");

tl.to(legLeft, .1, {morphSVG:{shape:"#metalLegLeft"}, 
     ease: Power2.easeIn, y: 0, }, .5)
  .to(legRight, .1, {morphSVG:{shape:"#metalLegRight"}, 
      ease: Power2.easeIn, y: 0 }, .5)
  .to(handRight, .4, {morphSVG:{shape:"#metalRightHand"}, 
     ease: Back.easeOut, y: 0 }, .5)
  .to(handLeft, .4, {morphSVG:{shape:"#metalLeftHand"}, 
     ease: Back.easeOut, y: 0 }, .5)
  .to(armLeft, .4, {morphSVG:{shape:"#metalLeftArm"}, 
     ease: Back.easeOut, y: 0 }, .5) 
  .to(armRight, .4, {morphSVG:{shape:"#metalRightArm"}, 
     ease: Back.easeOut, y: 0 }, .5)
  .to(blackNose, .4, {morphSVG:{shape:"#metalNose"}, 
     ease: Bounce.easeOut, y: 0 }, .5) 
  .to(eyeSpotLeft, .4, {morphSVG:{shape:"#metalEyeDotLeft"}, 
     ease: Back.easeOut, y: 0 }, .3) 
  .to(eyeSpotRight, .4, {morphSVG:{shape:"#metalEyeDotRight"}, 
     ease: Back.easeOut, y: 0 }, .3) 
  .to(eyeLeft, .4, {morphSVG:{shape:"#metalLeftEyeBlack"}, 
     ease: Bounce.easeOut, y: 0 }, .3) 
  .to(eyeRight, .4, {morphSVG:{shape:"#metalRightEyeBlack"}, 
     ease: Bounce.easeOut, y: 0 }, .3) 
  .to(eyeLeftWhite, .4, {morphSVG:{shape: "#metalLeftEyeWhite"}, 
     fill:"#ffffff", ease: Back.easeOut, y: 0 }, .5) 
  .to(eyeRightWhite, .4, {morphSVG:{shape: "#metalRightEyeWhite"}, 
     fill:"#ffffff", ease: Back.easeOut, y: 0 }, .5) 
  .to(mouth, .4, {morphSVG:{shape: "#metalMouth"}, 
     fill:"#D0021B", stroke:"#000", strokeWidth: 4, ease: Bounce.easeOut, y: 0 }, .5) 
  .to(teeth, .4, {morphSVG:{shape: "#metalTeeth"}, 
     fill:"#fff", stroke:"#000", strokeWidth: 2, ease: Bounce.easeOut, y: 0 }, .5) 
  .to(rage, .5, { opacity:1, ease: Power2.easeIn,}, .5);
  

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

Console