SVG Recipe

Gradients and Patterns / radialGradient

Last modified:

3 stop elements


<svg width="200" height="124" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="rg1" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#2E16B1" />
      <stop offset="70%" stop-color="#2E16B1" />
      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="rg2" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#FFA100" />
      <stop offset="70%" stop-color="#FFA100" />
      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <circle cx="70" cy="52" r="50" fill="url(#rg1)"/>
  <circle cx="130" cy="72" r="50" fill="url(#rg2)"/>
</svg>