Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

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{ :width => "100%", :height => "100%", :viewbox => "0 0 1600 800", :preserveAspectRatio => 'xMidYMid meet', :version => "1.1", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink" }
  %defs
    %clipPath#tshirt-mask
      %path{ :d => "M86.26,143.636364 L86.26,165.454545 C64.8123324,178.038685 37.228,180.909091 22.7825455,200.413223 C13.1522424,213.415978 5.55806061,264.527089 0,353.746556 C18.5635556,353.746556 27.8453333,353.746556 27.8453333,353.746556 C27.8453333,353.746556 30.872,297.272727 48.124,245.454545 C51.0647059,280.57179 59.2188852,323.145307 56.3235152,353.746556 L167.98,357.272727 C159.175297,322.73911 164.281139,276.547521 163.44,240 C187.048,303.636364 191.28972,328.263227 199.347273,362.61708 C207.404826,396.970933 227,365.454545 227,365.454545 C227,365.454545 199.76,216.363636 179.784,194.545455 C159.808,172.727273 130.752,172.727273 114.862,165.454545 L114.862,143.636364 L86.26,143.636364 Z" }

  %ellipse.shadow{:cx => "756.5", :cy => "700", :fill => "#000000", "fill-opacity" => "0.1", :rx => "499.5", :ry => "38"}

  %g.character-state-a{ :transform => "translate(701.000000, 84.000000)" }
    %path#l-hair-back{:d => "M28.872,79.4976052 L93.6254545,130.851708 L93.6254545,375.437815 L28.872,382.220432 L28.872,79.4976052 Z", :fill => "#8B572A", :stroke => "#000000", "stroke-width" => "4"}
    %path#r-hair-back{:d => "M175.693586,79.2310975 L181.61817,361.228175 L155.344592,343.046678 L108.875776,171.403967 L106.901153,141.090043 L175.693586,79.2310975 Z", :fill => "#8B572A", :stroke => "#000000", "stroke-width" => "4"}
    %polygon#Path-45{:fill => "#000000", "fill-opacity" => "0.1", :points => "160.716 230 180.692 285.454545 180.692 339.090909 160.716 326.363636"}
    %path#Path-43{:d => "M175.244,89.0909091 C175.244,154.545455 148.912,169.090909 155.268,203.636364 L108.052,171.818182 L110.776,141.818182 L175.244,89.0909091 Z", :fill => "#000000", "fill-opacity" => "0.1"}
    %path{ :fill => '#FFEBD2', :stroke => "#000000", "stroke-width" => "4", :d => "M116.862,164.148271 C119.965379,165.453182 123.690958,166.586314 129.401481,168.063754 C130.635527,168.383029 135.431901,169.600849 134.952634,169.478615 C137.269032,170.069394 139.039878,170.532879 140.794149,171.013058 C145.354553,172.26133 149.258831,173.484203 152.998566,174.882354 C164.418019,179.151674 173.645574,184.879226 181.259116,193.194887 C185.491323,197.817387 190.020907,207.585135 194.937578,222.024699 C199.911578,236.632628 205.167941,255.71457 210.578669,278.206354 C215.151747,297.216121 219.578921,317.578276 223.691784,337.939679 C225.131171,345.0656 226.428518,351.682728 227.562697,357.621689 C227.959753,359.700814 228.308084,361.546836 228.605046,363.138576 C228.709041,363.695997 228.799202,364.181902 228.875199,364.593644 C228.920878,364.841132 228.951629,365.008596 228.967431,365.095081 L229.106228,365.854748 L228.698476,366.510566 C228.623888,366.630532 228.48879,366.841003 228.297156,367.129219 C227.983191,367.601419 227.620825,368.125484 227.213931,368.688711 C226.052171,370.296831 224.760741,371.905122 223.367606,373.413156 C219.4974,377.602558 215.588416,380.271133 211.651258,380.620146 C205.159108,381.195647 200.308638,375.474441 197.400114,363.073778 C196.79764,360.505095 196.190209,357.879877 195.473049,354.752506 C195.066903,352.981397 193.701333,347.003488 193.625543,346.672234 C193.338317,345.416846 193.086715,344.319721 192.845436,343.271098 C185.536021,311.503595 178.935648,288.450914 165.541165,251.528461 C165.511662,257.291447 165.375867,264.265045 165.128412,274.905262 C164.918395,283.935689 164.828885,288.370325 164.768184,293.61498 C164.447511,321.321713 165.749182,340.427756 169.918002,356.778614 L170.575051,359.355677 L54.1318053,355.678338 L54.3324077,353.558166 C55.8397687,337.626824 54.6628191,319.680156 50.9082764,288.320537 C50.6601492,286.248068 50.4166267,284.236654 50.038312,281.127683 C48.5511312,268.906106 47.6876936,261.612037 47.05395,255.499261 C46.8156162,256.297842 46.5794669,257.100029 46.3454927,257.90577 C40.253178,278.88596 35.8510362,301.383959 32.8691353,323.884771 C31.8252334,331.76184 31.0336366,339.075324 30.4600513,345.636487 C30.2594812,347.930781 30.10052,349.966404 29.9788704,351.719783 C29.9363855,352.332131 29.9016153,352.865094 29.874022,353.315725 C29.857582,353.584211 29.8472429,353.764481 29.8424672,353.853591 L29.7410153,355.746556 L27.8453333,355.746556 C26.6851111,355.746556 26.6851111,355.746556 20.884,355.746556 C12.7624444,355.746556 12.7624444,355.746556 0,355.746556 L-2.1284701,355.746556 L-1.99613041,353.622205 C3.59674678,263.843852 11.1963153,212.696487 21.1753502,199.222877 C25.6041303,193.243175 31.3773493,188.490837 38.8081731,184.340571 C44.4464498,181.191478 49.624863,178.974921 60.2822946,174.866262 C60.4831621,174.788823 61.6950743,174.321817 62.0460518,174.186469 C62.7243611,173.924893 63.2773903,173.711219 63.8086856,173.505306 C73.1200293,169.896539 78.8360104,167.39198 84.26,164.300864 L84.26,141.636364 L116.862,141.636364 L116.862,164.148271 Z" }
    %path#Path-20{:d => "M164.583155,244.602494 L164.583155,342.686127 L53.3048797,355.869877 L46.0052012,248.38348 L36.8621193,180.604154 L70.1327299,165.698368 L71.0896085,166.993135 C89.6220709,192.069692 109.490161,191.73888 128.777138,166.95356 L129.68532,165.786474 L168.244205,180.470242 L164.583155,244.602494 Z", :fill => "#4A4A4A", 'clip-path' => "url(#tshirt-mask)", :stroke => "#000000", "stroke-width" => "4"}
    %g#tshirt-logo{ 'clip-path' => "url(#tshirt-mask)", :fill => 'none', :stroke => "#FFFFFF", "stroke-width" => "2", "stroke-linecap" => "round" }
      %g{:transform => "translate(55.388000, 198.181818)"}
        %path{ :d => "M17.1686484,23.4179688 C0.455133453,57.4064443 9.21039596,32.722771 36.1355625,21.0742188 C39.6766358,19.542255 32.0111164,27.6455271 30.5368203,31.2144886 C27.429523,38.7366037 14.5886898,52.1042673 22.4322109,54.2471591 C31.8357488,56.8162557 36.7300754,40.9321102 44.4902266,35.0266335 C48.1961262,32.2064431 55.5429898,23.6693546 56.6719688,28.190696 C58.4293361,35.2286109 49.4387131,40.9791891 47.7373906,48.0308949 C47.03471,50.9433922 51.2755473,43.1307417 53.5400781,41.171875 C56.5948991,38.5293908 61.438726,30.9068027 63.5529063,34.350142 C66.623932,39.3518837 61.1410313,45.8416193 59.9350938,51.587358" }
        %path{ :d => "M43.5449844,24.1548295 C45.9379427,26.9057765 48.7638293,29.332484 50.7238594,32.4076705 C53.7354736,37.1327383 53.3705525,49.943829 58.3531875,47.3881392 C64.2006388,44.3888685 53.7702172,30.1406847 59.8765703,27.7130682 C65.4415679,25.5006707 57.9924933,43.1426745 63.5741875,45.3125 C68.2926262,47.1467439 67.8271754,36.0191541 70.9162188,32.0046165 C73.4126825,28.7601985 76.7058047,21.5481029 80.0919844,23.8458807 C85.1544364,27.2811354 83.3527448,35.6486742 84.983125,41.550071" }
        %path{ :d => "M81.8104453,22.759233 C77.5949844,22.8977273 73.353669,22.6878773 69.1640625,23.1747159 C-33.1792709,35.0671657 25.3741539,25.4027069 58.3070781,37.8817472 C59.436376,38.309664 58.917522,40.5096991 59.9687891,41.1044034 C61.4598054,41.947875 64.4331564,40.1168277 65.0709688,41.7080966 C65.9509931,43.9036568 60.5586549,48.4654548 62.9215625,48.4712358 L63.61675,51.0653409 C66.6530611,51.0727694 69.6309578,49.8345912 72.35625,48.4943182 C74.2297603,47.5729435 75.5318854,45.78125 77.1197031,44.4247159" }
        %path{ :d => "M50.0446328,9.01988636 C52.7916875,9.51704545 55.6347375,9.63580289 58.2857969,10.5113636 C60.7378581,11.3212016 61.5022999,16.8452062 58.4737813,16.8465909 C55.0672862,16.8481485 51.6701441,14.89107 48.3332656,15.5770597 C40.7083219,17.1445824 31.4446238,21.8580744 56.3580703,20.1136364 C58.7659413,19.9450374 61.2211196,19.0577223 63.1538828,17.6100852 C64.184299,16.8383049 64.4290109,15.2816258 64.52475,13.996804 C65.0030078,7.57857244 55.1309059,6.79331428 50.5748906,8.26882102 L50.0446328,9.01988636 Z" }
        %path{ :d => "M26.3124922,26.4257813 C37.2381414,51.0425236 30.6220615,48.7247872 46.9021016,22.1484375" }
        %path{ :d => "M48.5567188,28.9506392 C50.0203958,34.8111979 46.9142315,46.5850302 52.94775,46.5323153 C63.4809485,46.4402868 70.0777794,34.2253277 79.0403359,28.684304 C87.1375451,23.6782738 80.7424521,46.7031453 86.6590234,27.2993608" }
        %path{ :d => "M81.3192031,19.7070313 C83.7298958,21.8465909 87.7934206,22.9908428 88.5512813,26.1257102 C89.9733394,32.00801 80.2212384,43.4643094 74.5641797,44.6555398 C64.1373012,46.851171 55.337527,44.2434236 48.1204531,49.9573864 C47.605466,50.3651163 46.102208,50.8706587 46.1678984,50.2166193 C46.2368184,49.5304252 47.4908828,49.8319129 48.152375,49.6395597" }
        %path{ :d => "M76.6710234,43.1516335 C88.8564912,50.4878988 87.8190891,54.7638264 88.6239922,48.7233665" }
        %path{ :d => "M89.2748438,28.6239347 C85.4885547,27.5544508 81.1901721,27.5990849 77.9159766,25.415483 C76.6336994,24.5603163 78.6539749,21.8755824 77.5471016,20.8025568 L74.9791641,15.8931108 C63.5234063,4.78766549 63.2663285,5.24353607 52.9424297,0.00887784091" }
        %path{ :d => "M62.7779141,8.62393466 C48.4385766,12.5768042 56.1395131,9.65556235 40.1293438,18.5049716" }
        %path{ :d => "M20.1781719,31.1772017 C23.6020885,24.3696733 27.0260052,17.5621449 30.4499219,10.7546165" }
        %path{ :d => "M27.6904531,17.6899858 C42.5067898,17.488581 58.5708251,21.6898739 71.7355469,14.8792614" }
        %path{ :d => "M46.7655469,19.6182528 C59.5786983,22.7819741 68.1514791,30.6671585 80.4218438,34.0181108" }
        %path{ :d => "M34.3834063,31.8465909 C29.332589,33.6937628 22.5091554,39.3574023 17.5747656,39.934304"}
        %path{ :d => "M25.7733672,44.1743608 C15.4586144,55.726305 24.5820146,48.4042493 13.3841328,52.0614347 C9.332604,53.3846485 -2.58509247,55.9784815 1.56594531,56.9442472 C8.2915314,58.508998 34.2252879,49.587069 39.9005703,47.8391335"}
        %path{ :d => "M45.2191094,42.4431818 C41.3370547,46.0517282 37.455,49.6602746 33.5729453,53.268821"}
        %path{ :d => "M53.1782969,39.2294034 C57.6216026,44.6259774 50.7590965,56.8537258 56.5265469,55.3533381"}
        %path{ :d => "M61.6783828,35.6889205 C84.9960089,55.0759171 78.4733898,43.5677242 102.153547,53.8547585"}
        %path{ :d => "M73.6295781,32.1963778 C86.9459965,33.1883897 79.5036089,31.7582596 95.5368516,38.28125"}
        %path{ :d => "M57.5852891,22.0383523 C53.486875,16.6068892 49.3884609,11.1754261 45.2900469,5.74396307"}
        %path{ :d => "M42.8285156,30.403054 C35.4666584,34.6468753 34.1505638,39.29301 25.3849844,41.237571"}
        %path{ :d => "M50.8887891,40.2663352 C51.9452535,53.7360355 53.2517285,46.8174029 44.5097344,60.4012784"}
    %path#Path-47{:d => "M97.156,186.363636 C97.156,251.818182 157.084,258.181818 147.096,325.454545 L163.44,325.454545 L167.98,182.727273 C155.268,177.272727 145.579494,172.681781 128.028,168.181818 C121.962587,178.693868 110.692196,184.906744 97.156,186.363636 Z", :fill => "#000000", "fill-opacity" => "0.1", 'clip-path' => "url(#tshirt-mask)"}
    %path#Path-17{:d => "M86.26,144.545455 L86.26,159.090909 C93.8152851,165.144074 108.96,165.144074 114.862,159.090909 L114.862,145.454545 L86.26,144.545455 Z", :fill => "#000000", "fill-opacity" => "0.1"}
    %path#face{:d => "M142.796565,140.008355 C124.738057,152.67627 84.9654034,153.706432 66.2042065,143.049877 C45.3554434,131.207562 36.6037576,106.874534 36.6037576,71.3793526 C36.6037576,31.3233692 64.2132504,8 105.053931,8 C145.894612,8 173.504105,31.3233692 173.504105,71.3793526 C173.504105,101.672044 162.99434,125.83976 142.796565,140.008355 Z", :fill => "#FFFFFF", :stroke => "#000000", "stroke-width" => "4"}
    %path#Path-46{:d => "M112.592,24.5454545 C109.868,43.6363636 99.88,54.5454545 93.524,61.8181818 L88.984,53.6363636 C96.248,40 101.696,13.6363636 101.696,7.27272727 L112.592,24.5454545 Z", :fill => "#000000", "fill-opacity" => "0.1"}
    %path#l-paint{:d => "M100.788,73.6363636 C104.42,89.0909091 81.2002805,104.545455 77.2075152,108.181818 C74.5456716,110.606061 72.6619899,114.104683 71.5564699,118.677686 C70.279386,126.937402 73.2147499,131.818182 71.5564699,133.636364 C69.89819,135.454545 67.5221818,126.969697 66.4490909,121.212121 C65.376,115.454545 62.9271515,129.669421 63.56,137.272727 C43.9891809,120.752016 43.9891809,100.909091 46.308,66.3636364 C59.02,40 89.892,34.5454545 100.788,73.6363636 Z", :fill => "#000000"}
    %ellipse.left-eye{:cx => "80.2892121", :cy => "72.6997245", :fill => "#FFFFFF", :rx => "6.96133333", :ry => "6.96969697"}
    %path#r-paint{:d => "M161.624,63.6363636 C155.459812,43.0643837 139.144121,35.399449 120.874061,50.8815427 C102.604,66.3636364 119.287267,88.5824774 131.632485,99.6694215 C143.977703,110.756366 131.876036,125.454545 135.292,126.363636 C137.569309,126.969697 139.385309,123.333333 140.74,115.454545 C141.648,125.454545 139.611892,132.198674 140.74,133.250689 C141.868108,134.302703 145.555152,119.944904 145.555152,119.944904 C145.555152,119.944904 148.004,124.545455 145.555152,133.250689 C165.211654,117.077374 167.788188,84.2083436 161.624,63.6363636 Z", :fill => "#000000"}
    %ellipse.right-eye{:cx => "129.816485", :cy => "72.6997245", :fill => "#FFFFFF", :rx => "6.96133333", :ry => "6.96969697"}
    %path#Combined-Shape{:d => "M90.1512846,-0.164939832 C97.8206994,0.837803178 101.540702,3.94545614 102.022757,9.66445174 C102.21472,11.9418575 101.911111,14.5805927 101.137838,18.2368233 C100.704435,20.2860595 98.7196871,28.4293804 98.5893122,28.9879055 C98.0951328,31.1049667 97.6771879,33.0243965 97.3024607,34.9311331 L97.2582201,35.1115213 C92.6079827,50.8696962 85.1885647,62.8319383 70.7746289,80.4943709 C69.2774903,82.3289226 62.9432088,89.9909071 61.2981118,92.0080538 C47.3014647,109.170137 39.1439038,121.706712 32.7331965,138.004812 L29.8462122,145.344463 L28.8868509,137.516003 C23.5696489,94.1272352 25.2099907,62.4716288 32.8372844,40.6260478 C39.154235,22.5334635 49.2990332,11.6686763 62.8554648,5.8901556 C69.8615516,2.90376369 73.5481666,2.1622713 86.8966952,0.251965827 C87.9554055,0.100454001 88.7954497,-0.0269858563 89.5640481,-0.154746851 L89.8569098,-0.203428072 L90.1512846,-0.164939832 Z", :fill => "#8B572A", :stroke => "#000000", "stroke-width" => "4"}
    %path#Path-44{:d => "M56.296,9.09090909 C118.04,-6.36363636 34.504,116.363636 27.24,81.8181818 L29.964,145.454545 C38.5460015,119.200258 64.7107087,90.3238289 82.628,63.6363636 C98.8333091,39.4988634 107.965545,17.0488697 97.156,1.81818182 C85.772495,0.483906109 72.4183238,-0.27015344 56.296,9.09090909 Z", :fill => "#000000", "fill-opacity" => "0.1"}
    %path#r-hair-top{:d => "M173.603836,59.0783401 L173.629286,59.1685922 C175.099212,64.8918474 172.412234,68.0250083 166.795909,66.8600744 L166.026704,66.7005265 L165.57171,66.0601271 C157.13802,54.1898108 148.737516,45.8918166 139.815981,39.8268568 C136.400792,37.5051731 133.034416,35.58239 129.14593,33.6434645 C127.510997,32.8282337 121.531456,30.0098414 120.191699,29.3318237 C115.524886,26.9700664 112.724289,24.9002174 110.697812,21.9249457 L110.635954,21.8282758 C107.522181,16.6400877 105.227785,12.0457758 104.187761,8.25582315 C102.531408,2.21990676 104.560919,-1.8020793 110.836523,-0.986980254 C144.37984,4.70554421 162.356992,22.4989524 173.603836,59.0783401 Z", :fill => "#8B572A", :stroke => "#000000", "stroke-width" => "4"}
    %path#ear{:d => "M181.6,69.0909091 C179.784,61.8181818 175.244,60.3856749 171.501939,60.3856749 C168.987031,60.3856749 168.134026,62.3701307 166.164,63.6363636 C166.164,75.4545455 171.501939,73.0578512 172.52,86.3636364 C173.499983,86.6072638 183.416,76.3636364 181.6,69.0909091 Z", :fill => "#FFEBD2", :stroke => "#000000", "stroke-width" => "4"}
    %path#Path-2{:d => "M99.3572121,123.112948 C104.901803,118.671946 117.954673,114.610148 118.975515,116.143251 C119.996357,117.676354 105.862125,127.853433 103.154303,128.815427 C100.446481,129.777421 93.8126217,127.553949 99.3572121,123.112948 Z", :fill => "#000000", :transform => "translate(108.119369, 122.425026) rotate(6.000000) translate(-108.119369, -122.425026) "}
    %path#blood{:d => "M119.732182,117.823691 C122.122069,123.162574 123.676675,132.372858 124.396,145.454545 L119.732182,146.77686 C121.32544,138.973878 121.32544,129.322822 119.732182,117.823691 Z", :fill => "#FF8796"}
    %path#Path-48{:d => "M177.968,192.727273 L167.98,256.363636 L163.44,246.363636 L167.98,183.636364 C177.471451,189.135311 177.595637,184.131126 177.968,192.727273 Z", :fill => "#000000", "fill-opacity" => "0.1"}
    %path#Path-11{:d => "M175.675162,75.8898803 C172.951162,72.5014506 171.135162,67.7080621 172.043162,67.7080621 C175.675162,67.7080621 176.583162,72.1708721 175.675162,75.8898803 Z", :fill => "#000000", "fill-opacity" => "0.1", :transform => "translate(173.904812, 71.798971) rotate(17.000000) translate(-173.904812, -71.798971) "}

  %g.character-state-b{ :style => 'opacity: 0;', :transform => "translate(427.000000, 132.000000)" }
    %path.body{:d => "M384.291262,94.6024007 C387.412178,95.914005 391.15822,97.0524692 396.901762,98.5370849 C398.142119,98.8576977 402.962938,100.080598 402.481207,99.9578494 C404.809335,100.551073 406.589133,101.016473 408.352256,101.498631 C412.935559,102.752017 416.85939,103.979884 420.617798,105.383724 C432.093889,109.670271 441.367018,115.420817 449.018186,123.769887 C453.270885,128.410496 457.823225,138.218287 462.764576,152.716981 C467.76381,167.385514 473.046875,186.546749 478.485096,209.132024 C483.081427,228.220879 487.531117,248.667766 491.664898,269.113901 C493.111606,276.269478 494.415552,282.914143 495.555499,288.877818 C495.954574,290.965594 496.304676,292.819295 496.603148,294.417655 C496.707671,294.977393 496.79829,295.465318 496.874673,295.878771 C496.920584,296.127286 496.951491,296.295446 496.967373,296.382285 L497.106412,297.14258 L496.69804,297.798791 C496.623114,297.919189 496.487373,298.130468 496.294811,298.419813 C495.979306,298.893894 495.615157,299.420053 495.206257,299.985535 C494.038773,301.600093 492.740982,303.214818 491.341019,304.728849 C487.45271,308.933975 483.525679,311.612405 479.572079,311.962552 C473.053959,312.539824 468.181916,306.798461 465.259466,294.349882 C464.653929,291.770513 464.043409,289.134371 463.322601,285.993985 C462.914388,284.215502 461.541868,278.212697 461.465693,277.88006 C461.177004,276.619441 460.92412,275.517744 460.681613,274.46475 C453.33136,242.549145 446.694435,219.393178 433.218471,182.285038 C433.189418,188.082892 433.052855,195.096256 432.803333,205.815491 C432.592246,214.883556 432.50228,219.33668 432.44127,224.603213 C432.118959,252.425878 433.427286,271.611966 437.617505,288.031633 L438.275253,290.609065 L321.26294,286.917154 L321.463748,284.796753 C322.831215,270.357254 321.375802,250.84798 317.335066,219.487809 C316.908137,216.174412 316.460138,212.77259 315.867668,208.327421 C312.536243,183.3325 311.564837,175.736125 310.76644,166.896971 C300.990832,173.12725 287.571493,182.575135 271.412258,194.489876 C269.744187,195.7198 268.052463,196.971988 266.338578,198.245192 C254.61434,206.954851 242.331669,216.288164 230.23613,225.621672 C226.002514,228.888537 222.094818,231.921981 218.606146,234.644134 C217.385317,235.596727 216.30414,236.442309 215.374251,237.171148 C215.048918,237.426141 214.76577,237.648299 214.52626,237.836407 C214.285527,238.02555 214.285527,238.02555 214.236783,238.063906 L211,240.610889 L211,236.492166 C211,235.198923 211,235.198923 211,228.732708 C211,219.680008 211,219.680008 211,205.454336 L211,204.606482 L211.609348,204.016947 C248.621228,168.208531 274.162953,143.433263 288.232836,129.692793 C292.670616,123.750115 298.442294,119.01753 305.855999,114.880634 C311.522381,111.718755 316.72681,109.493111 327.438006,105.367524 C327.639894,105.289763 328.857975,104.820811 329.210741,104.684899 C329.892508,104.422231 330.448357,104.207665 330.982363,104.000892 C339.869953,100.559526 345.498843,98.1180372 350.712346,95.2224398 L338.193257,75.9569094 L384.291262,71.8121062 L384.291262,94.6024007 Z", :fill => "#FFEBD2", :stroke => "#000000", "stroke-width" => "4"}
    %g.right-arm{ :transform => "translate(0.000000, 187.000000)" }
      %path#Oval-5{:d => "M107.845798,93.8035714 C116.711544,93.8035714 122.334527,84.330303 122.334527,73.7678571 C122.334527,63.2054113 114.44768,59.1964286 105.581934,59.1964286 C96.7161873,59.1964286 83.3960664,75.9554113 83.3960664,86.5178571 C83.3960664,97.080303 98.9800513,93.8035714 107.845798,93.8035714 Z", :fill => "#FFEBD2", :stroke => "#000000", "stroke-width" => "4"}
      %polygon#Path-9{:fill => "#000000", :points => "213.794634 7.28571429 231 51.9107143 124.145619 87.4285714 109.656889 56.4642857"}
      %path#Combined-Shape{:d => "M207.010099,81.0933817 C208.526847,81.0933817 209.756414,82.7243444 209.756414,84.7362389 C209.756414,86.7481333 208.526847,88.379096 207.010099,88.379096 L13.394922,88.379096 C11.8781744,88.379096 1.03650646,94.754096 1.03650646,85.6469532 C0.349927813,74.7183817 11.8781744,81.0933817 13.394922,81.0933817 L207.010099,81.0933817 Z", :fill => "#F3EB9E", :stroke => "#000000", "stroke-linecap" => "round", "stroke-width" => "4", :transform => "translate(105.381731, 84.896688) rotate(-6.000000) translate(-105.381731, -84.896688) "}
      %polygon#Path-7{:fill => "#FFFFFF", :points => "209.266905 16.3928571 192.967085 0 195.683721 21.8571429", :stroke => "#000000", "stroke-width" => "4"}
      %polygon#Path-7{:fill => "#FFFFFF", :points => "191.155993 25.5 174.856172 9.10714286 177.572809 30.9642857", :stroke => "#000000", "stroke-width" => "4"}
      %polygon#Path-7{:fill => "#FFFFFF", :points => "173.045081 34.6071429 156.74526 18.2142857 159.461897 40.0714286", :stroke => "#000000", "stroke-width" => "4"}
      %polygon#Path-7{:fill => "#FFFFFF", :points => "154.934169 43.7142857 138.634348 27.3214286 141.350985 49.1785714", :stroke => "#000000", "stroke-width" => "4"}
      %polygon#Path-7{:fill => "#FFFFFF", :points => "136.823257 52.8214286 120.523436 36.4285714 123.240073 58.2857143", :stroke => "#000000", "stroke-width" => "4"}
    %g.head{:transform => "translate(299.000000, 0.000000)"}
      %path#Combined-Shape{:d => "M6.25971397,59.9664269 C12.0328838,25.0058401 42.3524813,-1.08872902 78.2259887,-1.08872902 C114.099496,-1.08872902 144.419094,25.0058401 150.192263,59.9664269 L151.118598,59.9664269 L160.329375,381.088729 L-2.0464194,381.088729 L5.32220262,59.9664269 L6.25971397,59.9664269 Z", :fill => "#8B572A", :stroke => "#000000", "stroke-width" => "4"}
      %path#Path-10{:d => "M33.6553672,16.4028777 C104.60452,53.764988 45.480226,252.422062 2.72881356,189.544365 C0.90960452,233.892886 0.90960452,279.760192 2.72881356,327.146283 L161,327.146283 L150.084746,61.0551559 C133.711864,-0.911270983 72.7683616,-14.5803357 33.6553672,16.4028777 Z", :fill => "#000000", "fill-opacity" => "0.1"}

  %g.drum{:transform => "translate(255.000000, 379.000000)"}
    %g.hi-hat{ :stroke => "#000000", :transform => "translate(797.898551, 4.549296)" }
      %path{:d => "M100.644022,0 L100.644022,13.6478873", "stroke-linecap" => "round", "stroke-width" => "8"}
      %rect{:fill => "#D8D8D8", :height => "250.760563", "stroke-width" => "4", :width => "8.69384058", :x => "96.2971014", :y => "30.2056338"}
      %rect{:fill => "#D8D8D8", :height => "8.82816901", "stroke-width" => "3", :width => "16.9474638", :x => "92.1702899", :y => "28.7957746"}
      %path.top{:d => "M78.8831522,19.1070423 C84.3233696,17.2873239 89.2973906,8.18873239 100.644022,8.18873239 C111.990653,8.18873239 116.964674,17.2873239 124.218297,19.1070423 C129.054046,20.3201878 154.139493,20.3201878 199.474638,19.1070423 C201.47767,19.1070423 203.101449,21.6463327 203.101449,23.656338 C203.101449,25.6663434 201.47767,28.2056338 199.474638,28.2056338 L3.62681159,28.2056338 C1.62377886,28.2056338 0,25.6663434 0,23.656338 C0,21.6463327 1.62377886,19.1070423 3.62681159,19.1070423 C50.1708937,20.3201878 75.2563406,20.3201878 78.8831522,19.1070423 Z", :fill => "#F3EB9E", "stroke-linecap" => "round", "stroke-width" => "4"}
      %path{:d => "M78.8831522,39.1239437 C84.3233696,37.3042254 89.2973906,28.2056338 100.644022,28.2056338 C111.990653,28.2056338 116.964674,37.3042254 124.218297,39.1239437 C129.054046,40.3370892 154.139493,40.3370892 199.474638,39.1239437 C201.47767,39.1239437 203.101449,41.6632341 203.101449,43.6732394 C203.101449,45.6832448 201.47767,48.2225352 199.474638,48.2225352 L3.62681159,48.2225352 C1.62377886,48.2225352 0,45.6832448 0,43.6732394 C0,41.6632341 1.62377886,39.1239437 3.62681159,39.1239437 C50.1708937,40.3370892 75.2563406,40.3370892 78.8831522,39.1239437 Z", :fill => "#F3EB9E", "stroke-linecap" => "round", "stroke-width" => "4", :transform => "translate(101.550725, 38.214085) scale(1, -1) translate(-101.550725, -38.214085) "}
      %g{"stroke-width" => "4", :transform => "translate(37.174819, 241.112676)"}
        %path#Rectangle-5{:d => "M38.3227036,3.72279458 L26.2403367,68.3031458 L34.7632921,70.3613461 L46.8456589,5.78099485 L38.3227036,3.72279458 Z", :fill => "#D8D8D8", :transform => "translate(36.542998, 37.042070) rotate(36.000000) translate(-36.542998, -37.042070) "}
        %path#Rectangle-5{:d => "M5.67100608,58.9235525 L4.26374681,72.2701191 L25.3351489,67.7756633 L22.6911277,55.2932206 L5.67100608,58.9235525 Z", :fill => "#4A4A4A", :transform => "translate(14.845700, 63.860204) rotate(12.000000) translate(-14.845700, -63.860204) "}
      %g{"stroke-width" => "4", :transform => "translate(130.111866, 279.781690) scale(-1, 1) translate(-130.111866, -279.781690) translate(96.110507, 241.112676)"}
        %path#Rectangle-5{:d => "M38.3227036,3.72279458 L26.2403367,68.3031458 L34.7632921,70.3613461 L46.8456589,5.78099485 L38.3227036,3.72279458 Z", :fill => "#D8D8D8", :transform => "translate(36.542998, 37.042070) rotate(36.000000) translate(-36.542998, -37.042070) "}
        %path#Rectangle-5{:d => "M5.67100608,58.9235525 L4.26374681,72.2701191 L25.3351489,67.7756633 L22.6911277,55.2932206 L5.67100608,58.9235525 Z", :fill => "#4A4A4A", :transform => "translate(14.845700, 63.860204) rotate(12.000000) translate(-14.845700, -63.860204) "}
      %ellipse{:cx => "101.550725", :cy => "252.940845", :fill => "#D8D8D8", :rx => "9.97373188", :ry => "10.0084507", "stroke-width" => "4"}
    %g.ride{ :stroke => "#000000", :transform => "translate(0.000000, 22.746479)" }
      %g.stand{ :transform => "translate(73.442935, 0.000000)" }
        %g#ride-left-stand{"stroke-width" => "4", :transform => "translate(0.000000, 222.915493)"}
          %path#Rectangle-5{:d => "M38.3227036,3.72279458 L26.2403367,68.3031458 L34.7632921,70.3613461 L46.8456589,5.78099485 L38.3227036,3.72279458 Z", :fill => "#D8D8D8", :transform => "translate(36.542998, 37.042070) rotate(36.000000) translate(-36.542998, -37.042070) "}
          %path#Rectangle-5{:d => "M5.67100608,58.9235525 L4.26374681,72.2701191 L25.3351489,67.7756633 L22.6911277,55.2932206 L5.67100608,58.9235525 Z", :fill => "#4A4A4A", :transform => "translate(14.845700, 63.860204) rotate(12.000000) translate(-14.845700, -63.860204) "}
        %g#ride-right-stand{"stroke-width" => "4", :transform => "translate(92.937047, 261.584507) scale(-1, 1) translate(-92.937047, -261.584507) translate(58.935688, 222.915493)"}
          %path#Rectangle-5{:d => "M38.3227036,3.72279458 L26.2403367,68.3031458 L34.7632921,70.3613461 L46.8456589,5.78099485 L38.3227036,3.72279458 Z", :fill => "#D8D8D8", :transform => "translate(36.542998, 37.042070) rotate(36.000000) translate(-36.542998, -37.042070) "}
          %path#Rectangle-5{:d => "M5.67100608,58.9235525 L4.26374681,72.2701191 L25.3351489,67.7756633 L22.6911277,55.2932206 L5.67100608,58.9235525 Z", :fill => "#4A4A4A", :transform => "translate(14.845700, 63.860204) rotate(12.000000) translate(-14.845700, -63.860204) "}
        %path#Path-15{:d => "M63.4692029,0 L63.4692029,13.6478873", "stroke-linecap" => "round", "stroke-width" => "8"}
        %rect#Rectangle-5{:fill => "#D8D8D8", :height => "250.760563", "stroke-width" => "4", :width => "8.69384058", :x => "59.1222826", :y => "12.0084507"}
        %ellipse#Oval-3{:cx => "64.3759058", :cy => "234.743662", :fill => "#D8D8D8", :rx => "9.97373188", :ry => "10.0084507", "stroke-width" => "4"}
        %rect#Rectangle-6{:fill => "#D8D8D8", :height => "8.82816901", "stroke-width" => "3", :width => "16.9474638", :x => "54.995471", :y => "28.7957746"}
      %path.cymbal{ :d => "M115.151268,19.1070423 C120.591486,17.2873239 125.565507,8.18873239 136.912138,8.18873239 C148.258769,8.18873239 153.23279,17.2873239 160.486413,19.1070423 C165.322162,20.3201878 202.496981,20.9267606 272.01087,20.9267606 C274.013902,20.9267606 275.637681,23.466051 275.637681,25.4760563 C275.637681,27.4860617 274.013902,28.2056338 272.01087,28.2056338 L3.62681159,28.2056338 C1.62377886,28.2056338 0,27.4860617 0,25.4760563 C0,23.466051 1.62377886,20.9267606 3.62681159,20.9267606 C74.3496377,20.9267606 111.524457,20.3201878 115.151268,19.1070423 Z", :fill => "#F3EB9E", "stroke-linecap" => "round", "stroke-width" => "4" }
    %g.tom-right{:transform => "translate(709.196105, 69.149296) rotate(-6.000000) translate(-709.196105, -69.149296) translate(628.046196, 8.188732)"}
      %rect#Rectangle-2{:fill => "#4A4A4A", :height => "105.183099", :stroke => "#000000", "stroke-width" => "4", :width => "150.139493", :x => "6.53351449", :y => "10.1887324"}
      %rect#Rectangle-7{:fill => "#000000", "fill-opacity" => "0.1", :height => "10.9183099", :width => "146.88587", :x => "8.45923913", :y => "11.828169"}
      %rect#Rectangle-4{:fill => "#D8D8D8", :height => "8.73802817", :stroke => "#000000", "stroke-width" => "4", :width => "157.393116", :x => "2.29891304", :y => "2"}
      %rect#Rectangle-4{:fill => "#D8D8D8", :height => "8.73802817", :stroke => "#000000", "stroke-width" => "4", :width => "157.393116", :x => "2.29891304", :y => "111.183099"}
    %g.tom-left{:transform => "translate(410.283062, 69.149296) rotate(6.000000) translate(-410.283062, -69.149296) translate(329.133152, 8.188732)"}
      %rect#Rectangle-2{:fill => "#4A4A4A", :height => "105.183099", :stroke => "#000000", "stroke-width" => "4", :width => "150.139493", :x => "6.53351449", :y => "10.1887324"}
      %rect#Rectangle-7{:fill => "#000000", "fill-opacity" => "0.1", :height => "10.9183099", :width => "146.88587", :x => "8.16032609", :y => "11.828169"}
      %rect#Rectangle-4{:fill => "#D8D8D8", :height => "8.73802817", :stroke => "#000000", "stroke-width" => "4", :width => "157.393116", :x => "2.29891304", :y => "2"}
      %rect#Rectangle-4{:fill => "#D8D8D8", :height => "8.73802817", :stroke => "#000000", "stroke-width" => "4", :width => "157.393116", :x => "2.29891304", :y => "111.183099"}
    %g{:stroke => "#000000", "stroke-width" => "4", :transform => "translate(706.774909, 285.240845) scale(-1, 1) translate(-706.774909, -285.240845) translate(690.000906, 247.481690)"}
      %path#Rectangle-5{:d => "M22.5969813,2.63547373 L10.606907,59.240699 L19.111352,61.0546671 L31.1014263,4.44944189 L22.5969813,2.63547373 Z", :fill => "#D8D8D8"}
      %path#Rectangle-5{:d => "M5.67100608,57.1038342 L4.26374681,70.4504008 L25.3351489,65.955945 L22.6911277,53.4735023 L5.67100608,57.1038342 Z", :fill => "#4A4A4A", :transform => "translate(14.845700, 62.040485) rotate(12.000000) translate(-14.845700, -62.040485) "}
    %g{:stroke => "#000000", "stroke-width" => "4", :transform => "translate(427.057065, 247.481690)"}
      %path#Rectangle-5{:d => "M22.5969813,2.63547373 L10.606907,59.240699 L19.111352,61.0546671 L31.1014263,4.44944189 L22.5969813,2.63547373 Z", :fill => "#D8D8D8"}
      %path#Rectangle-5{:d => "M5.67100608,57.1038342 L4.26374681,70.4504008 L25.3351489,65.955945 L22.6911277,53.4735023 L5.67100608,57.1038342 Z", :fill => "#4A4A4A", :transform => "translate(14.845700, 62.040485) rotate(12.000000) translate(-14.845700, -62.040485) "}
    %g.bass{:transform => "translate(431.590580, 30.025352)"}
      %ellipse{ :stroke => "#000000", "stroke-width" => "4", :cx => "143.697464", :cy => "143.827736", :fill => "#4A4A4A", :rx => "145.229167", :ry => "145.727751" }
      %ellipse{ :stroke => "#000000", "stroke-width" => "4", :cx => "143.697464", :cy => "143.827736", :fill => "#FDFFFC", :rx => "136.51087", :ry => "136.979105" }
      %polygon{ :fill => 'none', :points => "81.6032609 80.0676056 142.352355 231.104225 203.101449 80.0676056 59.8423913 165.139437 227.582428 165.139437", :stroke => "#FF8796", "stroke-linejoin" => "round", "stroke-width" => "8", :transform => "translate(143.712409, 155.585915) rotate(6.000000) translate(-143.712409, -155.585915)" }
      %path{ :fill => "#000000", "fill-opacity" => "0.1", :d => "M91.5769928,20.0169014 C192.221014,1.81971831 247.529891,51.8619718 277.451087,127.380282 C272.01087,79.4610329 246.623188,43.6732394 201.288043,20.0169014 C149.794923,0.21345579 129.03631,-2.51928136 91.5769928,20.0169014 Z" }

.info
  %div Tap anywhere to play
  %i *Could be noisy, this guy knowns how to blast beat*

.credits
  %span
    by &nbsp;
    %a{ :href => 'https://twitter.com/pixelia_me', :target => '_blank', :rel => 'noopener noreferrer', :title => 'Noel Delgado' }
      %svg{ :height => '12', :viewBox => '0 0 57 30' }
        %path{ :d => 'M28.1312,9.5341 C29.7966,9.5341 32.1025,10.627 34.248,12.368 C49.3297,11.5836 53.8793,-0.4796 55.5773,0.6783 C57.8326,3.2476 50.8638,16.3535 39.4,19.088 C39.8655,20.2628 40.1364,21.4786 40.1364,22.6983 C40.1364,25.9478 38.837,26.7409 36.7281,28.8974 L36.704,28.824 C36.4799,29.0276 36.208,29.2318 35.8945,29.4 C35.8945,29.4 36.1346,27.0065 34.9341,26.7672 C34.9341,26.7672 34.3739,27.4054 33.0133,27.2459 C32.8532,25.8896 32.293,25.4109 32.1329,25.3311 C31.4126,25.4109 30.9324,26.5278 30.132,26.5278 C29.8,26.1969 29.5184,25.5615 29.312,24.972 C29.0201,25.4221 28.6036,26.1128 28.2512,26.2885 C27.8796,26.2885 27.1476,25.2858 26.836,24.832 C26.6262,25.4581 26.3285,26.1707 25.9702,26.5278 C25.1699,26.5278 24.6896,25.4109 23.9694,25.3311 C23.8093,25.4109 23.249,25.8896 23.089,27.2459 C21.7284,27.4054 21.1681,26.7672 21.1681,26.7672 C19.9676,27.0065 20.2077,29.4 20.2077,29.4 C19.6122,29.0804 19.1739,28.6307 18.908,28.304 L18.8667,28.3947 C17.1544,26.3262 16.1259,25.5896 16.1259,22.6983 C16.1259,21.4938 16.3637,20.2895 16.784,19.128 C5.2094,16.4922 -1.8448,3.2615 0.4227,0.6783 C2.119,-0.4785 6.6627,11.5578 21.708,12.364 C23.8143,10.6244 26.1724,9.5341 28.1312,9.5341 Z M28.8514,20.3048 C28.8514,20.3048 30.4121,21.7409 32.213,21.7409 C34.0137,21.7409 35.3343,19.3474 35.3343,19.3474 L28.8514,20.3048 Z M20.6879,19.3474 C20.6879,19.3474 22.2486,21.7409 24.0494,21.7409 C25.8502,21.7409 27.1707,20.3048 27.1707,20.3048 L20.6879,19.3474 Z', 'fill-rule' => 'evenodd' }
              
            
!

CSS

              
                :root {
  font-size: 12px;
  font-family: monospace;
  --color: #fff;
  --bg: #406274;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100vh;
  color: var(--color);
  background-color: var(--bg);
}

a {
  color: inherit;
}

svg {
  display: block;
  fill: currentColor;
}

.info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  text-align: center;
  padding: .5rem;
  opacity: 0;
  transition: opacity 300ms;
}

