* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cogs {
  display: flex;
  align-items: center;
}

.static_cog, .dynamic_cog {
  display: block;
  position: relative;
  margin: 0  calc((var(--d, 10) * 1.2 * 1vmin) * -.08);
  height: 12vmin;
  width: 12vmin;
  mix-blend-mode: multiply;
  
  stroke-width: 15.7;
  stroke-dasharray: 0 31.4;    
  
  stroke-linecap: round;
  animation: turn 6s infinite linear;
}
.static_cog circle:first-child, .dynamic_cog  circle:first-child {
  stroke-dashoffset: calc(15.7 * 10 / var(--d, 10));
}
.dynamic_cog {
  width: calc(var(--d, 10) * 1.2 * 1vmin);
  height: calc(var(--d, 10) * 1.2 * 1vmin);  
  stroke-width: calc(15.7 * 10 / var(--d, 10));
  stroke-dasharray:  0 calc(31.4 * 10 / var(--d, 10));  
  
  animation: turn calc(6s * var(--d, 10) / 10) var(--delay, 0s) infinite linear var(--turn, normal);
}

@keyframes turn {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}