Example of the <linear> element to create an ellipse with a horizontal linear gradient

Source Code: (back to article)

Result: Report an issue

<!DOCTYPE html>

<html>

<body>

<svg height="200" width="300">

<defs>

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

<stop offset="0%" style="stop-color:rgb(28, 135, 201);stop-opacity:1" />

<stop offset="100%" style="stop-color:rgb(128, 0, 128);stop-opacity:1" />

</linearGradient>

</defs>

<ellipse cx="150" cy="90" rx="105" ry="65" fill="url(#ellipse)" />

</svg>

</body>

</html>