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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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 viewBox="0 0 60 60">
  <path d="M59,31.4c-0.3,0-0.5,0.1-0.7,0.3l-5.1-1.5c0,0-0.1,0-0.1-0.2c0,0,0,0,0,0s0,0,0,0c0-0.1,0.1-0.2,0.1-0.2l5.1-1.5
    c0.2,0.2,0.4,0.3,0.7,0.3c0.6,0,1-0.4,1-1c0-0.4-0.2-0.9-0.6-1.1c-0.4-0.3-0.8-0.3-1.3-0.2l-0.4,0.1c-0.6-4.9-2.5-9.5-5.5-13.4
    l0.4-0.2c0.4-0.2,0.7-0.6,0.7-1c0.1-0.4-0.1-0.9-0.4-1.2c-0.4-0.4-1-0.4-1.4,0c-0.2,0.2-0.3,0.5-0.3,0.7l-0.3,0.2l-4.4,2.4
    c-0.1,0-0.1,0-0.2,0c0,0,0,0,0,0c0,0-0.1-0.1-0.1-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0,0c0,0,0-0.1,0-0.1l2.4-4.4l0.2-0.3
    c0.2,0,0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4c-0.3-0.3-0.8-0.5-1.2-0.4c-0.4,0.1-0.8,0.3-1,0.7L47,7.8c-3.9-3-8.5-4.9-13.4-5.5
    l0.1-0.4c0.1-0.4,0-0.9-0.2-1.3C33.3,0.2,32.9,0,32.4,0c-0.6,0-1,0.4-1,1c0,0.3,0.1,0.5,0.3,0.7l-1.5,5.1c0,0-0.1,0.1-0.2,0.1
    c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0-0.2-0.1-0.2-0.1l-1.5-5.1c0.2-0.2,0.3-0.4,0.3-0.7c0-0.6-0.4-1-1-1c-0.4,0-0.9,0.2-1.1,0.6
    c-0.3,0.4-0.3,0.8-0.2,1.3l0.1,0.4C21.5,2.9,16.9,4.8,13,7.8l-0.2-0.4c-0.2-0.4-0.6-0.7-1-0.7c-0.4-0.1-0.9,0.1-1.2,0.4
    c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3l0.2,0.3h0l2.4,4.4c0,0,0,0.1,0,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0
    c-0.1,0.1-0.2,0.1-0.3,0.1l-4.4-2.4l-0.3-0.2c0-0.3-0.1-0.5-0.3-0.7c-0.4-0.4-1-0.4-1.4,0c-0.3,0.3-0.5,0.8-0.4,1.2
    c0.1,0.4,0.3,0.8,0.7,1L7.8,13c-3,3.9-4.9,8.5-5.5,13.4l-0.4-0.1c-0.4-0.1-0.9,0-1.3,0.2C0.2,26.7,0,27.1,0,27.6c0,0.6,0.4,1,1,1
    c0.3,0,0.5-0.1,0.7-0.3l5.1,1.5c0,0,0.1,0,0.1,0.2c0,0,0,0,0,0s0,0,0,0c0,0.1-0.1,0.2-0.1,0.2l-5.1,1.5c-0.2-0.2-0.4-0.3-0.7-0.3
    c-0.6,0-1,0.4-1,1c0,0.4,0.2,0.9,0.6,1.1c0.2,0.2,0.5,0.3,0.9,0.3c0.1,0,0.3,0,0.4-0.1l0.4-0.1c0.6,4.9,2.5,9.4,5.5,13.4l-0.4,0.2
    c-0.4,0.2-0.7,0.6-0.7,1c-0.1,0.4,0.1,0.9,0.4,1.2c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.5,0.3-0.7l4.7-2.5
    c0.1,0,0.1,0,0.2,0c0,0,0,0,0,0c0,0,0.1,0.1,0.1,0.1c0,0,0,0,0,0c0,0,0,0,0,0.1c0,0,0,0,0,0c0,0,0,0.1,0,0.1L12.4,49H11v3h38v-3
    h-1.4l-1.3-2.5c0,0,0-0.1,0-0.1c0,0,0,0,0,0c0,0,0,0,0-0.1c0,0,0,0,0,0c0.1-0.1,0.2-0.1,0.3-0.1c0,0,0,0,0,0l2.8,1.5l1.6,0.9
    l0.3,0.2c0,0.3,0.1,0.5,0.3,0.7c0.2,0.2,0.5,0.3,0.7,0.3c0.3,0,0.5-0.1,0.7-0.3c0.3-0.3,0.5-0.8,0.4-1.2c-0.1-0.4-0.3-0.8-0.7-1
    L52.2,47c3-3.9,4.9-8.5,5.5-13.4l0.4,0.1c0.1,0,0.3,0.1,0.4,0.1c0.3,0,0.6-0.1,0.9-0.3c0.4-0.3,0.6-0.7,0.6-1.1
    C60,31.9,59.6,31.4,59,31.4z M52.6,32.1l0.3,0.1c-0.4,4.6-2.3,8.9-5.2,12.4l-0.3-0.1c-0.9-0.5-1.9-0.3-2.6,0.4
    c-0.7,0.7-0.8,1.7-0.4,2.6c0.1,0.1,0.1,0.2,0.2,0.2c-0.6,0.5-1.1,0.9-1.7,1.3H39c0-0.6-0.4-1-1-1s-1,0.4-1,1h-4c0-0.6-0.4-1-1-1
    s-1,0.4-1,1h-4c0-0.6-0.4-1-1-1s-1,0.4-1,1h-4c0-0.6-0.4-1-1-1s-1,0.4-1,1h-1.9c-0.6-0.4-1.2-0.8-1.7-1.3c0.1-0.1,0.1-0.1,0.2-0.2
    c0.5-0.9,0.3-1.9-0.4-2.6c-0.7-0.7-1.7-0.8-2.6-0.4l-0.3,0.1c-2.9-3.5-4.7-7.8-5.2-12.4l0.3-0.1C8.4,31.8,9,31,9,30
    s-0.6-1.8-1.6-2.1l-0.3-0.1c0.4-4.7,2.3-9,5.1-12.4l0.3,0.2c0.3,0.2,0.7,0.3,1,0.3c0.6,0,1.1-0.2,1.6-0.6c0.7-0.7,0.8-1.7,0.4-2.6
    l-0.2-0.3c3.4-2.8,7.7-4.7,12.4-5.1l0.1,0.3C28.2,8.4,29,9,30,9s1.8-0.6,2.1-1.6l0.1-0.3c4.7,0.4,9,2.3,12.4,5.1l-0.2,0.3
    c-0.5,0.9-0.3,1.9,0.4,2.6c0.4,0.4,1,0.6,1.6,0.6c0.4,0,0.7-0.1,1-0.3l0.3-0.2c2.8,3.4,4.7,7.7,5.1,12.4l-0.3,0.1
    C51.6,28.2,51,29,51,30S51.6,31.8,52.6,32.1z"/>
  <g id="all-circles">
    <path d="M17,15c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S17.6,15,17,15"/>
    <path d="M23,9c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S23.6,9,23,9"/>
    <path d="M23,15c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S23.6,15,23,15"/>
    <path d="M29,9c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S29.6,9,29,9"/>
    <path d="M29,15c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S29.6,15,29,15"/>
    <path d="M20,12c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S20.6,12,20,12"/>
    <path d="M26,12c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S26.6,12,26,12"/>
    <path d="M35,9c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S35.6,9,35,9"/>
    <path d="M35,15c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S35.6,15,35,15"/>
    <path d="M41,15c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S41.6,15,41,15"/>
    <path d="M32,12c-0.6,0-1,0.4-1,1s0.4,1,1,1c0.6,0,1-0.4,1-1S32.6,12,32,12"/>
    <path d="M38,12c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S38.6,12,38,12"/>
    <path d="M14,18c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S14.6,18,14,18"/>
    <path d="M11,21c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S11.6,21,11,21"/>
    <path d="M14,24c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S14.6,24,14,24"/>
    <path d="M11,27c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S11.6,27,11,27"/>
    <path d="M11,33c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S11.6,33,11,33"/>
    <path d="M17,21c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S17.6,21,17,21"/>
    <path d="M17,27c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S17.6,27,17,27"/>
    <path d="M17,33c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S17.6,33,17,33"/>
    <path d="M14,30c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S14.6,30,14,30"/>
    <path d="M20,18c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S20.6,18,20,18"/>
    <path d="M26,18c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S26.6,18,26,18"/>
    <path d="M23,21c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S23.6,21,23,21"/>
    <path d="M20,24c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S20.6,24,20,24"/>
    <path d="M26,24c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S26.6,24,26,24"/>
    <path d="M23,27c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S23.6,27,23,27"/>
    <path d="M23,33c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S23.6,33,23,33"/>
    <path d="M29,21c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S29.6,21,29,21"/>
    <path d="M29,27c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S29.6,27,29,27"/>
    <path d="M29,33c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S29.6,33,29,33"/>
    <path d="M20,30c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S20.6,30,20,30"/>
    <path d="M26,30c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S26.6,30,26,30"/>
    <path d="M32,18c-0.6,0-1,0.4-1,1s0.4,1,1,1c0.6,0,1-0.4,1-1S32.6,18,32,18"/>
    <path d="M38,18c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S38.6,18,38,18"/>
    <path d="M35,21c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S35.6,21,35,21"/>
    <path d="M32,24c-0.6,0-1,0.4-1,1s0.4,1,1,1c0.6,0,1-0.4,1-1S32.6,24,32,24"/>
    <path d="M38,24c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S38.6,24,38,24"/>
    <path d="M35,27c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S35.6,27,35,27"/>
    <path d="M35,33c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S35.6,33,35,33"/>
    <path d="M41,21c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S41.6,21,41,21"/>
    <path d="M41,27c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S41.6,27,41,27"/>
    <path d="M41,33c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S41.6,33,41,33"/>
    <path d="M32,30c-0.6,0-1,0.4-1,1s0.4,1,1,1c0.6,0,1-0.4,1-1S32.6,30,32,30"/>
    <path d="M38,30c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S38.6,30,38,30"/>
    <path d="M44,18c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S44.6,18,44,18"/>
    <path d="M47,21c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S47.6,21,47,21"/>
    <path d="M44,24c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S44.6,24,44,24"/>
    <path d="M50,26c0.6,0,1-0.4,1-1s-0.4-1-1-1s-1,0.4-1,1S49.4,26,50,26"/>
    <path d="M47,27c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S47.6,27,47,27"/>
    <path d="M47,33c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S47.6,33,47,33"/>
    <path d="M44,30c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S44.6,30,44,30"/>
    <path d="M50,30c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S50.6,30,50,30"/>
    <path d="M14,36c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S14.6,36,14,36"/>
    <path d="M11,39c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S11.6,39,11,39"/>
    <path d="M14,42c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S14.6,42,14,42"/>
    <path d="M17,39c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S17.6,39,17,39"/>
    <path d="M17,45c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S17.6,45,17,45"/>
    <path d="M20,36c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S20.6,36,20,36"/>
    <path d="M26,36c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S26.6,36,26,36"/>
    <path d="M23,39c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S23.6,39,23,39"/>
    <path d="M20,42c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S20.6,42,20,42"/>
    <path d="M26,42c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S26.6,42,26,42"/>
    <path d="M23,45c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S23.6,45,23,45"/>
    <path d="M29,39c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S29.6,39,29,39"/>
    <path d="M29,45c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S29.6,45,29,45"/>
    <path d="M32,36c-0.6,0-1,0.4-1,1s0.4,1,1,1c0.6,0,1-0.4,1-1S32.6,36,32,36"/>
    <path d="M38,36c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S38.6,36,38,36"/>
    <path d="M35,39c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S35.6,39,35,39"/>
    <path d="M32,42c-0.6,0-1,0.4-1,1s0.4,1,1,1c0.6,0,1-0.4,1-1S32.6,42,32,42"/>
    <path d="M38,42c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S38.6,42,38,42"/>
    <path d="M35,45c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S35.6,45,35,45"/>
    <path d="M41,39c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S41.6,39,41,39"/>
    <path d="M41,45c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S41.6,45,41,45"/>
    <path d="M44,36c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S44.6,36,44,36"/>
    <path d="M50,36c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S50.6,36,50,36"/>
    <path d="M47,39c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S47.6,39,47,39"/>
    <path d="M44,42c-0.6,0-1,0.4-1,1s0.4,1,1,1s1-0.4,1-1S44.6,42,44,42"/>
  </g>
  <path d="M1,57h58v2.9H1V57z"/>
  <path d="M49,53H6v3h48v-3H49"/>
