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.

            
              <svg class="dt-logo" preserveAspectRatio="xMinYMax meet" xml:space="preserve" width="150px" height="64px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 150000 64000">
 <defs>
	<style type="text/css">
	 <![CDATA[
		.dt1 {fill:#333333}
		.dt2 {fill:#666666}
	 ]]>
	</style>
 </defs>
 <g>
   <path class="dt1" d="M44450 10636l0 11901c0,350 341,633 764,633l370 0c-312,356 -681,801 -967,1669 -80,242 -107,567 -140,848l-27 236 0 119c0,236 -57,-493 27,561l0 25 33 144c-60,-96 252,1127 762,1741 1223,1295 2055,1411 2908,1788 109,50 196,92 314,140 -599,212 -1225,470 -2026,922l-510 349c-196,162 -401,379 -597,590 -196,236 -458,656 -628,1035 -57,188 -144,472 -196,729l-60 398 0 212c33,259 -56,-448 33,591l27 47 29 212c23,70 0,70 110,444 175,542 656,1271 801,1344 423,471 766,656 1106,891 882,472 1626,704 2303,939 -793,286 -1646,567 -2761,1344 -392,282 -853,705 -1222,1556 -81,186 -141,492 -196,728l-60 397 0 191c0,236 -58,-377 29,545l0 43 57 215 29 114c0,96 60,258 118,396 568,1322 989,1368 1334,1723 369,262 683,398 995,537 971,428 1822,664 2559,923 -79,46 -139,72 -225,89 -882,381 -1793,640 -2871,1296 -458,333 -1400,873 -1654,2495l-29 282 0 73c-31,-49 58,753 29,422l0 46 58 188c-29,0 138,541 345,898 223,420 392,543 537,680 144,138 314,307 429,380 1078,704 1902,892 2675,1151 764,258 1449,468 1959,728 27,0 0,0 27,25 -107,70 -196,113 -341,232 -481,286 -1051,707 -1507,1201 -225,211 -421,541 -599,801l-136 188 -89 209 0 26 -27 22 -33 98c-27,112 -56,235 -85,331 -22,210 -51,422 -51,608 29,258 51,517 109,729 233,873 597,1156 597,1156 0,0 743,-1812 3017,-2638 233,-138 574,-306 910,-591 205,-210 341,-236 626,-633 116,-187 256,-421 341,-656l149 -330 78 -423 0 -120 29 0c-29,72 60,-657 29,-372l-58 -405c-49,-584 -283,-965 -508,-1320 -452,-584 -910,-892 -1311,-1101 -824,-471 -1561,-729 -2302,-1013 -343,-119 -686,-258 -1029,-404 488,-186 1029,-372 1625,-560 488,-168 969,-332 1537,-565 256,-139 570,-284 881,-520 147,-97 372,-281 539,-445 89,-120 145,-144 285,-331 145,-187 283,-420 401,-656 254,-639 196,-663 225,-801l29 -121c86,-868 31,-277 31,-519l0 -65 -31 -193c-29,-236 -81,-468 -138,-682 -116,-419 -312,-705 -517,-1034 -169,-236 -336,-398 -539,-586 -708,-565 -1255,-799 -1821,-1059 -481,-211 -942,-380 -1392,-543 225,-97 450,-164 684,-235 541,-210 1078,-379 1706,-728 342,-162 685,-355 1106,-729 205,-236 372,-309 715,-939 167,-285 282,-591 342,-876l87 -258c227,-1198 -202,-2259 -654,-2889 -459,-545 -859,-850 -1196,-1062 -686,-405 -1251,-637 -1770,-849 -140,-48 -256,-90 -392,-140 56,-23 107,-46 167,-73 488,-162 967,-328 1536,-630 286,-122 597,-331 940,-567 341,-355 715,-429 1252,-1692 256,-711 167,-617 227,-779l29 -95 57 -566 -29 -66 0 -193c-28,-234 -57,-494 -117,-730 -223,-867 -733,-1505 -1047,-1787 -746,-683 -1253,-892 -1741,-1103 -882,-379 -1588,-615 -2245,-851 541,-444 1167,-939 1648,-1552 261,-302 401,-633 597,-965l888 0c423,0 766,-283 766,-633l0 -11901 -9078 0zm3701 32021c-31,0 -58,-48 0,0z"/>
   <path class="dt1" d="M37287 10381c3093,0 6732,138 9241,255l5377 0c2509,-117 6149,-255 9240,-255 3036,0 5530,453 7730,853 1656,302 3088,562 4401,562 2068,0 2551,-608 2551,-6594 0,-2532 -189,-3872 -633,-4483 -318,-438 -852,-595 -2382,-698 -1253,-85 -2561,103 -4217,343 -2070,299 -4646,670 -8259,670l-22240 0c-3612,0 -6188,-372 -8259,-670 -1656,-239 -2963,-428 -4216,-343 -1529,103 -2064,260 -2381,698 -445,611 -634,1951 -634,4483 0,5986 484,6594 2550,6594 1315,0 2746,-260 4403,-562 2199,-400 4693,-853 7728,-853z"/>
   <path class="dt2" d="M0 28464c1669,-45 3028,-487 4078,-1349 1049,-850 1756,-2022 2099,-3502 343,-1492 530,-4034 552,-7636 12,-3602 67,-5978 166,-7127 199,-1812 553,-3260 1083,-4365 519,-1094 1172,-1978 1945,-2641 773,-652 1768,-1160 2972,-1502 818,-211 2144,-321 4000,-321l1802 0 0 5105 -995 0c-2221,0 -3691,409 -4420,1216 -718,806 -1083,2607 -1083,5414 0,5646 -122,9216 -364,10707 -387,2310 -1061,4089 -2001,5337 -950,1249 -2431,2365 -4464,3326 2398,995 4133,2509 5216,4542 1072,2033 1613,5370 1613,10000 0,4199 22,6696 66,7492 177,1470 608,2486 1304,3072 708,585 2078,873 4122,873l1006 0 0 5105 -1813 0c-2110,0 -3646,-177 -4596,-519 -1371,-498 -2520,-1293 -3426,-2409 -906,-1106 -1492,-2509 -1757,-4210 -276,-1702 -420,-4498 -442,-8376 -22,-3878 -210,-6564 -553,-8045 -342,-1491 -1027,-2663 -2066,-3525 -1049,-861 -2386,-1314 -4044,-1359l0 -5303z"/>
   <path class="dt2" d="M97370 28464c-1662,-45 -3016,-487 -4062,-1349 -1046,-850 -1751,-2022 -2092,-3502 -342,-1492 -529,-4034 -551,-7636 -11,-3602 -66,-5978 -165,-7127 -198,-1812 -550,-3260 -1079,-4365 -517,-1094 -1167,-1978 -1937,-2641 -771,-652 -1762,-1160 -2962,-1502 -815,-211 -2136,-321 -3985,-321l-1795 0 0 5105 991 0c2213,0 3677,409 4403,1216 716,806 1079,2607 1079,5414 0,5646 122,9216 364,10707 385,2310 1057,4089 1992,5337 947,1249 2423,2365 4449,3326 -2389,995 -4118,2509 -5197,4542 -1068,2033 -1608,5370 -1608,10000 0,4199 -22,6696 -65,7492 -177,1470 -606,2486 -1299,3072 -705,585 -2071,873 -4107,873l-1002 0 0 5105 1806 0c2102,0 3633,-177 4580,-519 1365,-498 2510,-1293 3412,-2409 903,-1106 1487,-2509 1751,-4210 275,-1702 418,-4498 441,-8376 22,-3878 209,-6564 550,-8045 341,-1491 1024,-2663 2059,-3525 1046,-861 2378,-1314 4029,-1359l0 -5303z"/>
 </g>
</svg>
            
          
!
            
              .dt-logo:hover .dt1 {
  fill: #DD8800;
}
.dt-logo:hover .dt2 {
  fill: #229900;
            
          
!
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