.info.active {
  opacity: 1;
}

.info > i {
  opacity: 0.75;
}

.credits {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.75rem;
}

.credits > span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
              
            
!

JS

              
                
const internals = {
  running: false,
  speed: 0.075,
  audiosrc: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/blastbeat-loop.mp3',
  timeline: null,
  audio: null,
  svg: {},
  ui: {}
};

internals.svg.characterA = document.querySelector('.character-state-a');
internals.svg.characterB = document.querySelector('.character-state-b');
internals.svg.chbRightArm = internals.svg.characterB.querySelector('.right-arm');
internals.svg.chbHead = internals.svg.characterB.querySelector('.head');
internals.svg.chbBody = internals.svg.characterB.querySelector('.body');
internals.svg.drumBass = document.querySelector('.drum > .bass');
internals.svg.rideCymbal = document.querySelector('.ride > .cymbal');
internals.svg.hiHat = document.querySelector('.drum > .hi-hat');
internals.svg.hiHatTop = document.querySelector('.drum > .hi-hat > .top');
internals.svg.tomRight = document.querySelector('.drum > .tom-right');
internals.svg.tomLeft = document.querySelector('.drum > .tom-left');
internals.ui.info = document.querySelector('.info');

// -------

TweenLite.defaultEase = Power0.easeNone;
TweenLite.set(internals.svg.characterA, { autoAlpha: internals.running ? 0 : 1 });
TweenLite.set(internals.svg.characterB, { autoAlpha: internals.running ? 1: 0 });
TweenLite.set(internals.svg.drumBass, { transformOrigin: 'center'} );
TweenLite.set(internals.svg.tomRight, { transformOrigin: 'left center'} );
TweenLite.set(internals.svg.tomLeft, { transformOrigin: 'right center'} );
TweenLite.set(internals.svg.rideCymbal, { transformOrigin: '136px 8px' });
TweenLite.set(internals.svg.chbRightArm, { transformOrigin: '210px 30px' });

