Spinner gradient SVG 1

Spinner gradient SVG 1

by Csaba Hellinger

HTML

<p>Just change the body color in CSS and see how the SVG gradient uses the same color.</p>

<svg width="100" height="100" viewBox="-2 -2 44 44">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="10%" style="stop-color:white" />
      <stop offset="70%" style="stop-color:black" />
    </linearGradient>
    <mask id="mask">
      <rect x="-2" y="19" width="22" height="41" fill="url(#gradient)" />
    </mask>
  </defs>
    
  <path fill="none" stroke="currentColor" stroke-width="4" d="M20,0 a20,20 0 0,1 20,20" stroke-linecap="round" />
  <path fill="none" stroke="currentColor" stroke-width="4" d="M0,20 a20,20 0 0,1 20,-20" />
  <path fill="none" stroke="currentColor" stroke-width="4" d="M20,40 a20,20 0 0,1 -20,-20" mask="url(#mask)" />
</svg>

CSS

body {
  color: blue;
}

svg {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}