SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a defined value within the gradient element. This value tells the color and position to be used within the parent element.
Syntax:
<stop offset="" stop-color="" stop-opacity="" />
Attributes:
- offset: It tells the distance where the gradient stop is positioned along the gradient vector.
- stop-color: It tells color to be used at the stop point.
- stop-opacity: It tells the alpha value or opacity to be used at the stop point. Default value is 1.
Example 1:
<!DOCTYPE html> < html >
< body >
< svg width = "300" height = "300" viewBox = "0 0 100 100" >
< defs >
< radialGradient id = "gradient" >
< stop offset = "20%" stop-color = "gold" stop-opacity = "0.5" />
< stop offset = "90%" stop-color = "rgb(0, 0, 100)" stop-opacity = "0.5" />
< stop offset = "70%" stop-color = "rgb(100, 200, 0)" stop-opacity = "0.7" />
</ radialGradient >
</ defs >
< rect x = "0" y = "0" width = "100%" height = "100%" fill = "url(#gradient)" style = " stroke: black;" />
< rect x = "15" y = "15" width = "70%" height = "70%" fill = "url(#gradient)" />
< text fill = "Green" font-size = "6" font-family = "Verdana" x = "27" y = "52" >GeeksForGeeks</ text >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
<!DOCTYPE html> < html >
< body >
< svg width = "300" height = "300" viewBox = "0 0 100 100" >
< defs >
< radialGradient id = "gradient" >
< stop offset = "10%" stop-color = "red" stop-opacity = "0.4" />
< stop offset = "50%" stop-color = "gold" stop-opacity = "0.7" />
< stop offset = "100%" stop-color = "shadow" stop-opacity = "0.7" />
</ radialGradient >
</ defs >
< rect x = "0" y = "0" width = "100%" height = "100%" fill = "url(#gradient)" style = " stroke: black;" />
< rect x = "15" y = "15" width = "70%" height = "70%" fill = "url(#gradient)" />
</ svg >
</ body >
</ html >
|
Output:
Example 3:
<!DOCTYPE html> < html >
< body >
< svg width = "300" height = "300" viewBox = "0 0 100 100" >
< defs >
< radialGradient id = "gradient" >
< stop offset = "10%" stop-color = "gold" stop-opacity = "0.2" />
< stop offset = "50%" stop-color = "red" stop-opacity = "0.3" />
< stop offset = "0%" stop-color = "shadow" stop-opacity = "0.4" />
< stop offset = "100%" stop-color = "rgb(0, 300, 100)" stop-opacity = "0.7" />
< stop offset = "10%" stop-color = "rgb(0, 300, 0)" stop-opacity = "0.7" />
</ radialGradient >
</ defs >
< rect x = "0" y = "0" width = "100%" height = "100%" fill = "url(#gradient)" style = " stroke: black;" />
< rect x = "15" y = "15" width = "70%" height = "70%" fill = "url(#gradient)" />
</ svg >
</ body >
</ html >
|
Output:
Example 4:
<!DOCTYPE html> < html >
< body >
< svg height = "200" width = "200" >
< defs >
< linearGradient id = "gradient" >
< stop offset = "10%" stop-color = "rgb(20, 200, 0)" stop-opacity = "0.4" />
< stop offset = "95%" stop-color = "rgb(200, 200, 0)" stop-opacity = "0.4" />
</ linearGradient >
</ defs >
< rect x = "0" y = "0" width = "100%" height = "100%" fill = "url(#gradient)" style = " stroke: black;" />
< rect x = "30" y = "30" width = "70%" height = "70%" fill = "url(#gradient)" />
< text fill = "Green" font-size = "20" font-family = "Verdana" x = "23" y = "100" >
GeeksForGeeks
</ text >
</ svg >
</ body >
</ html >
|
Output: