Baktiyar Ablaikhan

Circle

Source
Uiverse ↗
Author
shadowmurphy
Licence
MIT

Loading…

Code

<form class="radio-form">
  <input checked="" value="a" name="hopping" type="radio" id="a">
  <label for="a"><span></span>A</label>
  <input value="b" name="hopping" type="radio" id="b">
  <label for="b"><span></span>B</label>
  <input value="c" name="hopping" type="radio" id="c">
  <label for="c"><span></span>C</label>
  <div class="worm">
    <div class="worm__segment"></div>
  </div>
</form>
Prompt

Build "Circle", a toggle animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes. 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/shadowmurphy/slippery-chicken-56 (shadowmurphy, MIT).