// -------

internals.timeline = new TimelineMax();

internals.timeline.to(internals.svg.chbHead, internals.speed * 2, { y: 20, ease: Sine.easeInOut, repeat: -1, yoyo: true }, 0);
internals.timeline.to(internals.svg.chbBody, internals.speed, { rotation: -2, repeat: -1, yoyo: true }, 0);
internals.timeline.to(internals.svg.chbRightArm, internals.speed, { rotation: 10, repeat: -1, yoyo: true }, 0);
internals.timeline.to(internals.svg.rideCymbal, internals.speed, { rotation: 8, repeat: -1, yoyo: true }, 0);
internals.timeline.to(internals.svg.drumBass, internals.speed, { scale: 1.05, rotation: 2, repeat: -1, yoyo: true }, 0);
internals.timeline.to(internals.svg.hiHat, internals.speed, { y: -0.075, repeat: -1, yoyo: true }, 0)
internals.timeline.to(internals.svg.hiHatTop, internals.speed, { y: -4, repeat: -1, yoyo: true }, 0);
internals.timeline.to(internals.svg.tomRight, internals.speed, { rotation: -2, repeat: -1, yoyo: true }, 0);
internals.timeline.to(internals.svg.tomLeft, internals.speed, { rotation: 2, repeat: -1, yoyo: true }, 0);

