Create a SVG ellipse with gradient

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

    <svg height="400" width="400">
      <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,0,255);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="200" cy="120" rx="30" ry="100" fill="url(#gradient)" />
    </svg>

  </body>
</html>
List

Responses

0 Replies