rotate arcs

by Simon Hi

HTML

<svg viewBox="-1 -1 2 2">
<path d="M0 0.35A0.35 0.35 1 1 0 -0.35 0"/>
<path d="M0 0.50A0.50 0.50 1 1 0 -0.50 0"/>
<path d="M0 0.65A0.65 0.65 1 1 0 -0.65 0"/>
<path d="M0 0.80A0.80 0.80 1 1 0 -0.80 0"/>
</svg>

CSS

body {
  background: #000;
  display: flex;
  height: 100vh;
  justify-content: center;
}

svg {
  width: 8em;
}

path {
  fill: none;
  stroke: var(--c);
  stroke-width: 0.05px;
  animation: rotate var(--d) linear infinite;
}

path:nth-of-type(1) {
  --a: 34deg;
  --c: #FE8702;
  --d: 2s;
}

path:nth-of-type(2) {
  --a: 117deg;
  --c: #F4662C;
  --d: 5s;
}

path:nth-of-type(3) {
  --a: 241deg;
  --c: #EC494F;
  --d: 3s;
}

path:nth-of-type(4) {
  --a: 301deg;
  --c: #E52F6F;
  --d: 6s;
}

@keyframes rotate {
  from {
    transform: rotate(var(--a));
  }

  to {
    transform: rotate(calc(var(--a) + 360deg));
  }
}