cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

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.

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

            
              <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>
            
          
!
            
              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;
}
            
          
!
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.
Loading ..................

Console