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 version="1.1" 
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink" 
      width="600" height="600"
      viewBox="0 0 600 600"
 >

    <symbol id="romb">
      <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 374 374">
      <defs>
        <style>
          .cls-1{opacity:0.3;}
          .cls-2{opacity:0.5;}
          .cls-3{fill:#c2fff5;}
        </style>
      </defs>

      <title>romb</title>

      <g class="cls-1"><image width="374" height="374" xlink:href="data:image/png;base64,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"/></g>
        <g class="cls-2"><image width="364" height="364" transform="translate(5 5)" xlink:href="data:image/png;base64,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"/></g><path class="cls-3" d="M535.95,575.81l-145.1,145.1L535.95,866l145.1-145.1ZM394.06,720.91L535.95,579,677.84,720.91,535.95,862.8Z" transform="translate(-349 -534)"/>
    </svg>
    </symbol>
</svg>
      <svg class="backgroun" width="320" height="520" id="Layer_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 130">

      <rect id="black" width="80" height="130" opacity/>

      <use xlink:href="#romb" x="0" y="0" width="80px" height="80px"/>
      <use xlink:href="#romb" x="0" y="10" width="80px" height="80px"/>
      <use xlink:href="#romb" x="0" y="20" width="80px" height="80px"/>
      <use xlink:href="#romb" x="0" y="30" width="80px" height="80px"/>
      <use xlink:href="#romb" x="0" y="40" width="80px" height="80px"/>
      </svg>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
    <script>
     
    TweenMax.staggerFrom(".backgroun use", 1, {opacity:0, x:-100}, 0.5);
    </script>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console