Rags To Rings
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/r2r.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; right: 30px; bottom: 30px; transition: .4s; }
#progress:hover { transform: scale(1.2); }
#prog, #track { fill: none; stroke: #CB4085; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: .8; }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: #CB4085; fill-rule: evenodd; animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; top: 20px; color: magenta; background: pink; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28949242" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c948cb571e.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<g id="g1" class="brightness"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
var dr = Dr.dr(progress);
dr.circle(200, 200, 200, 'transparent').addTo('g1');
dr.path('M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160').addTo(g1).rotates(5, 360, 200, 200);
dr.circle(200, 200, 30).id('track').addTo(g2);
dr.circle(200, 200, 30).id('prog').addTo(g2);
FS(pa, g1);
</script> <div class="codebox" data-prev="1">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/r2r.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; right: 30px; bottom: 30px; transition: .4s; }
#progress:hover { transform: scale(1.2); }
#prog, #track { fill: none; stroke: #CB4085; stroke-width: 16; stroke-opacity: .5; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
#prog { stroke-opacity: .8; }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: #CB4085; fill-rule: evenodd; animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; top: 20px; color: magenta; background: pink; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28949242" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c948cb571e.mp4" autoplay loop muted></video>
<svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<g id="g1" class="brightness"><title>ALT+X</title></g>
<g id="g2"><title>调节进度</title></g>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
var dr = Dr.dr(progress);
dr.circle(200, 200, 200, 'transparent').addTo('g1');
dr.path('M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160').addTo(g1).rotates(5, 360, 200, 200);
dr.circle(200, 200, 30).id('track').addTo(g2);
dr.circle(200, 200, 30).id('prog').addTo(g2);
FS(pa, g1);
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 小播设计
（一）手写一个路径，M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160。设计的时候最好闭上眼睛；
（二）将这个路径绘制出来，加入组1（g1），然后克隆5份（包含原图案在内共5份），按 360 度平均旋转，旋转点在 （200,200）。具体看 27 行代码，rotates 指令请查阅 http://mhh.52qingyin.cn/api/svgdr/；
（三）组1（g1）里还有一个大圆，透明色，它的作用是扩大接受点击的范围。
（四）进度显示与控制在组2（g2），老老实实话两个圆，赋予它们不同的约定好的 id，加入组2。
技巧：用好 rotates() 指令可以省去很多繁琐的工作。该指令主要针对刚刚绘制的图形进行克隆，第一个参数是包含它在内的份数，比如希望所绘制的图形能生成共5份，就用 5 做参数；第二个参数是总角度值，即所希望的在多少个角度值内平分旋转全部克隆的图像；第三、四个参数是旋转圆心点坐标值。 黑黑老师又出新小播了。{:4_187:} g标签是一个新知识点，谢谢马老师经典讲授与示范{:4_191:} 杨帆 发表于 2025-9-17 11:57
g标签是一个新知识点，谢谢马老师经典讲授与示范
这是svg分组标签，之前的讲义有过讲解。 梦江南 发表于 2025-9-17 09:13
黑黑老师又出新小播了。
{:4_190:} 马黑黑 发表于 2025-9-17 13:08
这是svg分组标签，之前的讲义有过讲解。
是，老师之前的讲义内容很丰富呢，讲解也很透彻，应好好学习，谢谢老师{:4_191:} 马黑黑 发表于 2025-9-17 08:24
小播设计
（一）手写一个路径，M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160。设计的时 ...
这5个小图还以为加载的图片，原来是自己绘制的。
设计的时候闭上眼睛就不知道弄出来的是什么了，也不可能这么对称呢{:4_173:} 这个绘制图案真的好漂亮{:4_199:} 这例子主要是讲解 rotates() 指令吧，这个指令能克隆，真的很方便呢{:4_199:} 漂亮效果，学生已交作业，请老师指正{:4_190:} 朵拉 发表于 2025-9-17 16:55
漂亮效果，学生已交作业，请老师指正
{:4_199:} 杨帆 发表于 2025-9-17 13:18
是，老师之前的讲义内容很丰富呢，讲解也很透彻，应好好学习，谢谢老师
{:4_191:} 小播漂亮，曲子也吸引人，恢宏大气，旋律激昂。。。听着很过瘾。。。
小播路径是手绘的么。。。
顶点处有一个小点点，可爱。。{:4_173:} 红影 发表于 2025-9-17 14:02
这5个小图还以为加载的图片，原来是自己绘制的。
设计的时候闭上眼睛就不知道弄出来的是什么了，也不可 ...
思考需要排除外部干扰，闭上眼睛是减少外部干扰的一个重要手段 红影 发表于 2025-9-17 14:03
这个绘制图案真的好漂亮
闭上眼睛才能想出来的效果 红影 发表于 2025-9-17 14:04
这例子主要是讲解 rotates() 指令吧，这个指令能克隆，真的很方便呢
还好 花飞飞 发表于 2025-9-17 18:17
小播漂亮，曲子也吸引人，恢宏大气，旋律激昂。。。听着很过瘾。。。
小播路径是手绘的么。。。
顶点处有 ...
那个小点点是手一抖就出来了{:4_170:} 马黑黑 发表于 2025-9-17 08:24
小播设计
（一）手写一个路径，M195 160 Q250 100,150 10 Q200 200 250 10 Q150 100,200 160。设计的时 ...
闭上眼设计得这是胸有成竹。。。{:4_173:}
跑去看了rotates指令，克隆并旋转功能把简单的线条都可以整成美妙的图案，
何况是现在这个美人金鱼。。真漂亮哪。。
期待路径设计大师每天闭眼设计一款~~