Spinner Animation

HTML

CSS

JS

<svg class="penrose" viewBox="0 0 480 415" width="480" height="415" aria-label="Penrose triangle bars contracting and expanding as a whole along the triangle path">
  <defs>
    <clipPath id="bar-path-0">
      <polygon points="0 0, 37.5 -64.95, 112.5 -64.95, 150 0, 112.5 64.95, 37.5 64.95" />
    </clipPath>
    <clipPath id="bar-path-1">
      <polygon points="0 0, 37.5 -64.95, 367.5 -64.95, 330 0, 292.5 64.95, 37.5 64.95" />
    </clipPath>
    <clipPath id="bar-path-2">
      <polygon points="0 0, 37.5 -64.95, 296 -64.95, 258.5 0, 221 64.95, 37.5 64.95" />
    </clipPath>
    <clipPath id="bar-path-3">
      <polygon points="0 0, 37.5 -64.95, 440 -64.95, 477.5 0, 440 64.95, 37.5 64.95" />
    </clipPath>
    <clipPath id="bar-path-4">
      <polygon points="0 0, 37.5 -64.95, 440 -64.95, 477.5 0, 440 64.95, 37.5 64.95" />
    </clipPath>
    <clipPath id="bar-path-5">
      <polygon points="0 0, 37.5 -64.95, 440 -64.95, 475 0, 440 64.95, 37.5 64.95" />
    </clipPath>
    <clipPath id="bar-path-6">
      <polygon points="0 0, 37.5 -64.95, 366.5 -64.95, 291.5 64.95, 37.5 64.95" />
    </clipPath>
  </defs>
  <g fill="currentcolor" stroke="var(--bg)" stroke-linecap="round" stroke-linejoin="round" stroke-width="0">
    <g class="penrose__group penrose__group--1">
      <g transform="translate(37.5, 415) rotate(-60)">
        <g clip-path="url(#bar-path-3)">
          <g class="penrose__bar penrose__bar--3">
            <g clip-path="url(#bar-path-3)">
              <polygon fill="var(--red)" points="0 0, 0 -64.95, 480 -64.95, 480 0" />
              <polygon fill="var(--yellow)" points="0 0, 0 64.95, 480 64.95, 480 0" />
              <polyline stroke-width="4" points="0 0, 480 0" />
            </g>
          </g>
        </g>
      </g>
      <g transform="translate(202, 0) rotate(60)">
        <g clip-path="url(#bar-path-0)">
          <polygon fill="var(--blue)" points="0 0, 0 -64.95, 112.5 -64.95, 112.5 0" />
          <polygon fill="var(--red)" points="0 0, 0 64.95, 112.5 64.95, 112.5 0" />
          <polyline stroke-width="4" points="0 0, 75 0" />
          <polygon fill="var(--yellow)" points="112.5 64.95, 75 0, 112.5 -64.95, 150 0" />
          <polyline fill="none" stroke-width="4" points="112.5 64.95, 75 0, 112.5 -64.95" />
        </g>
      </g>
      <g transform="translate(202, 0) rotate(60) translate(72, 0)">
        <g clip-path="url(#bar-path-2)">
          <g class="penrose__bar penrose__bar--2">
            <g clip-path="url(#bar-path-2)">
              <polygon fill="var(--blue)" points="0 0, 0 -64.95, 294 -64.95, 294 0" />
              <polygon fill="var(--red)" points="0 0, 0 64.95, 294 64.95, 294 0" />
              <polyline stroke-width="4" points="0 0, 294 0" />
            </g>
          </g>
        </g>
      </g>
      <g transform="translate(277, 0) rotate(60) translate(404) rotate(120)">
        <g clip-path="url(#bar-path-1)">
          <g class="penrose__bar penrose__bar--1">
            <g clip-path="url(#bar-path-1)">
              <polygon fill="var(--yellow)" points="0 0, 0 -64.95, 366.5 -64.95, 366.5 0" />
              <polygon fill="var(--blue)" points="0 0, 0 64.95, 366.5 64.95, 366.5 0" />
              <polyline stroke-width="4" points="0 0, 366.5 0" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g class="penrose__group penrose__group--2">
      <g transform="translate(202, 0) rotate(60)">
        <g clip-path="url(#bar-path-4)">
          <g class="penrose__bar penrose__bar--4">
            <g clip-path="url(#bar-path-4)">
              <polygon fill="var(--blue)" points="0 0, 0 -64.95, 440 -64.95, 440 0" />
              <polygon fill="var(--red)" points="0 0, 0 64.95, 440 64.95, 440 0" />
              <polyline stroke-width="4" points="0 0, 440 0" />
              <polygon fill="var(--yellow)" points="440 -64.95, 402.5 0, 440 64.95, 477.5 0" />
              <polyline fill="none" stroke-width="4" points="440 -64.95, 402.5 0, 440 64.95" />
            </g>
          </g>
        </g>
      </g>
      <g transform="translate(277, 0) rotate(60) translate(404) rotate(120)">
        <g clip-path="url(#bar-path-5)">
          <g class="penrose__bar penrose__bar--5">
            <g clip-path="url(#bar-path-5)">
              <polygon fill="var(--yellow)" points="0 0, 0 -64.95, 440 -64.95, 440 0" />
              <polygon fill="var(--blue)" points="0 0, 0 64.95, 440 64.95, 440 0" />
              <polyline stroke-width="4" points="0 0, 400 0" />
              <polygon fill="var(--red)" points="440 -64.95, 402.5 0, 440 64.95, 477.5 0" />
              <polyline fill="none" stroke-width="4" points="440 -64.95, 402.5 0, 440 64.95, 477.5 0" />
            </g>
          </g>
        </g>
      </g>
      <g transform="translate(37.5, 415) rotate(-60)">
        <g clip-path="url(#bar-path-6)">
          <g class="penrose__bar penrose__bar--6">
            <g>
              <polygon fill="var(--red)" points="0 0, 0 -64.95, 440 -64.95, 477.5 0" />
              <polygon fill="var(--yellow)" points="0 0, 0 64.95, 440 64.95, 440 0" />
              <polyline stroke-width="4" points="0 0, 480 0" />
              <polygon fill="var(--blue)" points="440 -64.95, 402.5 0, 440 64.95, 477.5 0" />
              <polyline fill="none" stroke-width="4" points="440 -64.95, 402.5 0, 440 64.95" />
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --hue: 223;
  --gray50: hsl(var(--hue) 10% 95%);
  --gray950: hsl(var(--hue) 10% 5%);
  --bg: light-dark(var(--gray50), var(--gray950));
  --fg: light-dark(var(--gray950), var(--gray50));
  --red: hsl(0 90% 60%);
  --yellow: hsl(45 90% 50%);
  --blue: hsl(210 90% 60%);
  --trans-dur: 0.3s;
  color-scheme: light dark;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}
