2025-09-01

· 👁 37 · 654

· 👁 37 · 653

· 👁 34 · 652

· 👁 34 · 651

· 👁 39 · 650

Wow in #svg we can have #css, like

<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>

  <style>
    .spinner_a {
      animation: spinner_MGfb .8s linear infinite;
      animation-delay: -.8s;
    }

    .spinner_b {
      animation-delay: -.65s;
    }

    .spinner_c {
      animation-delay: -.5s;
    }

    @keyframes spinner_MGfb {
      0%   { fill: black; }
      50%  { fill: white; }
      100% { fill: black; }
    }
  </style>

  <circle class='spinner_a' cx='4' cy='12' r='3'/>
  <circle class='spinner_a spinner_b' cx='12' cy='12' r='3'/>
  <circle class='spinner_a spinner_c' cx='20' cy='12' r='3'/>

</svg>

and it works with usual <img src='my.svg'/>