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

              
                #error408
  h1
    span 4
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
      circle(cx="50" cy="50" fill="none" stroke-linecap="round" r="40" stroke-width="8" stroke="#1B1B1B" stroke-dasharray="60 60")
        animateTransform(attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1.5s" begin="0s" repeatCount="indefinite")
      circle(cx="50" cy="50" fill="none" stroke-linecap="round" r="30" stroke-width="8" stroke="#222222" stroke-dasharray="50 50" stroke-dashoffset="50")
        animateTransform(attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-360 50 50" keyTimes="0;1" dur="1.5s" begin="0s" repeatCount="indefinite")
    </svg>
    span 8
  p.subtitle Request Timeout
              
            
!

CSS

              
                html,
body
  width: 100%
  height: 100%
  padding: 0
  margin: 0
  background-color: rgb(50, 51, 59)
  font-family: sans-serif
  
#error408
  padding-top: calc(50vh - 25vmin)
  h1
    justify-content: center
    padding: 0
    margin: 0 auto
    font-family: sans-serif
    font-weight: normal
    font-size: 50vmin
    text-align: center
    color: rgba(255,255,255,0.3)
    animation: 60s infinite colorWheelTxt
    svg
      height: 35vmin
      width: 35vmin
      circle:first-of-type
        animation: 30s infinite colorWheel1
      circle:last-of-type
        animation: 20s infinite colorWheel2
  .subtitle
    position: relative
    top: -8vmin
    text-align: center
    color: rgba(255,255,255,0.4)
    padding: 0
    margin: 0 auto
    font-size: 5vmin
    
@keyframes colorWheelTxt
  from
    color: rgb(75, 75, 75)
  10%
    color: turquoise
  20%
    color: springgreen
  30%
    color: gold
  40%
    color: coral
  50%
    color: firebrick
  60%
    color: deeppink
  70%
    color: purple
  80%
    color: indigo
  90%
    color: midnightblue
  to
    color: rgb(75, 75, 75)
    
@keyframes colorWheel1
  from
    stroke: rgb(75, 75, 75)
  15%
    stroke: turquoise
  30%
    stroke: springgreen
  45%
    stroke: gold
  75%
    stroke: coral
  90%
    stroke: firebrick
  to
    stroke: rgb(75, 75, 75)
    
@keyframes colorWheel2
  from
    stroke: rgb(75, 75, 75)
  15%
    stroke: firebrick
  30%
    stroke: deeppink
  45%
    stroke: purple
  75%
    stroke: indigo
  90%
    stroke: midnightblue
  to
    stroke: rgb(75, 75, 75)
              
            
!

JS

              
                
              
            
!
999px

Console