<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
html{
height: 100%;
}
body{
position: relative;
top:50%;left: 50%;
transform: translate(-50%,-50%);
height: 100%;
margin: 0;
}
</style>
<body>
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text text-anchor='middle' font-size='42px' transform='translate(100,120)' fill='#000'>50.0%</text>
<g>
<!-- M:将画笔移到指定的坐标位置
C:三次贝赛曲线
A:弧线
Z:关闭路径 -->
<path fill='rgba(154,205,50,.8)' d='M 0 100 C 140.6 94.24 45.08 106.32 2000 100 A 95 95 0 0 1 0 100 Z'>
<animate dur='5s' repeatCount='indefinite' attributeName='d' attributeType='XML' values='
M 0 100 C 90 28,92 179,200 100 A 95 95 0 0 1 0 100 Z;
M 0 100 C 145 100,41 100,200 100 A 95 95 0 0 1 0 100 Z;
M 0 100 C 90 28,92 179,200 100 A 95 95 0 0 1 0 100 Z;'></animate>
</path>
</g>
<circle cx='100' r='80' cy='100' stroke-width='10' stroke='white' fill='transparent'></circle>
<circle cx='100' r='90' cy='100' stroke-width='20' stroke='yellowgreen' fill='none'></circle>
</svg>
</body>
</html>
