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.

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

            
              <div class="container">
  <svg class="snake" viewBox="0 0 100 100">
            <path d="M 5,50.000015 H 35 C 35,50.000015 35.966338,49.750005 36.875001,49.750005 C 37.783664,49.750005 38.749998,50.000015 38.749998,50.000015 C 38.749998,50.000015 39.622117,50.500015 40.624999,50.500015 C 41.627882,50.500015 42.5,50.000015 42.5,50.000015 C 42.5,50.000015 43.476418,48.5 44.374997,48.5 C 45.273576,48.5 46.249998,50.000015 46.249998,50.000015 C 46.249998,50.000015 47.22755,53 48.124999,53 C 49.022448,53 50,50.000015 50,50.000015 C 50,50.000015 50.977541,47 51.875001,47 C 52.772461,47 53.749998,50.000015 53.749998,50.000015 C 53.749998,50.000015 54.726428,51.5 55.624999,51.5 C 56.52357,51.5 57.5,50.000015 57.5,50.000015 C 57.5,50.000015 58.486661,49.500025 59.375001,49.500025 C 60.263341,49.500025 61.249998,50.000015 61.249998,50.000015 C 61.249998,50.000015 62.232702,50.249995 63.124999,50.249995 C 64.017296,50.249995 65,50.000015 65,50.000015 H 95"/>
        </svg>
  <div class="menu">
    <div class="item"><svg class="icon" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" x="0" y="0" version="1.1" id="svg3337" width="100" height="100" viewBox="0 0 100 100"><defs id="defs3299"><style id="style3297">.cls-2{fill:none;stroke:#000;stroke-linecap:round;stroke-width:4px;stroke-linejoin:round}</style></defs><path id="polyline3303" fill="none" stroke="#000" stroke-width="3.12948" stroke-linecap="round" stroke-miterlimit="10" d="M91.777 1.58L74.612 18.755l6.634 6.634L98.42 8.223"/><path class="cls-2" id="line3305" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M55.248 44.752L19.846 80.154"/><path class="cls-2" id="line3307" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M53.59 43.093L14.315 74.622"/><path class="cls-2" id="line3309" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M51.931 41.434L9.887 69.091"/><path class="cls-2" id="line3311" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M49.717 39.22L6.014 63.004"/><path class="cls-2" id="line3313" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M47.503 37.006L3.244 56.925"/><path class="cls-2" id="line3315" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M45.289 34.792L1.586 50.838"/><path class="cls-2" id="line3317" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M56.907 46.41L25.378 85.685"/><path class="cls-2" id="line3319" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M58.566 48.069L30.909 90.113"/><path class="cls-2" id="line3321" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M60.78 50.283L36.996 93.986"/><path class="cls-2" id="line3323" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M62.994 52.497L43.075 96.756"/><path class="cls-2" id="line3325" fill="none" stroke="#000" stroke-width="3.129" stroke-linecap="round" stroke-linejoin="round" d="M65.208 54.711L49.162 98.414"/><path d="M26.363 37.124c1.135 5.64 6.9 15.522 13.95 22.563 7.05 7.041 16.923 12.807 22.563 13.95" id="path3327" fill="none" stroke="#000" stroke-width="4.694" stroke-miterlimit="10"/><path d="M67.508 52.794l.673-14.082 14.176-12.22-8.848-8.85L61.312 31.82l-14.083.673a3.13 3.13 0 0 0-2.989 3.13c0 3.465 2.692 8.504 7.16 12.971 4.466 4.467 9.505 7.127 12.97 7.159a3.13 3.13 0 0 0 3.138-2.958z" id="path3329" fill="none" stroke="#000" stroke-width="3.129" stroke-miterlimit="10"/><path d="M73.509 17.643L61.312 31.819l-14.083.673a3.13 3.13 0 0 0-2.989 3.13c0 3.465 2.692 8.504 7.16 12.971 4.466 4.467 9.505 7.127 12.97 7.159a3.13 3.13 0 0 0 3.13-2.989l.673-14.083 14.184-12.189zm-2.214 11.062a2.347 2.347 0 1 1 3.317 0 2.347 2.347 0 0 1-3.317 0z" id="path3331" stroke-width=".782"/></svg>Rakes</div>
    <div class="item"><svg class="icon" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" x="0" y="0" version="1.1" id="svg2113" width="100" height="100" viewBox="0 0 100 100"><defs id="defs2093"><style id="style2091">.cls-2{fill:none;stroke:#000;stroke-width:4px;stroke-linejoin:round}</style></defs><path id="polyline2097" fill="none" stroke="#000" stroke-width="3.15332" stroke-linecap="round" stroke-miterlimit="10" d="M91.722 1.6L72.053 21.261l6.693 6.693L98.407 8.286"/><path class="cls-2" d="M53.67 40.773s-11.155 12.266-8.924 14.49c2.23 2.222 14.49-8.917 14.49-8.917" id="path2099" fill="none" stroke="#000" stroke-width="3.153" stroke-linejoin="round"/><path class="cls-2" d="M59.487 46.598l20.371-17.532-8.916-8.916-17.533 20.37-12.014-12.014L5.408 64.501l-1.916 1.94-1.915 1.892c1.781 4.146 6.606 10.58 13.062 17.028 6.457 6.448 12.89 11.28 17.036 13.062l1.916-1.915 1.947-1.908 35.964-35.987z" id="path2101" fill="none" stroke="#000" stroke-width="3.153" stroke-linejoin="round"/><path class="cls-2" d="M72.053 62.5a2.365 2.365 0 0 0 0-3.343l-.56-.56" id="path2103" fill="none" stroke="#000" stroke-width="3.153" stroke-linejoin="round"/><path class="cls-2" d="M41.395 28.506l-.56-.56a2.365 2.365 0 0 0-3.342 0" id="path2105" fill="none" stroke="#000" stroke-width="3.153" stroke-linejoin="round"/><path d="M53.67 40.426v.347s-11.155 12.266-8.924 14.49c2.23 2.222 14.49-8.917 14.49-8.917l-.048.386h.473l-.174-.173 20.371-17.532-8.916-8.877L53.67 40.213zM68.71 27.954a2.365 2.365 0 1 1 0 3.343 2.365 2.365 0 0 1 0-3.343z" id="path2107" stroke-width=".788"/></svg>Shovels</div>
    <div class="item"><svg class="icon" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="100" height="100" viewBox="0 0 100 100"><circle cx="-16.798" cy="70.723" r="1.566" transform="rotate(-45)" /><path d="M99.048 33.45a4.7 4.7 0 0 0-6.14-2.546l-.18.086-37.219 21.367-2.85 1.214a4.7 4.7 0 0 0-2.178 1.848l-.666-.368a4.7 4.7 0 0 0-5.608.783l-.548.548.54-.54a4.7 4.7 0 0 0 .784-5.608l-.337-.705a4.644 4.644 0 0 0 1.856-2.17l1.183-2.85L69.02 7.29a1.418 1.418 0 0 0 .086-.18 4.7 4.7 0 0 0-2.53-6.14L65.127.367a4.7 4.7 0 0 0-6.101 2.451L37.652 40.037s0 .062-.04.094l-.046.086-1.222 2.945a4.7 4.7 0 0 0-.314 1.417 41.66 41.66 0 0 0-.595 10.308l-2.02 3.43c-3.564 1.88-9.4 5.107-17.145 10.002C.786 78.054.002 87.962.002 88.385a1.566 1.566 0 0 0 2.35 1.441l19.071-11.247L10.184 97.65a1.566 1.566 0 0 0 1.347 2.35h.094c.415 0 10.331-.783 20.066-16.236 4.778-7.597 7.99-13.315 10.002-17.145l3.423-2.02a41.51 41.51 0 0 0 10.307-.596 4.7 4.7 0 0 0 1.418-.337l2.945-1.221.117-.063h.063L97.2 40.992a4.7 4.7 0 0 0 2.444-6.093zM39.242 44.36l.618-1.496 4.34 1.801-.62 1.496a1.566 1.566 0 0 1-2.067.846l-1.449-.603a1.566 1.566 0 0 1-.846-2.044zm22.54-40.062a1.465 1.465 0 0 0 .095-.18 1.566 1.566 0 0 1 2.044-.846l1.449.603a1.566 1.566 0 0 1 .877 1.966l-20.67 35.981-4.315-1.785zM4.193 85.111a20.301 20.301 0 0 1 1.01-1.958c1.755-3.015 5.39-7.566 12.713-12.18a285.093 285.093 0 0 1 12.367-7.393L24.72 72.98zm24.852-3.008C24.44 89.427 19.88 93.07 16.865 94.815a20.301 20.301 0 0 1-1.958 1.01L38.38 56.038a1.566 1.566 0 0 0 .204-.971 31.556 31.556 0 0 1 0-5.945c.11.055.203.125.32.172l1.45.603a4.7 4.7 0 0 0 1.073.298l.846 1.527a1.566 1.566 0 0 1-.282 1.849l-.54.54a4.7 4.7 0 0 0-.212 6.423c-1.16 2.498-4.786 9.805-12.195 21.57zm15.9-20.7a1.52 1.52 0 0 0-.713.11c.188-.4.297-.65.313-.705a1.566 1.566 0 0 0-.047-1.332 4.7 4.7 0 0 0 1.379-.948l.548-.548a1.566 1.566 0 0 1 1.864-.258l1.566.846a4.7 4.7 0 0 0 .274 1.112l.596 1.449c.047.11.117.211.172.32a31.556 31.556 0 0 1-5.952-.046zm10.714-.666a1.566 1.566 0 0 1-2.044-.846l-.595-1.449a1.566 1.566 0 0 1 .845-2.044l1.496-.619 1.817 4.379zM95.9 38.102l-.18.086-35.754 20.568-1.786-4.316 36.028-20.67a1.566 1.566 0 0 1 1.966.878l.603 1.45a1.566 1.566 0 0 1-.877 2.043z"/></svg>Scissors</div>
  </div>
