Svg drawing, circle, scale, gradient

Chen Qiwen 2021-09-15 10:41:55

SVG

I haven't written for a long time .
Recently I wrote a svg The circle of , And the scale , I was going to take a note , Finally, I thought about it , Let's send an article .

image.png

<!DOCTYPE html>
<html>
<body>
<div class="circle-ring" style="width: 131px; height: 131px;">
<svg style="width: 131px; height: 131px;">
<defs>
<linearGradient id="grad353439" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: rgb(41, 204, 150);"></stop>
<stop offset="100%" style="stop-color: rgb(128, 255, 213);"></stop>
</linearGradient>
</defs>
<path d="
M65.5,65.5
m0,-60.5,
a60.5,60.5,0,1,1,0,121
a60.5,60.5,0,1,1,0,-121
"
fill="none"
stroke="rgba(20, 102, 75, 0.4)"
stroke-width="10"
stroke-dasharray="16, 4">
</path>
<path d="
M65.5,65.5
m0,-60.5,
a60.5,60.5,0,1,1,0,121
a60.5,60.5,0,1,1,0,-121
"
fill="none"
stroke="url(#grad353439)"
stroke-width="10"
stroke-dasharray="16,4,16,4,16,4,16,4,16,4,16,4,16,4,16,4,16,4,0,200.32993874146035">
</path>
</svg>
</div>
</body>
</html>
Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15