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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 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.

HTML

              
                <p>CSS animations within SVG</p>

<ul>
  <li>
    <code>&ltimg /&gt;</code>
    <img src="http://brokensquare.com/junk/run2.svg" />
  </li>
  <li>
    <code>background-image</code>
    <div class="bgsvg"></div>
  </li>
  <li>
    <code>&lt;svg /&gt;</code>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" viewBox="0 -0.5 16 32.5" shape-rendering="crispEdges">
  <style type="text/css">
    @-webkit-keyframes frameTransform {
      100% {
        -webkit-transform: translateX(-48px);
                transform: translateX(-48px);
      }
    }
    @keyframes frameTransform {
      100% {
        -webkit-transform: translateX(-48px);
                transform: translateX(-48px);
      }
    }
    .frames {
      -webkit-animation: frameTransform 400ms steps(3) infinite;
              animation: frameTransform 400ms steps(3) infinite;
    }
  </style>
      <defs>
        <symbol id="frame-1">
          <path stroke="#ffe3ab" d="M6 0h5M4 1h6M3 2h6M3 3h11M4 12h4M10 12h1M7 13h2M11 13h1M8 14h2M11 14h1M8 15h2M12 15h1M8 16h2M12 16h1M7 17h3M12 17h1M6 18h3M10 18h1M4 19h9M5 20h8M5 21h8M4 22h9M4 23h7M3 24h1M5 24h6M3 25h2M6 25h5M3 26h3M8 26h3M4 27h4M5 28h1" />
          <path stroke="#ffa347" d="M10 1h1M9 2h2M6 4h2M9 4h3M3 5h2M6 5h2M10 5h4M3 6h2M7 6h8M3 7h2M7 7h3M11 7h4M3 8h5M4 9h5M5 10h8M8 11h2M14 12h1M13 13h3M13 14h3M13 15h3M14 16h1M9 18h1M12 18h1M0 20h5M0 21h5M0 22h4M1 23h3" />
          <path stroke="#f83800" d="M3 4h3M8 4h1M2 5h1M5 5h1M8 5h2M2 6h1M5 6h2M1 7h2M5 7h2M10 7h1M1 8h2M8 8h6M1 9h3M9 9h5M3 10h2M5 11h3M8 12h2M3 13h4M9 13h2M2 14h6M10 14h1M12 14h1M1 15h7M10 15h2M1 16h7M10 16h2M13 16h1M15 16h1M1 17h6M10 17h2M13 17h2M0 18h6M11 18h1M13 18h1M0 19h4M15 21h1M14 22h2M11 23h5M4 24h1M11 24h5M2 25h1M5 25h1M11 25h5M0 26h3M6 26h2M11 26h5M0 27h4M11 27h5M0 28h5M1 29h3M1 30h3M2 31h3" />
        </symbol>
        <symbol id="frame-2">
          <path stroke="#ffe3ab" d="M7 2h5M5 3h6M4 4h6M4 5h11M5 13h3M4 14h1M8 14h1M4 15h1M9 15h1M4 16h1M10 16h2M3 17h2M3 18h3M3 19h3M3 20h4M3 21h6M12 21h1M3 22h10M3 23h9M4 24h7M12 24h2M4 25h5M11 25h3M4 26h4M9 26h4M4 27h3M9 27h4" />
          <path stroke="#ffa347" d="M11 3h1M10 4h2M7 6h2M10 6h3M4 7h2M7 7h2M11 7h4M4 8h2M8 8h8M4 9h2M8 9h3M12 9h4M4 10h5M5 11h5M6 12h8M8 13h3M12 16h2M12 17h4M12 18h4M13 19h3M13 20h3" />
          <path stroke="#f83800" d="M4 6h3M9 6h1M3 7h1M6 7h1M9 7h2M3 8h1M6 8h2M2 9h2M6 9h2M11 9h1M2 10h2M9 10h6M3 11h2M10 11h5M5 12h1M4 13h1M3 14h1M5 14h3M9 14h1M3 15h1M5 15h4M10 15h1M2 16h2M5 16h5M2 17h1M5 17h7M2 18h1M6 18h6M6 19h7M7 20h6M9 21h3M12 23h1M0 24h4M11 24h1M0 25h4M9 25h2M0 26h4M8 26h1M0 27h4M0 28h4M9 28h4M0 29h2M9 29h4M0 30h1M9 30h6M9 31h6" />
        </symbol>
        <symbol id="frame-3">
          <path stroke="#ffe3ab" d="M6 1h5M4 2h6M3 3h6M3 4h11M4 12h4M4 13h1M7 13h2M3 14h1M8 14h2M3 15h1M8 15h2M3 16h1M8 16h3M3 17h1M3 18h1M2 19h2M12 19h1M2 20h3M12 20h2M2 21h4M11 21h3M2 22h6M10 22h4M3 23h5M11 23h2M4 24h3M4 25h2M5 26h2M6 27h3" />
          <path stroke="#ffa347" d="M10 2h1M9 3h2M6 5h2M9 5h3M3 6h2M6 6h2M10 6h4M3 7h2M7 7h8M3 8h2M7 8h3M11 8h4M3 9h5M4 10h5M5 11h8M8 12h2M9 17h2M8 18h4M8 19h4M8 20h4M8 21h3" />
          <path stroke="#f83800" d="M3 5h3M8 5h1M2 6h1M5 6h1M8 6h2M2 7h1M5 7h2M1 8h2M5 8h2M10 8h1M1 9h2M8 9h6M2 10h2M9 10h5M3 11h2M3 13h1M5 13h2M9 13h2M2 14h1M4 14h4M10 14h1M2 15h1M4 15h4M10 15h2M2 16h1M4 16h4M11 16h1M2 17h1M4 17h5M11 17h1M2 18h1M4 18h4M4 19h4M5 20h3M6 21h2M8 22h2M8 23h3M7 24h6M6 25h6M7 26h4M5 27h1M9 27h3M5 28h4M10 28h2M4 29h5M4 30h7M6 31h5" />
        </symbol>
      </defs>
      <g class="frames">
        <use xlink:href="#frame-1" />
        <use xlink:href="#frame-2" x="16px" />
        <use xlink:href="#frame-3" x="32px" />
      </g>
    </svg>
  </li>
</ul>
              
            
!

CSS

              
                /*@frames: 3;
@frameWidth: 16px;
@speed: 400ms;

@keyframes frameTransform {
  100% { transform: translateX(@frameWidth * @frames * -1); } // We could just do -100%, but Firefox doesn't like it: https://bugzilla.mozilla.org/show_bug.cgi?id=1151258
}

.frames {
  transform-origin: 0 0;
  animation: frameTransform @speed steps(@frames) infinite;
}*/



.bgsvg { 
  background: url(http://brokensquare.com/junk/run2.svg) no-repeat;
  background-size: contain;
  //height: 32px;
  
  &::after {
    content: ' ';
    display: block;
    height: 0;
    padding-bottom: 200%;
  }
}

img,
svg,
.bgsvg { 
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  margin: 0.25em auto 1em;
}

body { padding: 1em; text-align: center; }
ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul { display: flex; }
li { 
  display: inline-block;
  width: 30%; 
  padding: 2em; 
}
code { font-size: 0.7em; }
              
            
!

JS

              
                
              
            
!
999px

Console