</svg>
            
          
!
            
              * {
  box-sizing: border-box;
}
path {
  fill: #222;
  transition: 0.25s;
}
body {
  margin: 0;
  padding: 50px;
  overflow: hidden;
  background: radial-gradient(
    circle at center center,
    #444,
    #222 43vw
  );
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
svg {
  width: 100%;
}
            
          
!
            
              const allCircles = document.querySelectorAll("#all-circles > path");

const rnd = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

const fps = 4;
const interval = 1000 / fps;
let now;
let then = Date.now();
let delta;

let base = 0;

const reColor = () => {
  // rAF works by calling itself recurssively
  // https://css-tricks.com/using-requestanimationframe/
  requestAnimationFrame(reColor);
  
  // Color rotation!
  base++;
  if (base > 360) base = 0;
  
  // http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/
  now = Date.now();
  delta = now - then;

  if (delta > interval) {
    then = now - delta % interval;

    // Loop over a NodeList
    Array.prototype.map.call(allCircles, (el, i) => {
      /* 
        hsl(
          HUE (rotates in loop)
          SATURATION (random)
          LIGHTNESSS (random)
        )
      */
      el.style.fill = `hsl(
        ${base + i},    
        ${rnd(60, 70)}%, 
        ${rnd(25, 35)}%
      )`;
    });
  }
};

reColor();

            
          
!
999px
Loading ..................

Console