Spinner gradient SVG 2

Spinner gradient SVG 2

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>
  
  <circle cx="20" cy="20" r="20" fill="none" stroke="currentColor" stroke-width="4" opacity="0.2" />
  
  <path fill="none" stroke="currentColor" stroke-width="4" d="M0,20 a20,20 0 0,1 20,-20"  stroke-linecap="round" />
  <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 1.5s linear infinite;
}

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