Create a SVG ellipse with radial gradient

A simple example of creating a SVG ellipse with radial gradient. 
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>

    <svg height="500" width="500">
      <defs>
        <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);
          stop-opacity:0" />
          <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
        </radialGradient>
      </defs>
      <ellipse cx="200" cy="100" rx="55" ry="85" fill="url(#gradient)" />
    </svg>

  </body>
</html>
List

Responses

0 Replies