Шестеренки

by zolotnitskiy

HTML

<svg viewBox="0 0 560 560">
  <defs>
    <mask id="m0">
      <rect x="-50" y="-50" width="100" height="100"></rect>
      <circle r="28"></circle>
      <circle r="5"></circle>
    </mask>
    <mask id="m1">
      <rect x="-50" y="-50" width="100" height="100"></rect>
      <circle r="28"></circle>
      <g>
        <rect x="-50" y="-4" width="100" height="8"></rect>
        <rect x="-4" y="-50" width="8" height="100"></rect>
      </g>
      <circle r="13"></circle>
      <circle r="8"></circle>
    </mask>
    <mask id="m2">
      <rect x="-50" y="-50" width="100" height="100"></rect>
      <circle r="15"></circle>
      <circle r="4" transform="translate(28)"></circle>
      <circle r="4" transform="rotate(120)translate(28)"></circle>
      <circle r="4" transform="rotate(240)translate(28)"></circle>
    </mask>
    <mask id="m3">
      <rect x="-50" y="-50" width="100" height="100"></rect>
      <circle r="28"></circle>
      <g>
        <rect x="-50" y="-4" width="100" height="8"></rect>
        <rect x="-4" y="-50" width="8" height="100"></rect>
      </g>
      <g transform="rotate(45)">
        <rect x="-50" y="-2" width="100" height="4"></rect>
        <rect x="-2" y="-50" width="4" height="100"></rect>
      </g>
      <circle r="13"></circle>
      <circle r="8"></circle>
    </mask>
    <polygon id="cog" points="42,-4 42,4 49,9 47,17 39,17 34,25 38,32 32,38 25,34 17,39 17,47 9,49 4,42 -4,42 -9,49 -17,47 -17,39 -25,34 -32,38 -38,32 -34,25 -39,17 -47,17 -49,9 -42,4 -42,-4 -49,-9 -47,-17 -39,-17 -34,-25 -38,-32 -32,-38 -25,-34 -17,-39 -17,-47 -9,-49 -4,-42 4,-42 9,-49 17,-47 17,-39 25,-34 32,-38 38,-32 34,-25 39,-17 47,-17 49,-9"></polygon>
  </defs>
  <g>
    <g transform="translate(43 450)" class="cog">
      <use xlink:href="#cog" mask="url(#m0)"></use>
    </g>
    <g transform="translate(123 404)rotate(15)" class="cog">
      <use xlink:href="#cog" mask="url(#m0)"></use>
    </g>
    <g transform="translate(212 380)" class="cog">
      <use...

CSS

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  height: 100vh;
  background: #111;
}

svg {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  width: 80vmin;
  height: 80vmin;
  box-shadow: 1px 1px 2px #000;
  background: #444;
}
svg > g {
  -webkit-filter: drop-shadow(2px 1px 1px #000) drop-shadow(2px 1px 2px #000);
          filter: drop-shadow(2px 1px 1px #000) drop-shadow(2px 1px 2px #000);
}

mask * {
  fill: #fff;
}
mask circle:nth-of-type(odd),
mask circle[transform] {
  fill: #000;
}

.cog:nth-of-type(1) {
  fill: #d3ed30;
}

.cog:nth-of-type(2) {
  fill: #ffcf23;
}

.cog:nth-of-type(3) {
  fill: #ff8729;
}

.cog:nth-of-type(4) {
  fill: #0fe3ff;
}

.cog:nth-of-type(5) {
  fill: #a4e425;
}

.cog:nth-of-type(6) {
  fill: #00a9ff;
}

.cog:nth-of-type(7) {
  fill: #ff961e;
}

.cog:nth-of-type(8) {
  fill: #ff7d35;
}

.cog:nth-of-type(9) {
  fill: #92e208;
}

.cog:nth-of-type(10) {
  fill: #ff4f23;
}

use {
  -webkit-animation: r 7.5s linear infinite;
          animation: r 7.5s linear infinite;
}
g:nth-of-type(even):not(:nth-of-type(8)) use, g:nth-of-type(7) use {
  -webkit-animation-direction: reverse;
          animation-direction: reverse;
}

@-webkit-keyframes r {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes r {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}