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.

            
              <div id="root">   
<svg width="360" height="360" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="nonzero" fill="white" stroke="black" stroke-width="8">
            <animate dur="3.5s"
                     repeatCount="indefinite"
                     attributeName="d"
                     calcMode="spline"
                     keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
                     values="M147.52375471464035,-17.95384311653484 C134.13782870889807,-17.632243409002232 120.84521006133842,-15.631615908818986 107.95763228570146,-11.99887858277944 C98.2643099538219,-9.26653473497587 88.85061416385557,-5.625091883929527 79.8418626951567,-1.1230259462114418 C68.67014036551349,4.459970847593494 58.19051451472145,11.331796220217457 48.617014870727374,19.352104043283248 C28.167466532023454,36.48394491841835 12.326141167977045,58.457120885709216 2.5342842764360114,83.27251001510871 C1.1351842516149164,86.81823294911943 -0.1367611657982868,90.41282092028139 -1.279117083879072,94.04939278959043 C-1.7004556733142762,95.39068059450558 -2.1040972615427243,96.73746355233166 -2.489936675093844,98.089390743238 C-2.5203230535583234,98.19586035167228 -2.5505989075232076,98.30236147273554 -2.580764188056037,98.40889393429873 C-2.6311897617710294,98.58697815558577 -2.681306289569022,98.76514974018875 -2.731113545122838,98.94340788348126 C-3.3267635982233745,101.07521521430405 -3.878112004523805,103.21915346639841 -4.384802715273111,105.37383813129694 C-5.328445323068311,109.38664557581146 -6.11665550969701,113.43442239228528 -6.747668766115993,117.50810711599934 C-7.436756017875466,121.95670495803068 -7.937792250559495,126.43240260928829 -8.249440068070669,130.92325326796131 C-8.448150478359356,133.78667385616464 -8.56977275680562,136.65492312301419 -8.614174850950207,139.52488684162446 C-8.625872034523015,140.2809433545125 -8.632209478717789,141.03707328881993 -8.633186705840842,141.7932196501886 C-8.641010438450524,147.84696785832494 -8.30525404485016,153.89628138294015 -7.627537128384574,159.9119798760033 C-6.944966062697397,165.97076582556633 -5.916630372772943,171.98558271667332 -4.547561684466899,177.92700017120686 C-2.3773868738878106,187.34501886456934 0.6416659668589562,196.5470345435725 4.472570314038649,205.42019106759238 C5.344324218661094,207.4393510739849 6.25761756521849,209.44032217910296 7.211868083628104,211.42182866401652 C8.1864283607721,213.44550847539185 9.203493946056879,215.44844226469874 10.262388520191678,217.42929813871456 C12.161022465499903,220.9810400165522 14.193081059611398,224.45982976049203 16.354222171673314,227.85823384459064 C20.716183787171673,234.7174380335517 25.5945171269805,241.23426081367006 30.946849524819726,247.35209777978665 C32.36934009500825,248.97803666911364 33.824615528595245,250.57499856272884 35.31178057971012,252.14200105310454 C36.82402766425319,253.73543208872894 38.368931031529804,255.29754946695502 39.94550797784744,256.827359534362 C42.430614385347255,259.23874884818554 44.993347209382435,261.5688282640531 47.62965745208358,263.8139163655867 C48.90969276222871,264.90399749405253 50.20683061810385,265.9738347638236 51.52058767602283,267.02302952869036 C54.94768430922212,269.759982928538 58.485868712739226,272.3548651191777 62.126175687478565,274.8011010799729 C65.466698499252,277.04588622768756 68.89073103245732,279.1638292281462 72.39096647133942,281.15041043408087 C80.73743751751655,285.88750392557154 89.49318959855185,289.8640418067607 98.55233397868722,293.0319333408348 C114.73311417756973,298.6901891822091 131.7180217911647,301.7115016220654 148.8574862442849,301.980323628649 C150.25352070647136,302.00221957448855 151.6497819748283,302.00584128318536 153.04591124111835,301.99118782404037 C170.18018381907277,301.8113503481975 187.17432648221748,298.8802985349751 203.3788912304517,293.3100454335763 C212.47678319745285,290.1826821422604 221.27407661009394,286.2411449384617 229.6638644814621,281.5333324026296 C233.19191939312674,279.5536135593294 236.64362029856147,277.44079834393995 240.01152485911578,275.19944227467374 C243.71081117743802,272.7375501122188 247.30593234907263,270.1226187237247 250.78753772612498,267.3614493549674 C252.20640645072805,266.236182003738 253.60606888931054,265.0869071353819 254.9859199923473,263.9141215612688 C257.5477026754102,261.7367694048682 260.04021985023314,259.4792120279593 262.4597589626161,257.1448120168488 C264.0309206711807,255.62893657959773 265.57089142063745,254.0810619463133 267.07870371691695,252.50216057671827 C268.5670591242769,250.94363343317173 270.0237748949854,249.35519532202946 271.4479593024189,247.7378186035707 C276.8528959121275,241.59969590565288 281.77923991276134,235.05618744738 286.18367570838996,228.16482797831674 C288.35756757641025,224.7634683026302 290.4019591408748,221.28105774611822 292.31246163200683,217.72507212626405 C292.7739592302053,216.86609453769324 293.22759477883295,216.00291608061073 293.673311415878,215.13564495214447 C294.2577974895799,213.9983575938065 294.8286290898383,212.85410444427458 295.38568317823916,211.7031321386205 C300.55948584205623,201.01314043948867 304.52699930483425,189.78033745609832 307.21490334475993,178.21230700991694 C308.6063966498849,172.22368662755073 309.6515556221261,166.1598401092639 310.3451804791249,160.05093576723556 C311.0336640922184,153.98731147378038 311.37467360572583,147.8892637504616 311.3665374754479,141.7866837173066 C311.36552237455874,141.02529787337144 311.3590725154893,140.26392897370374 311.34718839116726,139.50263520559332 C311.29710462088,136.29428251842486 311.1505186159723,133.08816244342816 310.9076292604631,129.88862495962093 C310.6428110709953,126.40022291820668 310.2636519742449,122.92144471903028 309.77076343359215,119.45790052810253 C308.9445695742836,113.65220876217381 307.7998227320826,107.89632854872585 306.3417049690994,102.21631571745473 C305.9916338121507,100.85263391218116 305.62357860198233,99.49363210868616 305.2376355112468,98.13966541349936 C305.16913291730526,97.8993444103327 305.10006740482015,97.65918422150176 305.0304395423937,97.41918682419572 C305.02051932480384,97.38499323675376 305.0105876941948,97.35080296129209 305.0006446523273,97.3166160038726 C304.64286912253317,96.08648371982495 304.27033217022057,94.86069280964355 303.88311439648623,93.63950848216471 C302.7265381955027,89.99196741876023 301.4394838494549,86.38709078340153 300.0244342535673,82.83183285195946 C290.12257828097734,57.953798834738045 274.1355101360333,35.95860433069548 253.5281950799983,18.861765604040386 C243.87724673805027,10.854865776823774 233.31845970186487,4.010301112110606 222.06922974414124,-1.5310050606508412 C213.00733680818857,-5.994841558936742 203.54307015089557,-9.590461496668633 193.8031844439569,-12.269708831624826 C180.90038024373868,-15.819011647598192 167.6032663745213,-17.73557261630099 154.22332534254798,-17.974496640964844 C151.9902357520869,-18.014372657691148 149.75655600183197,-18.007486640384535 147.52375471464035,-17.95384311653484 Z
