circle · chain · relay · step 008 of 64

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="color-scheme" content="light dark">
  <title>Animated Circle - Interactive Demo</title>
  <meta name="description" content="A responsive, accessible animated circle with hover effects">
  <style>
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    :root {
      --bg: #fff;
      --fg: #2563eb;
      --shadow: rgba(0, 0, 0, 0.1);
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #111;
        --fg: #93c5fd;
        --shadow: rgba(0, 0, 0, 0.6);
      }
    }
    @media (prefers-contrast: more) {
      :root {
        --shadow: rgba(0, 0, 0, 0.9);
      }
    }
    .hint {
      margin-top: 1.5rem;
      font-size: 0.875rem;
      text-align: center;
      opacity: 0.7;
    }
    body {
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: 1rem;
      background: var(--bg);
      color: var(--fg);
      font-family: system-ui, -apple-system, sans-serif;
    }
    main {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    svg {
      display: block;
      width: min(400px, 100%);
      height: auto;
      overflow: visible;
      filter: drop-shadow(0 8px 16px var(--shadow));
    }
    circle {
      transition: opacity 0.3s ease, color 0.4s ease;
      transform-box: fill-box;
      transform-origin: center;
      opacity: 0.9;
      will-change: transform, opacity;
    }
    svg:focus {
      outline: none;
    }
    svg:focus-visible {
      outline: 3px solid var(--fg);
      outline-offset: 8px;
      border-radius: 50%;
    }
    @media (hover: hover) {
      circle:hover {
        opacity: 1;
      }
    }
    circle:active,
    svg:focus-visible circle {
      opacity: 1;
    }
    @media (prefers-reduced-motion: no-preference) {
      circle {
        transition:
          transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
          opacity 0.3s ease;
      }
      circle:active,
      svg:focus-visible circle {
        transform: scale(1.05);
      }
    }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      circle:hover {
        transform: scale(1.05);
      }
    }
  </style>
</head>
<body>
  <main>
    <svg viewBox="0 0 400 400" role="button" aria-labelledby="circle-title" aria-pressed="false" tabindex="0" xmlns="http://www.w3.org/2000/svg">
      <title id="circle-title">Colored circle. Click or press Enter/Space to change its color. Grows slightly on hover or focus.</title>
      <circle cx="200" cy="200" r="180" fill="currentColor"/>
    </svg>
    <p class="hint">Click or press Enter/Space to change the color</p>
  </main>
  <script>
    const svg = document.querySelector('svg');
    const colors = ['#2563eb', '#dc2626', '#16a34a', '#d97706', '#7c3aed', '#0891b2'];
    let index = 0;

    function cycleColor() {
      index = (index + 1) % colors.length;
      svg.style.color = colors[index];
      svg.setAttribute('aria-pressed', 'true');
      setTimeout(() => svg.setAttribute('aria-pressed', 'false'), 300);
    }

    svg.addEventListener('click', cycleColor);
    svg.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        cycleColor();
      }
    });
  </script>
</body>
</html>

        :root {          --bg: #111;-         --fg: #60a5fa;+         --fg: #93c5fd;          --shadow: rgba(0, 0, 0, 0.6);        }⋯ line 50        width: 100%;        display: flex;-       justify-content: center;+       flex-direction: column;+       align-items: center;      }      svg {⋯ line 61      }      circle {-       transition: opacity 0.3s ease;+       transition: opacity 0.3s ease, color 0.4s ease;        transform-box: fill-box;        transform-origin: center;        opacity: 0.9;+       will-change: transform, opacity;      }      svg:focus {⋯ line 104  <body>    <main>-     <div>-       <svg viewBox="0 0 400 400" role="button" aria-labelledby="circle-title" tabindex="0" xmlns="http://www.w3.org/2000/svg">-         <title id="circle-title">Colored circle. Click or press Enter/Space to change its color. Grows slightly on hover or focus.</title>-         <circle cx="200" cy="200" r="180" fill="currentColor"/>-       </svg>-       <p class="hint">Click or press Enter/Space to change the color</p>-     </div>+     <svg viewBox="0 0 400 400" role="button" aria-labelledby="circle-title" aria-pressed="false" tabindex="0" xmlns="http://www.w3.org/2000/svg">+       <title id="circle-title">Colored circle. Click or press Enter/Space to change its color. Grows slightly on hover or focus.</title>+       <circle cx="200" cy="200" r="180" fill="currentColor"/>+     </svg>+     <p class="hint">Click or press Enter/Space to change the color</p>    </main>    <script>⋯ line 118        index = (index + 1) % colors.length;        svg.style.color = colors[index];+       svg.setAttribute('aria-pressed', 'true');+       setTimeout(() => svg.setAttribute('aria-pressed', 'false'), 300);      }