body {
  background-color: var(--bg);
  color: var(--fg);
  font: 1em/1.5 sans-serif;
  display: grid;
  place-items: center;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}
.penrose {
  width: 16em;
  height: auto;
}
.penrose polyline {
  transition: stroke var(--trans-dur);
}
.penrose__bar, .penrose__group {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.penrose__bar--1 {
  animation-name: bar1;
}
.penrose__bar--2 {
  animation-name: bar2;
}
.penrose__bar--3 {
  animation-name: bar3;
}
.penrose__bar--4 {
  animation-name: bar4;
}
.penrose__bar--5 {
  animation-name: bar5;
}
.penrose__bar--6 {
  animation-name: bar6;
}
.penrose__group {
  animation-timing-function: step-end;
}
.penrose__group--1 {
  animation-name: group1;
}
.penrose__group--2 {
  animation-name: group2;
  visibility: hidden;
}
@keyframes bar1 {
  from, 16.67% {
    transform: translateX(0);
  }
  33.33%, to {
    transform: translateX(331px);
  }
}
@keyframes bar2 {
  from {
    transform: translateX(0);
  }
  16.67%, to {
    transform: translateX(259px);
  }
}
@keyframes bar3 {
  from, 33.33% {
    transform: translateX(0);
  }
  50%, to {
    transform: translateX(329px);
  }
}
@keyframes bar4 {
  from, 50% {
    transform: translateX(-325px);
  }
  66.67%, to {
    transform: translateX(0);
  }
}
@keyframes bar5 {
  from {
    animation-timing-function: step-end;
    visibility: hidden;
    transform: translateX(-325px);
  }
  66.67% {
    visibility: visible;
    transform: translateX(-325px);
  }
  83.33%, to {
    transform: translateX(0);
  }
}
@keyframes bar6 {
  from {
    animation-timing-function: step-end;
    visibility: hidden;
    transform: translateX(-327.5px);
  }
  83.33% {
    visibility: visible;
    transform: translateX(-327.5px);
  }
  to {
    transform: translateX(-71px);
  }
}
@keyframes group1 {
  from {
    visibility: visible;
  }
  50%, to {
    visibility: hidden;
  }
}
@keyframes group2 {
  from {
    visibility: hidden;
  }
  50%, to {
    visibility: visible;
  }
}

Ad #1

Ad #2