Pen Settings

HTML

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.

CSS

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 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.

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.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

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

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.

Powered by Algolia
About Packages

Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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 

              
                <svg style="display: none">
    <symbol id="robot" viewBox="0 0 340 536">
        <path d="M99.581 504.076c0 13.056-10.583 23.639-23.638 23.639-13.055 0-23.638-10.583-23.638-23.639 0-13.055 10.583-23.638 23.638-23.638 13.055 0 23.638 10.583 23.638 23.638m67.395-2.467c0 13.056-10.584 23.639-23.639 23.639-13.054 0-23.637-10.583-23.637-23.639 0-13.054 10.583-23.637 23.637-23.637 13.055 0 23.639 10.583 23.639 23.637m67.751 0c0 13.056-10.584 23.639-23.639 23.639-13.054 0-23.637-10.583-23.637-23.639 0-13.054 10.583-23.637 23.637-23.637 13.055 0 23.639 10.583 23.639 23.637" fill="#fff" />
        <path d="M153.643 501.609c0 5.692-4.614 10.306-10.306 10.306-5.691 0-10.304-4.614-10.304-10.306 0-5.691 4.613-10.304 10.304-10.304 5.692 0 10.306 4.613 10.306 10.304m69.045 0c0 5.692-4.614 10.306-10.306 10.306-5.691 0-10.304-4.614-10.304-10.306 0-5.691 4.613-10.304 10.304-10.304 5.692 0 10.306 4.613 10.306 10.304m-136.581-.001c0 5.692-4.614 10.306-10.305 10.306-5.692 0-10.305-4.614-10.305-10.306 0-5.691 4.613-10.304 10.305-10.304 5.691 0 10.305 4.613 10.305 10.304" fill="#D1312C" />
        <path d="M139.421 17.747h5.662v53.232h-5.662v-53.232z" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M160.375 79.12c0 9.265-7.893 16.776-17.627 16.776-9.734 0-17.626-7.511-17.626-16.776 0-9.266 7.892-16.777 17.626-16.777 9.734 0 17.627 7.511 17.627 16.777" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M127.798 292.562h33.317v7.918h-33.317v-7.918zm0-15.833h33.317v7.916h-33.317v-7.916z" fill="#fff" />
        <path d="M127.798 284.645h33.317v7.917h-33.317v-7.917z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M228.285 159.653v95.374l-174.328-1.51v-93.864c0-48.139 39.024-87.164 87.164-87.164 48.138 0 87.164 39.025 87.164 87.164m-74.848-147.569c0 6.567-5.324 11.892-11.893 11.892-6.566 0-11.892-5.325-11.892-11.892 0-6.568 5.326-11.893 11.892-11.893 6.569 0 11.893 5.325 11.893 11.893" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M18.891 253.823l-6.392-3.114 41.47-85.157 6.392 3.113-41.47 85.158" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M151.548 171.55c0 21.528-17.452 38.98-38.979 38.98-21.528 0-38.98-17.452-38.98-38.98 0-21.529 17.452-38.981 38.98-38.981 21.527 0 38.979 17.452 38.979 38.981" fill="#fff" />
        <path d="M112.569 135.069c-20.115 0-36.48 16.366-36.48 36.481 0 20.115 16.365 36.48 36.48 36.48s36.479-16.365 36.479-36.48-16.364-36.481-36.479-36.481zm0 77.961c-22.872 0-41.48-18.608-41.48-41.48 0-22.873 18.608-41.481 41.48-41.481 22.872 0 41.479 18.608 41.479 41.481 0 22.872-18.607 41.48-41.479 41.48z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M257.197 306.265h10.642v20.103h-10.642v-20.103zm-21.281 0h10.64v20.103h-10.64v-20.103zm63.847 0h10.641v20.103h-10.641v-20.103z" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M267.839 306.265h10.641v20.103h-10.641v-20.103zm-21.283 0h10.641v20.103h-10.641v-20.103zm63.848 0h10.642v20.103h-10.642v-20.103zm-21.281 0h10.64v20.103h-10.64v-20.103z" fill="#fff" />
        <path d="M278.48 306.265h10.643v20.103h-10.643v-20.103z" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M339.271 299.582l-.006 9.152-9.99-.006-.012 16.592 9.988.01-.011 9.153-19.342-.016.031-34.901 19.342.016" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M127.435 400.173h33.316v11.875h-33.316v-11.875z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M127.435 435.798h33.316v11.876h-33.316v-11.876zm0-47.501h33.316v11.876h-33.316v-11.876zm0 23.751h33.316v11.874h-33.316v-11.874z" fill="#fff" />
        <path d="M127.435 423.922h33.316v11.876h-33.316v-11.876z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M144.093 172.914c0 17.41-14.114 31.524-31.524 31.524-17.411 0-31.525-14.114-31.525-31.524 0-17.411 14.114-31.524 31.525-31.524 17.41 0 31.524 14.113 31.524 31.524" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M134.749 172.914c0 12.25-9.931 22.18-22.18 22.18-12.25 0-22.18-9.93-22.18-22.18s9.93-22.181 22.18-22.181c12.249 0 22.18 9.931 22.18 22.181" fill="#fff" />
        <path d="M124.96 172.914c0 6.844-5.548 12.392-12.391 12.392-6.844 0-12.392-5.548-12.392-12.392 0-6.844 5.548-12.392 12.392-12.392 6.843 0 12.391 5.548 12.391 12.392" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M211.089 182.191c0 14.951-12.121 27.071-27.072 27.071-14.949 0-27.07-12.12-27.07-27.071 0-14.951 12.121-27.071 27.07-27.071 14.951 0 27.072 12.12 27.072 27.071" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M203.064 182.191c0 10.52-8.527 19.047-19.047 19.047-10.519 0-19.047-8.527-19.047-19.047 0-10.52 8.528-19.047 19.047-19.047 10.52 0 19.047 8.527 19.047 19.047" fill="#fff" />
        <path d="M194.66 182.191c0 5.877-4.766 10.642-10.643 10.642-5.875 0-10.641-4.765-10.641-10.642s4.766-10.641 10.641-10.641c5.877 0 10.643 4.764 10.643 10.641" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M239.232 263.521c0 9.383-7.606 16.99-16.988 16.99h-161.397c-9.383 0-16.989-7.607-16.989-16.99 0-9.382 7.606-16.988 16.989-16.988h161.397c9.382 0 16.988 7.606 16.988 16.988" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M75.803 524.227c-11.162 0-20.245-9.083-20.245-20.248 0-11.163 9.083-20.245 20.245-20.245 11.163 0 20.244 9.082 20.244 20.245 0 11.165-9.081 20.248-20.244 20.248zm0-51.371c-17.16 0-31.123 13.961-31.123 31.123 0 17.163 13.963 31.126 31.123 31.126 17.161 0 31.122-13.963 31.122-31.126 0-17.162-13.961-31.123-31.122-31.123zm136.577 51.371c-11.164 0-20.246-9.083-20.246-20.248 0-11.163 9.082-20.245 20.246-20.245 11.164 0 20.246 9.082 20.246 20.245 0 11.165-9.082 20.248-20.246 20.248zm0-51.371c-17.162 0-31.121 13.961-31.121 31.123 0 17.163 13.959 31.126 31.121 31.126s31.125-13.963 31.125-31.126c0-17.162-13.963-31.123-31.125-31.123zm-68.289 51.351c-10.993-.196-19.88-9.188-19.88-20.228 0-11.039 8.887-20.029 19.88-20.228 10.994.199 19.881 9.189 19.881 20.228 0 11.04-8.887 20.032-19.881 20.228zm0-51.334c-16.991.203-30.756 14.069-30.756 31.106 0 17.038 13.765 30.905 30.756 31.107 16.992-.202 30.758-14.069 30.758-31.107 0-17.037-13.766-30.903-30.758-31.106z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M144.091 444.53c-61.46.65-110.895 25.947-110.895 57.079h221.794c0-31.132-49.436-56.429-110.899-57.079m-85.986-134.44l-18.546 7.758-4.107-9.816 18.546-7.76 4.107 9.818m8.214 19.633l-18.547 7.758-4.105-9.816 18.545-7.759 4.107 9.817m-24.642-58.901l-18.546 7.758-4.107-9.816 18.546-7.759 4.107 9.817" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M35.452 308.032l18.546-7.76-4.107-9.817-18.546 7.76 4.107 9.817m8.215 19.633l18.545-7.759-4.107-9.816-18.546 7.758 4.108 9.817m-28.75-68.718l4.107 9.817 18.546-7.759-4.107-9.817-18.546 7.759m12.321 29.451l18.547-7.759-4.108-9.817-18.546 7.758 4.107 9.818" fill="#fff" />
        <path d="M49.891 290.455l-18.546 7.76-4.107-9.817 18.547-7.759 4.106 9.816" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M32.594 231.795l-8.441 3.538 3.863 9.213-15.303 6.416-3.865-9.21-8.439 3.541 7.48 17.838 32.186-13.498-7.481-17.838" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M53.957 165.552h19.632v12.081h-19.632v-12.081z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M239.232 368.666c0 12.511-10.141 22.652-22.652 22.652h-146.483c-12.511 0-22.652-10.141-22.652-22.652v-55.498c0-12.511 10.141-22.652 22.652-22.652h146.483c12.511 0 22.652 10.141 22.652 22.652v55.498" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)"
              />
        <path d="M201.882 357.857c0 7.638-6.193 13.83-13.83 13.83h-89.427c-7.638 0-13.829-6.192-13.829-13.83v-33.88c0-7.639 6.191-13.83 13.829-13.83h89.427c7.637 0 13.83 6.191 13.83 13.83v33.88" fill="#fff" />
        <path d="M98.625 312.412c-6.376 0-11.564 5.188-11.564 11.565v33.88c0 6.376 5.188 11.564 11.564 11.564h89.427c6.377 0 11.565-5.188 11.565-11.564v-33.88c0-6.377-5.188-11.565-11.565-11.565h-89.427zm89.427 61.539h-89.427c-8.875 0-16.094-7.22-16.094-16.094v-33.88c0-8.875 7.219-16.095 16.094-16.095h89.427c8.875 0 16.094 7.22 16.094 16.095v33.88c0 8.874-7.219 16.094-16.094 16.094z" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M120.45 336.21c-2.351-.077-4.32 1.757-4.398 4.111-.083 2.348 1.757 4.316 4.103 4.4 2.352.077 4.321-1.762 4.403-4.112.08-2.347-1.761-4.32-4.108-4.399" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M119.921 351.675c-4.478-.155-8.24-2.915-9.909-6.77-.639-1.476-.98-3.106-.921-4.824.05-1.444.38-2.811.921-4.065 1.78-4.108 5.929-6.924 10.678-6.766 6.188.215 11.037 5.406 10.823 11.6-.213 6.191-5.402 11.036-11.592 10.825zm23.506-14.145l-2.994-.105c-.408-2.889-1.441-5.678-3.023-8.146l2.117-1.982c.43-.402.455-1.077.055-1.504l-3.452-3.692c-.193-.209-.461-.331-.74-.342-.286-.009-.559.094-.764.286l-2.078 1.942c-2.354-1.798-5.072-3.069-7.959-3.716l.092-2.678c.021-.589-.439-1.082-1.029-1.101l-5.048-.175c-.592-.021-1.084.441-1.102 1.028l-.087 2.591c-2.603.342-5.109 1.216-7.403 2.513-.304.173-.617.327-.913.513l-1.821-1.947c-.399-.428-1.072-.453-1.503-.051l-3.696 3.449c-.206.194-.328.461-.338.743-.009.28.095.557.288.762l1.761 1.888c-1.87 2.427-3.171 5.244-3.803 8.233l-2.552-.084c-.588-.019-1.081.439-1.101 1.024l-.172 5.054c-.021.586.441 1.077 1.027 1.096l2.55.089c.426 3.007 1.516 5.884 3.197 8.423l-1.946 1.814c-.411.384-.435 1.093-.052 1.501l3.453 3.696c.4.431 1.072.454 1.503.049l1.987-1.853c.683.506 1.398.955 2.131 1.368 1.878 1.062 3.903 1.836 6.015 2.262l-.098 2.861c-.02.583.438 1.077 1.027 1.1l5.051.169c.584.021 1.079-.437 1.1-1.026l.1-2.945c2.95-.454 5.77-1.551 8.251-3.201l1.98 2.118c.193.207.458.325.741.336.283.011.556-.092.762-.285l3.693-3.451c.434-.401.451-1.072.055-1.505l-2.038-2.178c1.725-2.344 2.932-5.033 3.536-7.865l2.994.098c.588.023 1.078-.439 1.102-1.024l.172-5.053c.021-.585-.44-1.082-1.028-1.097z" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
        <path d="M165.044 331.194c0 4.015-3.253 7.269-7.267 7.269s-7.268-3.254-7.268-7.269c0-4.013 3.254-7.267 7.268-7.267 4.014 0 7.267 3.254 7.267 7.267" fill="#D1312C" />
        <path d="M189.113 331.194c0 4.015-3.254 7.269-7.268 7.269-4.013 0-7.267-3.254-7.267-7.269 0-4.013 3.254-7.267 7.267-7.267 4.014 0 7.268 3.254 7.268 7.267" fill="orange" />
        <path d="M165.423 351.483c0 4.015-3.254 7.269-7.267 7.269-4.014 0-7.268-3.254-7.268-7.269 0-4.012 3.254-7.266 7.268-7.266 4.013 0 7.267 3.254 7.267 7.266" fill="#F2B42B" style="fill: var(--secondary-color, #F2B42B)" />
        <path d="M189.492 351.483c0 4.015-3.254 7.269-7.268 7.269-4.014 0-7.269-3.254-7.269-7.269 0-4.012 3.255-7.266 7.269-7.266s7.268 3.254 7.268 7.266" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M191.328 15.67c-11.174 0-36.114 17.541-48.469 17.541-12.357 0-29.419-18.673-41.006-18.673-13.71 0-24.823 11.113-24.823 24.822 0 13.71 11.113 24.824 24.823 24.824 11.122 0 29.501-17.395 40.117-17.395 10.617 0 37.824 18.527 49.358 18.527 13.711 0 24.822-11.113 24.822-24.823 0-13.709-11.111-24.823-24.822-24.823" fill="#6A4933" style="fill: var(--tertiary-color, #6A4933)" />
    </symbol>
</svg>
<svg>
  <use xlink:href="#robot" id="robot-1" />
</svg>
<svg>
  <use xlink:href="#robot" id="robot-2" />
</svg>
<svg>
  <use xlink:href="#robot" id="robot-3" />
</svg>

<p>If you're viewing this demo in any browser that does not support CSS Variables, the three robots will look the same. In Safari, there is <a href="https://bugs.webkit.org/show_bug.cgi?id=147932">a bug</a> preventing it from falling back to the appropriate fill values. Let's hope that gets fixed asap.</p>
!

CSS 

              
                svg {
  margin: 1em;
  width: 240px; 
  height: 400px;
}
#robot-1 {
  --primary-color: #0099CC;
  --secondary-color: #FFDF34;
  --tertiary-color: #333;
}
#robot-2 {
  --primary-color: #E52A39;
  --secondary-color: #11EBD8;
  --tertiary-color: #000;
}
/*#robot-3 {
  --primary-color: ;
  --secondary-color: ;
  --tertiary-color: ;
}*/


p {
  text-align: center;
  width: 60%;
  margin: 3em auto;
  color: grey;
}
!

JS
!
999px

Console