Pen Settings

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.

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

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

Next Step Leave tour

HTML

            
                <svg width="187px" height="50px" viewBox="0 0 187 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="t" transform="translate(-70.000000, -111.000000)" fill="#1E90FF" fill-rule="nonzero">
            <path d="M86.576,130.488 C89.24,130.488 92.264,132.936 93.416,135.096 C94.496,137.472 93.344,140.136 91.976,142.944 C91.4,144.024 90.968,145.104 90.68,145.896 C90.176,147.264 89.528,147.408 88.088,146.688 C86.792,145.896 85.568,144.528 85.568,142.584 C85.568,141.648 85.928,140.208 87.224,137.256 C87.944,135.816 88.448,134.52 88.16,134.232 C87.296,133.512 82.616,138.192 79.736,144.024 C78.296,146.976 77.576,149.928 77.576,152.088 C77.576,155.256 78.872,157.2 80.816,157.272 C86.216,157.344 91.184,151.8 94.064,147.48 C94.712,146.4 95.792,146.112 96.224,147.336 C96.584,148.272 96.584,150.144 95.288,152.16 C92.552,156.48 86.72,160.008 81.104,160.08 C74.48,160.152 70.808,155.904 70.808,150.144 C70.808,147.552 71.528,144.672 73.04,141.792 C76.712,134.376 82.4,130.488 86.576,130.488 Z M118.256,120.408 C118.256,121.416 118.184,122.208 117.824,123.432 C115.592,132 107.744,140.496 101.408,144.744 C99.968,148.416 99.032,151.656 99.032,154.176 C99.032,155.904 99.464,157.128 100.4,157.128 C103.712,157.128 107.888,152.304 110.624,147.12 C111.56,145.32 113.144,145.32 113.648,147.192 C113.936,148.272 113.864,149.928 112.928,151.872 C111.848,154.032 106.52,159.936 100.472,159.936 C96.08,159.936 93.344,157.416 93.344,152.448 C93.344,151.224 93.488,149.784 93.848,148.344 C96.656,136.392 104.792,123.072 111.848,115.656 C113.216,114.288 114.512,113.856 115.88,115.152 C117.464,116.52 118.256,118.536 118.256,120.408 Z M114.224,122.208 C113.936,122.064 112.064,124.872 109.616,129.12 C107.744,132.288 104.576,137.688 104.072,138.912 C107.168,135.888 109.616,132.576 111.272,129.768 C113.72,125.664 114.656,122.496 114.224,122.208 Z M121.28,127.248 C121.28,125.232 122.792,123.36 124.448,123.36 C126.464,123.36 128.408,125.952 128.408,128.04 C128.408,129.984 127.328,131.64 125.528,131.64 C123.224,131.64 121.28,129.48 121.28,127.248 Z M126.608,152.52 C124.448,157.056 119.48,160.08 115.232,160.08 C110.84,160.08 108.896,157.56 108.896,153.96 C108.896,152.592 109.184,151.08 109.76,149.208 C111.56,144.168 116.168,135.816 118.832,132.072 C119.912,130.632 120.776,130.488 121.712,131.568 C123.08,133.008 123.656,136.104 121.784,139.704 C120.416,142.8 117.104,148.2 115.88,151.08 C115.232,152.736 114.872,154.248 114.872,155.4 C114.872,156.552 115.16,157.2 115.952,157.2 C118.832,157.2 122.576,152.376 124.808,147.48 C125.384,146.184 126.32,146.328 126.968,147.624 C127.616,148.848 127.544,150.648 126.608,152.52 Z M140,130.488 C142.664,130.488 145.688,132.936 146.84,135.096 C147.92,137.472 146.768,140.136 145.4,142.944 C144.824,144.024 144.392,145.104 144.104,145.896 C143.6,147.264 142.952,147.408 141.512,146.688 C140.216,145.896 138.992,144.528 138.992,142.584 C138.992,141.648 139.352,140.208 140.648,137.256 C141.368,135.816 141.872,134.52 141.584,134.232 C140.72,133.512 136.04,138.192 133.16,144.024 C131.72,146.976 131,149.928 131,152.088 C131,155.256 132.296,157.2 134.24,157.272 C139.64,157.344 144.608,151.8 147.488,147.48 C148.136,146.4 149.216,146.112 149.648,147.336 C150.008,148.272 150.008,150.144 148.712,152.16 C145.976,156.48 140.144,160.008 134.528,160.08 C127.904,160.152 124.232,155.904 124.232,150.144 C124.232,147.552 124.952,144.672 126.464,141.792 C130.136,134.376 135.824,130.488 140,130.488 Z M169.88,115.512 C169.88,118.32 166.64,123.792 162.32,131.64 C163.616,130.704 164.84,130.2 166.064,129.768 C169.304,128.616 171.248,129.768 172.832,133.08 C173.408,134.16 173.696,135.312 173.696,136.536 C173.696,138.264 172.976,140.064 171.176,141.792 C168.872,144.024 165.92,146.04 161.672,147.48 C161.96,152.88 163.688,156.84 165.848,156.84 C168.296,156.84 172.256,151.8 174.272,147.624 C175.136,145.896 176.072,145.752 176.72,147.552 C177.08,148.488 176.936,150.288 175.856,152.16 C174.488,154.68 170.816,159.864 164.696,159.792 C159.368,159.72 155.048,155.544 155.048,145.464 C153.104,148.92 151.16,153.312 148.856,158.712 C148.352,159.72 147.2,160.08 146.336,159 C145.616,158.208 145.184,157.2 145.184,155.688 C145.184,154.536 145.4,152.952 146.12,150.864 C149.36,141.648 159.728,121.344 166.064,112.632 C167.216,111.192 168.368,111.192 169.16,112.704 C169.592,113.568 169.88,114.504 169.88,115.512 Z M168.872,133.296 C168.296,132.432 165.776,133.296 162.464,135.816 C160.016,137.688 158,140.28 155.84,143.88 C157.928,143.16 162.968,140.928 165.344,138.984 C168.224,136.608 169.52,134.232 168.872,133.296 Z M201.992,130.848 C202.64,131.928 203,133.152 203,134.304 C203,134.88 202.928,135.528 202.784,136.248 C205.88,133.224 209.912,130.488 212.216,130.488 C214.52,130.488 216.032,133.08 216.032,136.104 C219.272,133.224 223.088,130.776 225.392,130.848 C227.48,130.92 228.632,132.864 228.632,135.24 C228.632,137.688 227.12,141 224.168,145.536 C222.152,148.632 220.28,151.8 220.28,154.32 C220.28,155.976 221,157.128 222.152,157.128 C224.384,157.128 227.912,152.088 230.576,147.696 C231.224,146.616 231.944,146.544 232.592,147.192 C233.384,147.984 233.456,150.72 232.592,152.376 C230.576,156.552 225.464,160.152 221,160.152 C216.104,160.152 213.44,157.488 213.44,153.6 C213.44,152.304 213.728,150.72 214.52,148.92 C215.672,146.472 218.048,142.584 219.704,139.992 C221.288,137.616 223.016,135.456 222.44,135.456 C221.864,135.456 220.352,136.176 216.104,140.424 C210.488,146.04 207.032,152.88 204.008,159.576 C203.288,160.944 202.28,161.16 201.128,160.008 C200.048,158.928 199.544,157.92 199.544,156.048 C199.544,154.824 200.12,152.52 200.84,150.72 C201.848,148.128 204.224,144.24 206.168,141.216 C208.112,137.976 210.128,135.24 209.48,135.24 C208.904,135.24 206.096,136.824 201.776,141.576 C197.744,145.896 194.432,152.448 191.624,159.072 C191.12,160.224 190.328,160.656 189.104,159.576 C188.096,158.712 187.376,157.416 187.376,155.76 C187.376,154.752 187.592,153.528 188.168,151.872 C189.68,147.552 194.864,137.544 199.256,130.848 C200.192,129.48 201.272,129.552 201.992,130.848 Z M248.576,134.448 C247.496,133.584 242.168,137.976 238.712,144.888 C239.288,145.248 239.792,145.392 240.296,145.392 C242.024,145.392 244.328,143.232 245.768,141.288 C247.856,138.48 249.368,135.096 248.576,134.448 Z M253.976,137.328 C253.976,141.648 249.152,149.208 242.816,149.208 C241.088,149.208 239.36,148.704 237.704,147.624 C237.272,149.064 237.056,150.576 237.056,151.872 C237.056,155.04 238.352,157.272 240.512,157.272 C245.984,157.272 250.808,151.944 253.76,147.48 C254.552,146.328 255.488,146.184 256.064,147.624 C256.28,148.272 256.352,150.36 255.056,152.304 C252.032,156.696 246.272,160.08 240.656,160.152 C233.96,160.224 230.288,155.832 230.288,150.072 C230.288,147.48 231.008,144.672 232.52,141.792 C236.264,134.16 242.096,130.344 246.272,130.344 C247.28,130.344 248.072,130.488 248.792,130.92 C250.808,132.072 252.248,133.224 253.256,134.664 C253.688,135.312 253.976,136.392 253.976,137.328 Z" id="clickme"></path>
        </g>
    </g>
</svg>
  <div id="toggle" class="toggle"/>
!

CSS

            
              $primary-main: dodgerblue;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  font-size: 72px;
  color: $primary-main;
  overflow: hidden;
}

svg {
  overflow: visible;
}


#list-item {
  display: flex
}

.toggle {
  position: relative;
  height: 60px;
  width: 60px;
  margin-left: 16px;
}

.toggle:before {
  content: " ";
  position: absolute;
  border-radius: 10px;
  top: 75%;
  left: 0;
  height: 8px;
  width: 53%;
  background: $primary-main;
  transform-origin: right center;
  transform: rotate(45deg);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.5)
}

.toggle:after {
  content: " ";
  position: absolute;
  border-radius: 10px;
  top: 75%;
  right: 0;
  height: 8px;
  width: 54%;
  background: $primary-main;
  transform-origin: left center;
  transform: rotate(-45deg);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.5);
}


.open:before {
  transform: rotate(-45deg);
  top: 40%;
}

.open:after {
  transform: rotate(45deg);
  top: 40%;
}
!

JS

            
              const toggle = document.getElementById("toggle");

document.body.onclick = () => toggle.classList.toggle("open")

document.body.touchstart = () => toggle.classList.toggle("open")
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console