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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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="800" height="600" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="800" height="600" fill="#111111"/>
<rect x="99.5" width="1" height="600" fill="8E78FF" fill-opacity="0.1"/>
<rect x="199.5" width="1" height="600" fill="8E78FF" fill-opacity="0.1"/>
<rect x="299.5" width="1" height="600" fill="8E78FF" fill-opacity="0.1"/>
<rect x="399.5" width="1" height="600" fill="8E78FF" fill-opacity="0.1"/>
<rect x="499.5" width="1" height="600" fill="8E78FF" fill-opacity="0.1"/>
<rect x="599.5" width="1" height="600" fill="8E78FF" fill-opacity="0.1"/>
<rect x="699.5" width="1" height="600" fill="8E78FF" fill-opacity="0.1"/>
<rect y="500.5" width="1" height="799" transform="rotate(-90 0 500.5)" fill="black" fill-opacity="0.1"/>
<rect y="400.5" width="1" height="799" transform="rotate(-90 0 400.5)" fill="8E78FF" fill-opacity="0.1"/>
<rect y="300.5" width="1" height="799" transform="rotate(-90 0 300.5)" fill="8E78FF" fill-opacity="0.1"/>
<rect y="200.5" width="1" height="799" transform="rotate(-90 0 200.5)" fill="8E78FF" fill-opacity="0.1"/>
<rect y="100.5" width="1" height="799" transform="rotate(-90 0 100.5)" fill="8E78FF" fill-opacity="0.1"/>
<g filter="url(#filter0_d)">
<path d="M89 116.343V100C89 97.7908 90.7908 96 93 96H109.343C112.907 96 114.691 100.309 112.171 102.828L95.8284 119.171C93.3085 121.691 89 119.907 89 116.343Z" fill="8E78FF" fill-opacity="0.9"/>
</g>
<g filter="url(#filter1_d)">
<path d="M89 103.343V87C89 84.7908 90.7908 83 93 83H109.343C112.907 83 114.691 87.3085 112.171 89.8284L95.8284 106.171C93.3085 108.691 89 106.907 89 103.343Z" fill="8E78FF" fill-opacity="0.9"/>
</g>
<path d="M200 100H600" class="stroke-animation" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 8"/>
<circle cx="200" cy="100" r="2" transform="rotate(-180 200 100)" fill="#8E78FF" stroke="#8E78FF" stroke-width="2"/>
<path d="M100 500V500C100 444.772 144.772 400 200 400V400" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="100" cy="500" r="2" transform="rotate(90 100 500)" fill="#8E78FF" stroke="#8E78FF" stroke-width="2"/>
<path d="M195 400L200 395L205 400L200 405L195 400Z" fill="#8E78FF" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M600 300V300C600 244.772 555.228 200 500 200V200" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle r="2" transform="matrix(0 1 1 0 600 300)" fill="#8E78FF" stroke="#8E78FF" stroke-width="2"/>
<path d="M505 206L499 200L505 194" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M400 300V300C400 244.772 355.228 200 300 200H100" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle r="2" transform="matrix(0 1 1 0 400 300)" fill="#8E78FF" stroke="#8E78FF" stroke-width="2"/>
<path d="M105 206L99 200L105 194" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M200 400V400C200 455.228 244.772 500 300 500V500" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle r="2" transform="matrix(0 -1 -1 0 200 400)" fill="#8E78FF" stroke="#8E78FF" stroke-width="2"/>
<circle r="2" transform="matrix(1 0 0 -1 300 500)" fill="#8E78FF" stroke="#8E78FF" stroke-width="2"/>
<path d="M300 500H580C646.274 500 700 446.274 700 380V300" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-animation" stroke-dasharray="2 8"/>
<circle r="2" transform="matrix(-1 0 0 1 300 500)" fill="#8E78FF" stroke="#8E78FF" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M676 300C676 286.745 686.745 276 700 276C713.255 276 724 286.745 724 300C724 313.255 713.255 324 700 324C686.745 324 676 313.255 676 300Z" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle r="2" transform="matrix(0 -1 -1 0 700 300)" fill="#8E78FF" stroke="#8E78FF" stroke-width="2"/>
<path d="M400 300V300C400 355.228 444.772 400 500 400L600 400" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle r="3" transform="matrix(4.37114e-08 -1 -1 -4.37114e-08 400 300)" fill="#7559FF" stroke="#8E78FF" stroke-width="2"/>
<path d="M595 394L601 400L595 406" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M100 300H200C255.228 300 300 344.772 300 400V400" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-animation" stroke-dasharray="2 8"/>
<path d="M100 297C98.3431 297 97 298.343 97 300C97 301.657 98.3431 303 100 303C101.657 303 103 301.657 103 300C103 298.343 101.657 297 100 297Z" fill="#7559FF" stroke="#8E78FF" stroke-width="2"/>
<path d="M294 395L300 401L306 395" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M600 100V100C655.228 100 700 144.772 700 200V200" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="600" cy="100" r="2" transform="rotate(-180 600 100)" fill="#8E78FF" stroke="#8E78FF" stroke-width="2"/>
<path d="M694 195L700 201L706 195" stroke="#8E78FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<defs>
<filter id="filter0_d" x="85.0791" y="96" width="32.1927" height="32.1927" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="3.92089"/>
<feGaussianBlur stdDeviation="1.96044"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<filter id="filter1_d" x="85.0791" y="83" width="32.1927" height="32.1927" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="3.92089"/>
<feGaussianBlur stdDeviation="1.96044"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>


              
            
!

CSS

              
                body
  background: #111
  margin: 4rem

.flow-svg
  // background: red
  width: fit-content
  height: 360px
  
  svg
    height: 50%

.stroke-animation
  stroke-dasharray: 6, 12
  stroke-dashoffset: 0
  transition: stroke-dasharray .25s
  animation: strokeDance 180s infinite linear
  
@keyframes strokeDance
  0%, 100%
    stroke-dashoffset: 0
  50%
    stroke-dashoffset: -6000
  
@keyframes startBounce
  0%, 100%
              
            
!

JS

              
                
              
            
!
999px

Console