Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ add another resource


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


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.


Auto Save

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.


                <p>(Let's try to change window width)</p>

<p>Inline <code>&lt;svg&gt;</code>:</p>

<div class="svg-box">
  <svg class="svg-box-content" version="1.1" xmlns="" xmlns:xlink="" viewBox="0, 0, 200, 200">

      @media all and (max-width: 500px) {
        #layer-background { display: none; }
        #layer-text path { fill: url(#Gradient_1); }
      <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="252.5" y1="68.023" x2="756.5" y2="940.977" gradientTransform="matrix(0.2, 0, 0, 0.2, 0, 0)">
        <stop offset="0" stop-color="#002C3A"/>
        <stop offset="1" stop-color="#1E3307"/>
    <g id="layer-background">
      <path d="M0.1,0.1 L201.7,0.1 L201.7,201.7 L0.1,201.7 z" fill="url(#Gradient_1)"/>
    <g id="layer-text">
      <path d="M84.781,143.057 L111.429,72.948 L120.395,71.952 L120.395,58.877 L77.185,58.877 L77.185,71.952 L89.637,72.948 C75.566,113.42 74.32,117.28 73.075,120.891 C71.83,116.408 70.834,113.42 57.136,72.948 L69.339,71.952 L69.339,58.877 L25.132,58.877 L25.132,71.952 L33.849,72.948 L60.124,143.057 z" fill="#FCFCF2"/>
      <path d="M174.868,130.873 L165.257,130.873 L165.257,54.831 C155.527,54.951 144.715,56.994 134.985,59.637 L134.985,71.89 L146.157,71.89 L146.157,83.783 C143.273,82.701 138.468,82.221 135.345,82.221 C120.329,82.221 106.514,91.231 106.514,115.136 C106.514,134.117 116.605,145.169 130.059,145.169 C136.666,145.169 142.312,142.526 147.118,138.081 L148.199,145.049 C157.209,145.049 167.299,144.208 174.868,142.646 z M146.157,127.149 C142.312,129.191 138.949,130.152 136.546,130.152 C130.66,130.152 126.095,127.029 126.095,114.175 C126.095,100.36 132.222,97.838 138.348,97.838 C140.511,97.838 143.273,98.078 146.157,98.679 z" fill="#FCFCF2"/>




                /* Needed for Internet Explorer */ 

.svg-box {
    width: 100%;
    height: 0;
    padding-top: 50%; /* Aspect ratio */ 
    position: relative;

.svg-box-content {
    position: absolute;
    top: 0;
    left: 0;

/* etc */

body {
  margin: 2em;