Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

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

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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 

              
                <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