;M147.980432,1.05440909 C141.320667,1.05440909 127.995697,1.99490914 113.682568,8.3110276 C105.498973,11.9199051 98.137936,16.7996235 91.8047068,22.8149374 C84.2539679,29.9821696 78.1026658,38.8189836 73.5249526,49.0836478 C66.820873,64.112994 68.4123436,89.4279906 69.6904959,109.771551 C69.8319945,111.982114 69.9758255,114.257192 70.107217,116.473974 C69.123724,116.925569 67.5291435,117.402037 65.1788672,117.402037 C61.397278,117.402037 56.9004212,116.193378 51.8165783,113.811815 C50.3207359,113.115378 48.613423,112.763274 46.7296256,112.763274 C43.7029549,112.763274 40.512239,113.654028 37.744464,115.28086 C34.2621988,117.325087 32.0122155,120.21421 31.4011281,123.417351 C30.9984013,125.536197 31.0178379,129.724143 35.6709652,133.971161 C38.2303796,136.309197 41.9901997,138.465352 46.8431355,140.382884 C48.116623,140.884225 49.6280147,141.363025 51.2288149,141.870584 C56.7838014,143.635771 65.1913066,146.302593 67.3837576,151.461353 C68.4947549,154.076876 68.016614,157.518639 65.9664391,161.678603 C65.912794,161.792085 59.9728217,173.644308 50.7133557,185.456154 C31.4011281,210.091815 15.9116953,210.091815 6.8876605,211.57796 C3.3439756,212.15936 -0.0111280764,218.00453 1.74473035,221.982533 C3.50058878,225.960536 6.4997055,228.179729 11.900754,230.69032 C18.5006534,233.755107 28.3713475,236.33332 41.2360588,238.350343 C41.8860194,239.586207 42.560859,242.692189 43.0281153,244.818807 C43.5171408,247.079116 44.0271577,249.403162 44.7540874,251.87178 C45.5385494,254.546376 47.573175,257.742522 52.8000714,257.742522 C54.7810519,257.742522 57.059024,257.296367 59.6969623,256.784921 C63.5601853,256.027081 68.8430591,254.993308 75.4367388,254.993308 C79.0923786,254.993308 82.880965,255.315099 86.6944302,255.948576 C94.0453606,257.172003 100.382477,261.64754 107.714748,266.830395 C118.446873,274.415022 130.594762,283 149.155181,283 C149.661311,283 152.04424,283 152.846584,283 C171.412445,283 183.557224,274.411913 194.277688,266.833504 C201.628618,261.641322 207.958737,257.172003 215.307335,255.948576 C219.119245,255.315876 222.907054,254.993308 226.564249,254.993308 C232.863269,254.993308 237.850707,255.796231 242.304025,256.664444 C245.143382,257.223366 249.263457,257.512611 249.546888,257.514781 C253.369683,257.514781 256.178664,255.416921 257.250788,251.745862 C257.962946,249.329321 258.471408,247.059685 258.972872,244.761289 C259.409808,242.768362 260.107971,239.573771 260.757932,238.324693 C273.631195,236.303784 283.498002,233.731011 290.098679,230.667002 C295.487288,228.16807 298.805508,225.324806 300.246928,221.987974 C300.679198,220.987624 300.931874,219.950742 300.988629,218.895206 C301.191548,215.31431 298.657012,212.151587 295.110995,211.570187 C255.005469,204.961814 236.088194,161.783535 236.031439,161.672385 C233.981264,157.510867 233.507788,154.072989 234.619563,151.452803 C236.807349,146.298707 245.209412,143.631884 250.768286,141.867475 C252.377638,141.360693 253.894472,140.878784 255.157852,140.379775 C260.630428,138.218957 264.541853,135.874702 267.122259,133.212543 C270.20413,130.038938 270.804333,126.998247 270.767015,125.008429 C270.672941,120.194001 266.991645,115.915892 261.13578,113.821142 C259.157909,113.003451 256.902483,112.572064 254.605852,112.572064 C253.04237,112.572064 250.72708,112.786592 248.535406,113.809483 C243.843406,116.004501 239.640431,117.20461 236.032216,117.37561 C234.113433,117.278451 232.767641,116.86261 231.896103,116.465424 C231.969185,115.213496 232.105241,112.986869 232.304272,109.785542 C233.589422,89.4287679 235.186334,64.0943394 228.479145,49.0541114 C223.881995,38.7529155 217.708924,29.8935605 210.127864,22.7107829 C203.769756,16.6915826 196.38384,11.8126414 188.170701,8.2060958 C173.877787,1.93661368 160.553594,1 153.8845,1 C150.130381,1.0342 148.162359,1.05233636 147.980432,1.05440909 Z;M147.52375471464035,-17.95384311653484 C134.13782870889807,-17.632243409002232 120.84521006133842,-15.631615908818986 107.95763228570146,-11.99887858277944 C98.2643099538219,-9.26653473497587 88.85061416385557,-5.625091883929527 79.8418626951567,-1.1230259462114418 C68.67014036551349,4.459970847593494 58.19051451472145,11.331796220217457 48.617014870727374,19.352104043283248 C28.167466532023454,36.48394491841835 12.326141167977045,58.457120885709216 2.5342842764360114,83.27251001510871 C1.1351842516149164,86.81823294911943 -0.1367611657982868,90.41282092028139 -1.279117083879072,94.04939278959043 C-1.7004556733142762,95.39068059450558 -2.1040972615427243,96.73746355233166 -2.489936675093844,98.089390743238 C-2.5203230535583234,98.19586035167228 -2.5505989075232076,98.30236147273554 -2.580764188056037,98.40889393429873 C-2.6311897617710294,98.58697815558577 -2.681306289569022,98.76514974018875 -2.731113545122838,98.94340788348126 C-3.3267635982233745,101.07521521430405 -3.878112004523805,103.21915346639841 -4.384802715273111,105.37383813129694 C-5.328445323068311,109.38664557581146 -6.11665550969701,113.43442239228528 -6.747668766115993,117.50810711599934 C-7.436756017875466,121.95670495803068 -7.937792250559495,126.43240260928829 -8.249440068070669,130.92325326796131 C-8.448150478359356,133.78667385616464 -8.56977275680562,136.65492312301419 -8.614174850950207,139.52488684162446 C-8.625872034523015,140.2809433545125 -8.632209478717789,141.03707328881993 -8.633186705840842,141.7932196501886 C-8.641010438450524,147.84696785832494 -8.30525404485016,153.89628138294015 -7.627537128384574,159.9119798760033 C-6.944966062697397,165.97076582556633 -5.916630372772943,171.98558271667332 -4.547561684466899,177.92700017120686 C-2.3773868738878106,187.34501886456934 0.6416659668589562,196.5470345435725 4.472570314038649,205.42019106759238 C5.344324218661094,207.4393510739849 6.25761756521849,209.44032217910296 7.211868083628104,211.42182866401652 C8.1864283607721,213.44550847539185 9.203493946056879,215.44844226469874 10.262388520191678,217.42929813871456 C12.161022465499903,220.9810400165522 14.193081059611398,224.45982976049203 16.354222171673314,227.85823384459064 C20.716183787171673,234.7174380335517 25.5945171269805,241.23426081367006 30.946849524819726,247.35209777978665 C32.36934009500825,248.97803666911364 33.824615528595245,250.57499856272884 35.31178057971012,252.14200105310454 C36.82402766425319,253.73543208872894 38.368931031529804,255.29754946695502 39.94550797784744,256.827359534362 C42.430614385347255,259.23874884818554 44.993347209382435,261.5688282640531 47.62965745208358,263.8139163655867 C48.90969276222871,264.90399749405253 50.20683061810385,265.9738347638236 51.52058767602283,267.02302952869036 C54.94768430922212,269.759982928538 58.485868712739226,272.3548651191777 62.126175687478565,274.8011010799729 C65.466698499252,277.04588622768756 68.89073103245732,279.1638292281462 72.39096647133942,281.15041043408087 C80.73743751751655,285.88750392557154 89.49318959855185,289.8640418067607 98.55233397868722,293.0319333408348 C114.73311417756973,298.6901891822091 131.7180217911647,301.7115016220654 148.8574862442849,301.980323628649 C150.25352070647136,302.00221957448855 151.6497819748283,302.00584128318536 153.04591124111835,301.99118782404037 C170.18018381907277,301.8113503481975 187.17432648221748,298.8802985349751 203.3788912304517,293.3100454335763 C212.47678319745285,290.1826821422604 221.27407661009394,286.2411449384617 229.6638644814621,281.5333324026296 C233.19191939312674,279.5536135593294 236.64362029856147,277.44079834393995 240.01152485911578,275.19944227467374 C243.71081117743802,272.7375501122188 247.30593234907263,270.1226187237247 250.78753772612498,267.3614493549674 C252.20640645072805,266.236182003738 253.60606888931054,265.0869071353819 254.9859199923473,263.9141215612688 C257.5477026754102,261.7367694048682 260.04021985023314,259.4792120279593 262.4597589626161,257.1448120168488 C264.0309206711807,255.62893657959773 265.57089142063745,254.0810619463133 267.07870371691695,252.50216057671827 C268.5670591242769,250.94363343317173 270.0237748949854,249.35519532202946 271.4479593024189,247.7378186035707 C276.8528959121275,241.59969590565288 281.77923991276134,235.05618744738 286.18367570838996,228.16482797831674 C288.35756757641025,224.7634683026302 290.4019591408748,221.28105774611822 292.31246163200683,217.72507212626405 C292.7739592302053,216.86609453769324 293.22759477883295,216.00291608061073 293.673311415878,215.13564495214447 C294.2577974895799,213.9983575938065 294.8286290898383,212.85410444427458 295.38568317823916,211.7031321386205 C300.55948584205623,201.01314043948867 304.52699930483425,189.78033745609832 307.21490334475993,178.21230700991694 C308.6063966498849,172.22368662755073 309.6515556221261,166.1598401092639 310.3451804791249,160.05093576723556 C311.0336640922184,153.98731147378038 311.37467360572583,147.8892637504616 311.3665374754479,141.7866837173066 C311.36552237455874,141.02529787337144 311.3590725154893,140.26392897370374 311.34718839116726,139.50263520559332 C311.29710462088,136.29428251842486 311.1505186159723,133.08816244342816 310.9076292604631,129.88862495962093 C310.6428110709953,126.40022291820668 310.2636519742449,122.92144471903028 309.77076343359215,119.45790052810253 C308.9445695742836,113.65220876217381 307.7998227320826,107.89632854872585 306.3417049690994,102.21631571745473 C305.9916338121507,100.85263391218116 305.62357860198233,99.49363210868616 305.2376355112468,98.13966541349936 C305.16913291730526,97.8993444103327 305.10006740482015,97.65918422150176 305.0304395423937,97.41918682419572 C305.02051932480384,97.38499323675376 305.0105876941948,97.35080296129209 305.0006446523273,97.3166160038726 C304.64286912253317,96.08648371982495 304.27033217022057,94.86069280964355 303.88311439648623,93.63950848216471 C302.7265381955027,89.99196741876023 301.4394838494549,86.38709078340153 300.0244342535673,82.83183285195946 C290.12257828097734,57.953798834738045 274.1355101360333,35.95860433069548 253.5281950799983,18.861765604040386 C243.87724673805027,10.854865776823774 233.31845970186487,4.010301112110606 222.06922974414124,-1.5310050606508412 C213.00733680818857,-5.994841558936742 203.54307015089557,-9.590461496668633 193.8031844439569,-12.269708831624826 C180.90038024373868,-15.819011647598192 167.6032663745213,-17.73557261630099 154.22332534254798,-17.974496640964844 C151.9902357520869,-18.014372657691148 149.75655600183197,-18.007486640384535 147.52375471464035,-17.95384311653484 Z
;"
            ></animate>
        </path>
        
</svg>
  </div> 
            
          
!
            
              body {
  background: hsl(59, 100%, 50%);
    overflow: hidden;
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

svg {
  transform: scale(.5);
  overflow: visible;
}
            
          
!
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.

Console