internals.timeline[internals.running ? 'play' : 'stop']();

internals.audio = new Audio(internals.audiosrc);
internals.audio.autoplay = internals.running;
internals.audio.crossOrigin = 'Anonymous';

// -------

internals.audio.addEventListener('loadedmetadata', allowToPlay);
internals.audio.addEventListener('timeupdate', loopAudio);

// -------

function allowToPlay() {

  internals.ui.info.classList.add('active');

  window.addEventListener('click', toggle);
  window.addEventListener('touchstart', toggle);
}

const audioBuffer = 0.18;
function loopAudio() {

  if (internals.audio.currentTime > internals.audio.duration - audioBuffer) {
    internals.audio.currentTime = 0;
    internals.audio.play();
  }
}

function play() {

  internals.audio.play();

  TweenLite.set(internals.svg.characterA, { autoAlpha: 0 });
  TweenLite.set(internals.svg.characterB, { autoAlpha: 1 });

  internals.timeline.restart();
}

function pause() {

  internals.audio.pause();

  TweenLite.set(internals.svg.characterA, { autoAlpha: 1 });
  TweenLite.set(internals.svg.characterB, { autoAlpha: 0 });

  internals.timeline.pause();
  internals.timeline.seek(0);
}

function toggle() {
  internals.running = !internals.running;

  if (internals.running) {
    return play();
  }

  return pause();
}
              
            
!
999px

Console