这个图案以前用svgdr画过
<div class="hEdiv" data-prev="1"><pre class="hEpre"><style>
/* svg id选择器可以定义使用的部分属性（fill、stroke-*等） */
#msvg { display: block; margin: auto; fill: none; stroke: steelblue; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
/* 外层图案（齿轮）样式 */
.path{ stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw linear 6s var(--delay) forwards; --delay: 4s; }
/* 里层图案（圆）样式 */
.cc { animation: grow linear 4s forwards; }
/* 描边动画 */
@keyframes draw { to { stroke-dashoffset: 0; } }
/* 圆变大动画 */
@keyframes grow { to { r: 120; } }
</style>
<svg id="msvg" width="600" height="600" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg"></svg>
<script>
loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
function tzRun() {
var dr = _dr(msvg);
const vertex1 = dr.circlePoints(26, 200, 180); // 外切圆1点坐标
const vertex2 = dr.circlePoints(26, 200, 160); // 外切圆2点坐标
// 拼接路径
let path = 'M';
for (let i = 0; i < vertex1.length; i++) {
const v1 = vertex1.join(',');
const v2 = vertex2.join(',');
path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
};
path += 'Z'; // 路径闭环
dr.path(path).set('class', 'path'); // 绘制路径
dr.elm.style.setProperty('--len', dr.elm.getTotalLength()); // 设置--len变量
dr.circle(0, 0, 0).set('class', 'cc'); // 画圆
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script>
</pre></div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/js/hl.js';
const divs = document.querySelectorAll('.hEdiv');
const pres = document.querySelectorAll('.hEpre');
divs.forEach((div,idx) => hl.hl(div, pres));
</script> path 路径通过两个外切圆获取各 26 个圆周上的点坐标，这些点按照预设规则连线成为闭合路径，最终的路径数据如下：
M180.00,0.00 160.00,0.00 155.35,38.29 174.77,43.08 159.38,83.65 141.67,74.36 119.76,106.10 134.73,119.36 102.25,148.14 90.89,131.68 56.74,149.60 63.83,168.30 21.70,178.69 19.29,158.83 -19.29,158.83 -21.70,178.69 -63.83,168.30 -56.74,149.60 -90.89,131.68 -102.25,148.14 -134.73,119.36 -119.76,106.10 -141.67,74.36 -159.38,83.65 -174.77,43.08 -155.35,38.29 -160.00,0.00 -180.00,0.00 -174.77,-43.08 -155.35,-38.29 -141.67,-74.36 -159.38,-83.65 -134.73,-119.36 -119.76,-106.10 -90.89,-131.68 -102.25,-148.14 -63.83,-168.30 -56.74,-149.60 -19.29,-158.83 -21.70,-178.69 21.70,-178.69 19.29,-158.83 56.74,-149.60 63.83,-168.30 102.25,-148.14 90.89,-131.68 119.76,-106.10 134.73,-119.36 159.38,-83.65 141.67,-74.36 155.35,-38.29 174.77,-43.08 Z
图案中，圆从小到大的动画，是通过改变圆的半径而得，半径从 0 长到 120。
在CSS中，圆的半径属性 r 得到原生支持，所以可以使用 @keyframes 关键帧动画选择器基于圆的半径设置动画
是一个蓝色的齿轮，代码太厉害了！{:4_199:} 梦江南 发表于 2026-6-21 12:15
是一个蓝色的齿轮，代码太厉害了！
还好吧 都忘了外切圆的点坐标是怎么出来的了，记得得到那些点是很巧妙的{:4_204:} 红影 发表于 2026-6-21 13:38
都忘了外切圆的点坐标是怎么出来的了，记得得到那些点是很巧妙的
计算圆周上指定点的坐标使用到三角函数，公式如下：
x = x0 + r * cos(angle * PI / 180)
y = y0 + r * sin(angle * PI /180) 马黑黑 发表于 2026-6-21 16:52
计算圆周上指定点的坐标使用到三角函数，公式如下：
x = x0 + r * cos(angle * PI / 180)
哦，知道了，这个数学公式还是挺简单的。 强大的svgdr 绘图库，加之逐笔绘制动画，别开生面的效果{:4_190:} 杨帆 发表于 2026-6-22 15:42
强大的svgdr 绘图库，加之逐笔绘制动画，别开生面的效果
我这个东东，中规中矩，不能说强大 红影 发表于 2026-6-21 20:58
哦，知道了，这个数学公式还是挺简单的。
对，初三水平 马黑黑 发表于 2026-6-22 19:19
我这个东东，中规中矩，不能说强大
对，中规中矩的强大 杨帆 发表于 2026-6-22 19:32
对，中规中矩的强大
中规中矩的不叫强大。SVG的封装库，确实有很强大的，只是因为门槛高，不怎么为人所知。我这个知道的人也不多，开发的时候本质上定位于自己用 本帖最后由 杨帆 于 2026-6-22 23:30 编辑
马黑黑 发表于 2026-6-22 19:34
中规中矩的不叫强大。SVG的封装库，确实有很强大的，只是因为门槛高，不怎么为人所知。我这个知道的人也 ...
自给自足的光永远不会暗，福泽广大音画爱好者在SVG中发现新惊喜。 杨帆 发表于 2026-6-22 19:53
自给自足的光永远不会暗，福泽广大音画爱好者在SVG中发现新惊喜。
{:4_191:} 马黑黑 发表于 2026-6-22 19:19
对，初三水平
还好我初三毕业了{:4_173:} 红影 发表于 2026-6-24 13:19
还好我初三毕业了
初三没有开德育课程 马黑黑 发表于 2026-6-24 22:41
初三没有开德育课程
没看懂，如果开了会怎样？ 红影 发表于 2026-6-25 21:22
没看懂，如果开了会怎样？
哦，说的是德语课程 马黑黑 发表于 2026-6-26 20:36
哦，说的是德语课程
原来是德语，呵呵，这字错了，直接成两个学科了{:4_173:}