fill_gradient.svg - mozsearch

Enable keyboard shortcuts

<svg viewBox="0 0 200 400" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%">

      <stop offset="0%" stop-color="green" stop-opacity="0.8"/>

      <stop offset="100%" stop-color="red" stop-opacity="0.8"/>

    </linearGradient>

    <linearGradient id="grad2" x1="0%" x2="100%" y1="0%" y2="0%">

      <stop offset="0%" stop-color="green"/>

      <stop offset="100%" stop-color="red"/>

    </linearGradient>

  </defs>

  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>

  <ellipse cx="100" cy="200" rx="85" ry="55" fill="url(#grad2)" fill-opacity="0.8"/>

  <ellipse cx="100" cy="330" rx="85" ry="55" fill="url(#grad1)" fill-opacity="0.5"/>

</svg>