Icon

Source: Uiverse ↗
Author: BlackisPlay
Licence: MIT

Loading…

Code

<div id="triangle">
  <svg id="Layer_1" data-name="Layer 1" version="1.1" viewBox="0 0 2000 2000">
    <polygon
      class="cls-1"
      points="928 781 1021 951 784.5 1371.97 1618 1371.97 1530.32 1544 509 1539 928 781"
    ></polygon>
    <polygon
      class="cls-3"
      points="1618 1371.97 784.5 1371.97 874.93 1211 1346 1211 923.1 456 1110.06 456 1618 1371.97"
    ></polygon>
    <g id="Layer_2" data-name="Layer 2">
      <polygon
        class="cls-2"
        points="418 1372.74 509 1539 928 781 1162.32 1211 1346 1211 923.1 456 418 1372.74"
      ></polygon>
    </g>
  </svg>
</div>

Prompt

Build "Icon", a loader animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes, inline SVG. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/BlackisPlay/pretty-sloth-9 (BlackisPlay, MIT).