123

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 version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(50,50)" style="fill:none;stroke:#FF4444;">
    <path id="number" d="M 54.167,175 62.5,175 70.833,175 95.833,166.667 104.167,154.167 112.5,141.667 116.667,120.833 120.833,100 120.833,87.5 120.833,75 116.667,54.167 112.5,33.333 104.167,20.833 95.833,8.333 70.833,0 62.5,0 54.167,0 29.167,8.333 20.833,20.833 12.5,33.333 8.333,54.167 4.167,75 4.167,87.5 4.167,100 8.333,120.833 12.5,141.667 20.833,154.167 29.167,166.667 54.167,175" />
    <animate id="to0" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#FFBB33" begin="0s;to9.end" dur="1s" />
    <animate id="to1" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#99CC00" begin="to0.end"    dur="1s" />
    <animate id="to2" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#33B5E5" begin="to1.end"    dur="1s" />
    <animate id="to3" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#AA66CC" begin="to2.end"    dur="1s" />
    <animate id="to4" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#CC0000" begin="to3.end"    dur="1s" />
    <animate id="to5" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#FF8800" begin="to4.end"    dur="1s" />
    <animate id="to6" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#669900" begin="to5.end"    dur="1s" />
    <animate id="to7" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#0099CC" begin="to6.end"    dur="1s" />
    <animate id="to8" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#9933CC" begin="to7.end"    dur="1s" />
    <animate id="to9" xlink:href="#number" attributeName="stroke" attributeType="XML" to="#FF4444" begin="to8.end"    dur="1s" />
    <animate id="to1n" xlink:href="#number" attributeName="d" attributeType="XML" begin="0s;to9.end" dur="0.5s" fill="freeze" to="M 83.333,175 83.333,167.708 83.333,160.417 83.333,153.125 83.333,145.833 83.333,138.542 83.333,131.25 83.333,123.958 83.333,116.667 83.333,109.375 83.333,102.083 83.333,94.792 83.333,87.5 83.333,80.208 83.333,72.917 83.333,65.625 83.333,58.333 83.333,51.042 83.333,43.75 83.333,36.458 83.333,29.167 83.333,21.875 83.333,14.583 83.333,7.292 83.333,0 70.833,12.5 58.333,25 50,29.167 41.667,33.333" />
    <animate id="to2n" xlink:href="#number" attributeName="d" attributeType="XML" begin="to0.end"    dur="0.5s" fill="freeze" to="M 120.833,175 106.25,175 91.667,175 77.083,175 62.5,175 47.917,175 33.333,175 18.75,175 4.167,175 13.426,165.741 22.685,156.481 31.944,147.222 41.204,137.963 50.463,128.704 59.722,119.444 68.981,110.185 78.241,100.926 87.5,91.667 104.167,66.667 112.5,50 112.5,33.333 104.167,16.667 95.833,8.333 79.167,0 45.833,0 29.167,8.333 20.833,16.667 12.5,33.333 12.5,41.667" />
    <animate id="to3n" xlink:href="#number" attributeName="d" attributeType="XML" begin="to1.end"    dur="0.5s" fill="freeze" to="M 4.167,141.667 12.5,158.333 20.833,166.667 45.833,175 70.833,175 95.833,166.667 112.5,150 120.833,125 120.833,108.333 112.5,83.333 104.167,75 87.5,66.667 62.5,66.667 68.75,58.333 75,50 81.25,41.667 87.5,33.333 93.75,25 100,16.667 106.25,8.333 112.5,0 101.042,0 89.583,0 78.125,0 66.667,0 55.208,0 43.75,0 32.292,0 20.833,0" />
    <animate id="to4n" xlink:href="#number" attributeName="d" attributeType="XML" begin="to2.end"    dur="0.5s" fill="freeze" to="M 83.333,175 83.333,157.5 83.333,140 83.333,122.5 83.333,105 83.333,87.5 83.333,70 83.333,52.5 83.333,35 83.333,17.5 83.333,0 74.074,12.963 64.815,25.926 55.556,38.889 46.296,51.852 37.037,64.815 27.778,77.778 18.519,90.741 9.259,103.704 0,116.667 13.889,116.667 27.778,116.667 41.667,116.667 55.556,116.667 69.444,116.667 83.333,116.667 97.222,116.667 111.111,116.667 125,116.667" />
    <animate id="to5n" xlink:href="#number" attributeName="d" attributeType="XML" begin="to3.end"    dur="0.5s" fill="freeze" to="M 4.167,141.667 12.5,158.333 20.833,166.667 45.833,175 70.833,175 95.833,166.667 112.5,150 120.833,125 120.833,108.333 112.5,83.333 95.833,66.667 70.833,58.333 45.833,58.333 20.833,66.667 12.5,75 13.69,64.286 14.881,53.571 16.071,42.857 17.262,32.143 18.452,21.429 19.643,10.714 20.833,0 32.738,0 44.643,0 56.548,0 68.452,0 80.357,0 92.262,0 104.167,0" />
    <animate id="to6n" xlink:href="#number" attributeName="d" attributeType="XML" begin="to4.end"    dur="0.5s" fill="freeze" to="M 8.333,116.667 16.667,91.667 33.333,75 58.333,66.667 66.667,66.667 91.667,75 108.333,91.667 116.667,116.667 116.667,125 108.333,150 91.667,166.667 66.667,175 58.333,175 33.333,166.667 25,158.333 16.667,150 12.5,133.333 8.333,116.667 8.333,95.833 8.333,75 12.5,54.167 16.667,33.333 25,20.833 33.333,8.333 45.833,4.167 58.333,0 75,0 100,8.333 108.333,25" />
    <animate id="to7n" xlink:href="#number" attributeName="d" attributeType="XML" begin="to5.end"    dur="0.5s" fill="freeze" to="M 37.5,175 43.452,162.5 49.405,150 55.357,137.5 61.31,125 67.262,112.5 73.214,100 79.167,87.5 85.119,75 91.071,62.5 97.024,50 102.976,37.5 108.929,25 114.881,12.5 120.833,0 112.5,0 104.167,0 95.833,0 87.5,0 79.167,0 70.833,0 62.5,0 54.167,0 45.833,0 37.5,0 29.167,0 20.833,0 12.5,0 4.167,0" />
    <animate id="to8n" xlink:href="#number" attributeName="d" attributeType="XML" begin="to6.end"    dur="0.5s" fill="freeze" to="M 45.833,175 79.167,175 104.167,166.667 112.5,158.333 120.833,141.667 120.833,116.667 112.5,100 95.833,83.333 70.833,75 37.5,66.667 20.833,58.333 12.5,41.667 12.5,25 20.833,8.333 45.833,0 79.167,0 104.167,8.333 112.5,25 112.5,41.667 104.167,58.333 87.5,66.667 54.167,75 29.167,83.333 12.5,100 4.167,116.667 4.167,141.667 12.5,158.333 20.833,166.667 45.833,175" />
    <animate id="to9n" xlink:href="#number" attributeName="d" attributeType="XML" begin="to7.end"    dur="0.5s" fill="freeze" to="M 16.667,150 25,166.667 50,175 66.667,175 79.167,170.833 91.667,166.667 100,154.167 108.333,141.667 112.5,120.833 116.667,100 116.667,79.167 116.667,58.333 112.5,41.667 108.333,25 100,16.667 91.667,8.333 66.667,0 58.333,0 33.333,8.333 16.667,25 8.333,50 8.333,58.333 16.667,83.333 33.333,100 58.333,108.333 66.667,108.333 91.667,100 108.333,83.333 116.667,58.333" />
    <animate id="to0n" xlink:href="#number" attributeName="d" attributeType="XML" begin="to8.end"    dur="0.5s" fill="freeze" to="M 54.167,175 62.5,175 70.833,175 95.833,166.667 104.167,154.167 112.5,141.667 116.667,120.833 120.833,100 120.833,87.5 120.833,75 116.667,54.167 112.5,33.333 104.167,20.833 95.833,8.333 70.833,0 62.5,0 54.167,0 29.167,8.333 20.833,20.833 12.5,33.333 8.333,54.167 4.167,75 4.167,87.5 4.167,100 8.333,120.833 12.5,141.667 20.833,154.167 29.167,166.667 54.167,175" />
  </g>
</svg>

            
          
!
            
              html, body {
  position: absolute;
  margin: 0px;
  border: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

svg {
  position: absolute;
  margin: 0px;
  border: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}
            
          
!
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