Pen Settings

HTML

CSS

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

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 xmlns="http://www.w3.org/2000/svg" height="200" width="200">
  <mask id="mask" maskUnits="userSpaceOnUse">
    <path d="M 31.9487,100.851 C 96.8992,64.2568 175.699,103.585 161.504,136.176 151.163,159.889 120.894,170.131 88.2534,145.001 62.0856,118.537 58.512,76.2969 69.8584,29.8113" />
  </mask>
  <path mask="url(#mask)" d="M 58.9902,30.707 C 53.2819,46.4929 51.1112,62.0704 51.5918,82.0059 43.1734,84.3378 38.4553,87.1879 34.9297,88.4824 32.3114,89.4368 34.3863,97.3432 38.2891,109.578 43.0064,107.45 47.9678,105.059 53.0879,102.922 56.5396,128.578 65.8829,143.718 77.0391,154.127 89.802,166.132 106.203,172.141 126.244,172.141 132.47,172.141 138.793,170.906 145.232,168.436 151.671,166.082 156.217,163.248 158.902,159.922 160.614,157.88 164.666,149.315 168.205,138.99 170.79,131.695 172.094,126.392 172.094,123.082 172.094,118.156 170.168,113.218 166.297,108.295 162.428,103.37 156.862,99.2856 149.895,95.4316 125.502,81.9217 103.485,76.5884 75.9629,78.3711 74.7667,60.121 78.2384,42.0262 81.3867,34.3184 Z M 93.6055,93.0117 C 102.499,93.0117 111.292,94.8895 119.971,98.6445 128.666,102.514 136.175,107.699 142.5,114.238 148.938,120.776 153.435,126.458 155.461,133.539 152.892,136.537 148.873,140.078 143.949,141.904 139.008,143.831 134.183,144.805 129.473,144.805 116.612,144.805 105.726,140.456 96.8164,131.777 89.1312,124.279 82.5406,114.401 78.4727,95.5977 85.4264,94.0868 91.2409,93.0117 93.6055,93.0117 Z" />
</svg>
              
            
!

CSS

              
                mask path {
    fill: none;
    stroke: white;
    stroke-width: 32;
    stroke-dasharray: 370 370;
    stroke-dashoffset: 370;
    animation: brush 5s infinite;
}
@keyframes brush {
      0% { stroke-dashoffset: 370; }
     20% { stroke-dashoffset: 370; }
     80% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
              
            
!

JS

              
                
              
            
!
999px

Console