Thumb

Source: Uiverse ↗
Author: KSAplay
Licence: MIT

Loading…

Code

<label class="container">
  <input type="checkbox" checked="checked">
  <div class="checkmark">
    <svg fill="none" viewBox="0 0 24 24">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.3" stroke="#FFFFFF" d="M8 10V20M8 10L4 9.99998V20L8 20M8 10L13.1956 3.93847C13.6886 3.3633 14.4642 3.11604 15.1992 3.29977L15.2467 3.31166C16.5885 3.64711 17.1929 5.21057 16.4258 6.36135L14 9.99998H18.5604C19.8225 9.99998 20.7691 11.1546 20.5216 12.3922L19.3216 18.3922C19.1346 19.3271 18.3138 20 17.3604 20L8 20"></path>
    </svg>
  </div>
</label>

Prompt

Build "Thumb", 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, 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/KSAplay/tough-pug-83 (KSAplay, MIT).