</div>
            
          
!

CSS

            
              @import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.container {
  overflow: hidden;
  position: relative;
  padding-bottom: 40px;
}
.snake {
  position: absolute;
  transition: transform 500ms;
  width: 100%;
  transform: translateY(-50%);
  top: 86%;
}
.snake path {
  fill: none;
  stroke: black;
  stroke-dasharray: 29 100;
  stroke-width: 1.5px;
}
.pos1 .snake {
  transform: translateX(33.33%) translateY(-50%);
}
.pos2 .snake {
  transform: translateX(66.67%) translateY(-50%);
}
.left .snake path {
  stroke-dashoffset: 0;
  transform: translateX(0);
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}
.right .snake path {
  stroke-dashoffset: -70px;
  transform: translateX(-60%);
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}
.instant .snake path {
  transition: none;
}
.menu {
  display: flex;
  height: 100px;
  left: 9px;
  position: relative;
}
.item {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 136px;
}
.icon {
  width: 50px;
}

            
          
!

JS

            
              const container = document.querySelector(".container");
const menu = document.querySelector(".menu");
const items = document.querySelectorAll(".item");
let current = 0;
items.forEach((item, i) =>
  item.addEventListener("click", () => {
    if (i < current) {
      // ltr
      container.className = "container right instant";
      void container.offsetHeight; // force reflow
      container.className = `container left pos${i}`;
    } else if (i > current) {
      // rtl
      container.className = "container left instant";
      void container.offsetHeight; // force reflow
      container.className = `container right pos${i}`;
    }
    current = i;
  })
);

            
          
!
999px

Console