这个效果是怎么做出来的
活动圆环的原理是 SVG 描边的数学把戏：给 circle 设置 stroke-dasharray 等于圆周长，再用 stroke-dashoffset 控制露出多少——offset 从周长过渡到周长乘以（1 减进度），圆环就像被一支笔从起点画到终点。三环同心、半径错开、颜色区分，进视口时三环同时开始画，外环路径长所以自然更晚画完，自带层次。中心数字用 requestAnimationFrame 做计数动画，和圆环同步从 0 涨到目标值，数字到位和圆环闭合是同一瞬间，完整感很强。
超量部分的展示是点睛之笔：进度超过 100% 时，超出段用同色系更深的一档叠在环上再画一层，既不撒谎也不丢信息，一眼能看出「爆表了多少」。
怎么用这条提示词
适合运动、学习、财务这类目标追踪场景。发给 AI 时给出你的环数量和各环含义，它会生成对应的数据结构。想让三个环错峰入场的话，补一句「三环依次延迟 150 毫秒开始画」，节奏感更好。
想效果更好？试试这些
线帽用 round（stroke-linecap: round），画到 100% 时接口是圆头收尾，比平头精致得多。环的间隙至少留出线宽的两倍，太挤会糊成一团。数字动画时长和环动画严格对齐，两者差半秒完整感就崩了。深色模式下把未完成部分的轨道色压暗到 15% 透明度，完成部分的饱和度可以拉高，对比立刻出来。最后注意 dashoffset 过渡在部分老内核不走合成层，环数少时无碍，别一次性画几十个环。