马黑黑 发表于 2025-8-21 13:09

svgdr随意涂鸦的歪七扭八的千千节小播样式

<div class="codebox" data-prev="1">
&lt;svg id="msvg" width="400" height="400" style="display: block; margin: 30px auto;"&gt;&lt;/svg&gt;

&lt;script type="module"&gt;
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        var dr = Dr.dr(msvg);
        var path = 'M60 60 C300 200, 200 0, 200 185', tt = 15;
        Array.from({length: tt}).forEach((_, k) =&gt; {
                dr.path( path, 'none', '#9ad296', 8, 'round').transform(`rotate(${360 / tt * k}, 200, 200)` );
        });
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-21 13:13

这个和 histry of love 帖子的小播设置大同小异，不同的是帖子使用多边形绘画，这个使用路径绘画——就是设计好一个路径，然后就用 path 标签画N个路径的外观，路径形状扭转所分配到的角度。

路径可以是任意的，觉得好就行。

梦江南 发表于 2025-8-21 13:14

欣赏老师的精彩小播代码。{:4_190:}

马黑黑 发表于 2025-8-21 13:39

梦江南 发表于 2025-8-21 13:14
欣赏老师的精彩小播代码。

{:4_190:}

红影 发表于 2025-8-21 14:01

这个也挺好看的啊，很别致{:4_173:}

杨帆 发表于 2025-8-21 18:35

好看，别致新颖，谢谢马老师精彩分享{:4_191:}

花飞飞 发表于 2025-8-21 21:28

这个小播跟手工勾出来的效果一样，有弯弯曲曲毛线的质感

花飞飞 发表于 2025-8-21 21:31

试了几种形状，都很漂亮，比如这个：M60 300 C120 250, 180 150, 240 100 S360 50, 380 80
第一是颜色柔和，
另外是角度旋后最终呈现的就是花朵放射状，所以好看。。{:4_173:}

马黑黑 发表于 2025-8-21 22:07

花飞飞 发表于 2025-8-21 21:31
试了几种形状，都很漂亮，比如这个：M60 300 C120 250, 180 150, 240 100 S360 50, 380 80
第一是颜色柔和 ...

多设计几个然后再甄选

花飞飞 发表于 2025-8-22 11:03

马黑黑 发表于 2025-8-21 22:07
多设计几个然后再甄选
其实无论基础线条怎么样，旋转重复之后就都好看，有对称之美{:4_173:}

马黑黑 发表于 2025-8-22 12:15

花飞飞 发表于 2025-8-22 11:03
其实无论基础线条怎么样，旋转重复之后就都好看，有对称之美

对，是这么一回事
页: [1]
查看完整版本: svgdr随意涂鸦的歪七扭八的千千节小播样式