Pen Settings

HTML

CSS

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

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

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.

HTML

              
                <div>
  <svg width="77" height="56" viewBox="0 0 77 56" fill="none" aria-hidden="true">
    <path d="M46 36H32C31.4701 35.9984 30.9623 35.7872 30.5875 35.4125C30.2128 35.0377 30.0016 34.5299 30 34V20C30.0021 19.4702 30.2135 18.9627 30.5881 18.5881C30.9627 18.2135 31.4702 18.0021 32 18H46C46.5299 18.0016 47.0377 18.2128 47.4125 18.5875C47.7872 18.9623 47.9984 19.4701 48 20V34C48 34.5304 47.7893 35.0391 47.4142 35.4142C47.0391 35.7893 46.5304 36 46 36ZM33.2 36L37.4 31.15L41.6 26.3L44.8 29.7L48 33.1L33.2 36ZM35.8 21.4C36.3321 21.3998 36.8478 21.5842 37.2593 21.9217C37.6707 22.2591 37.9524 22.7288 38.0564 23.2507C38.1603 23.7725 38.0801 24.3143 37.8294 24.7837C37.5787 25.253 37.173 25.6209 36.6814 25.8247C36.1898 26.0285 35.6428 26.0555 35.1336 25.9011C34.6243 25.7468 34.1843 25.4206 33.8886 24.9783C33.5929 24.5359 33.4597 24.0046 33.5117 23.4751C33.5638 22.9455 33.7978 22.4503 34.174 22.074C34.3871 21.8599 34.6406 21.6901 34.9196 21.5745C35.1987 21.4588 35.4979 21.3995 35.8 21.4V21.4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
    <path class="animate-shape-roam-1" d="M58.6785 8.26405C58.9702 7.97233 59.3659 7.80844 59.7784 7.80844C60.191 7.80844 60.5866 7.97233 60.8784 8.26405C61.1701 8.55577 61.334 8.95143 61.334 9.36399C61.334 9.77655 61.1701 10.1722 60.8784 10.4639C60.7326 10.5954 60.5601 10.6937 60.3728 10.7522C60.1854 10.8107 59.9876 10.828 59.793 10.803C59.3758 10.788 58.9142 10.6996 58.4428 10.6996M62.6069 6.53557C63.4248 7.35354 63.9338 8.42982 64.0472 9.58102C64.1606 10.7322 63.8713 11.8871 63.2286 12.8489C62.5859 13.8108 61.6296 14.52 60.5227 14.8558C59.4157 15.1916 58.2266 15.1331 57.1578 14.6904C56.0891 14.2478 55.207 13.4482 54.6617 12.428C54.1164 11.4078 53.9417 10.2301 54.1674 9.09559C54.3931 7.96104 55.0051 6.93985 55.8994 6.206C56.7936 5.47216 57.9145 5.07107 59.0713 5.07107C59.7281 5.07023 60.3785 5.19917 60.9852 5.4505C61.592 5.70183 62.1431 6.07058 62.6069 6.53557V6.53557ZM57.225 11.9174L57.2643 11.8781L57.225 11.9174Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="50%"></path>
    <path class="animate-shape-roam-3" d="M18.6886 41.2523C18.4519 40.9143 18.0907 40.6842 17.6845 40.6126C17.2782 40.541 16.8601 40.6336 16.5221 40.8703C16.1842 41.1069 15.954 41.4681 15.8824 41.8744C15.8108 42.2807 15.9035 42.6988 16.1401 43.0367C16.2608 43.1915 16.4136 43.3183 16.588 43.4085C16.7623 43.4986 16.9541 43.55 17.1501 43.5591C17.5636 43.6168 18.0335 43.6099 18.4978 43.6918M15.12 38.8679C14.1725 39.5314 13.4843 40.503 13.1727 41.617C12.8612 42.731 12.9455 43.9186 13.4114 44.9774C13.8773 46.0362 14.6959 46.9007 15.7278 47.4236C16.7596 47.9465 17.9408 48.0955 19.0702 47.8451C20.1995 47.5947 21.2071 46.9605 21.9213 46.0505C22.6355 45.1405 23.012 44.011 22.9867 42.8545C22.9615 41.698 22.536 40.5861 21.7829 39.7081C21.0297 38.8301 19.9954 38.2405 18.8562 38.0396C18.2095 37.9247 17.5466 37.9388 16.9054 38.0809C16.2643 38.2231 15.6575 38.4905 15.12 38.8679V38.8679ZM19.4856 45.1026L19.4537 45.0571L19.4856 45.1026Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="50%"></path>
    <circle class="animate-shape-roam-1" cx="18" cy="12" r="3" fill="currentColor" fill-opacity="50%"></circle>
    <circle class="animate-shape-roam-2" cx="6.5" cy="1.5" r="1.5" fill="currentColor" fill-opacity="50%"></circle>
    <circle class="animate-shape-roam-3" cx="70.5" cy="1.5" r="1.5" fill="currentColor" fill-opacity="50%"></circle>
    <circle class="animate-shape-roam-2" cx="75.5" cy="54.5" r="1.5" fill="currentColor" fill-opacity="50%"></circle>
    <circle class="animate-shape-roam-3" cx="6.5" cy="54.5" r="1.5" fill="currentColor" fill-opacity="50%" style="animation-delay:2s"></circle>
    <circle class="animate-shape-roam-1" cx="58" cy="42" r="3" fill="currentColor" fill-opacity="50%"></circle>
    <path class="animate-shape-roam-3" d="M-0.000199058 28.237L9.41478 25.1779L6.23685 31.415L-0.000199058 28.237Z" fill="currentColor" fill-opacity="50%" style="animation-delay:1s"></path>
    <path class="animate-shape-roam-2" d="M67.8472 34.242L71.3948 25L74.242 31.3948L67.8472 34.242Z" fill="currentColor" fill-opacity="50%" style="animation-delay:2s"></path>
  </svg>
</div>
              
            
!

CSS

              
                div {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

svg {
  height: 11rem;
  width: 11rem;
  color: #9ca3af;
}

@keyframes shape-roam-1 {
  0% {
    transform: translate(0);
  }

  50% {
    transform: translate(1px,-1px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes shape-roam-2 {
  0% {
      transform: translate(0);
  }
  50% {
      transform: translate(-2px, -4px);
  }
  100% {
      transform: translate(0);
  }
}

@keyframes shape-roam-3 {
  0% {
      transform: translate(0);
  }
  50% {
      transform: translate(2px,-2px);
  }
  100% {
      transform: translate(0);
  }
}

.animate-shape-roam-1 {
  -webkit-animation: shape-roam-1 6s infinite;
  animation: shape-roam-1 6s infinite;
}

.animate-shape-roam-2 {
  -webkit-animation: shape-roam-2 7s infinite;
  animation: shape-roam-2 7s infinite;
}

.animate-shape-roam-3 {
  -webkit-animation: shape-roam-3 8s infinite;
  animation: shape-roam-3 8s infinite;
}
              
            
!

JS

              
                
              
            
!
999px

Console