红影 发表于 2024-10-2 22:29

马黑黑 发表于 2024-10-1 14:36
可以试试的

我随便画个弧，从中间分布，也挺有趣

<svg id="player" width="200" height="200" viewBox="0 0 200 200">
        <defs>
                <g id="p1" fill="none" stroke="green" stroke-width="4" stroke-linecap="round" stroke-dasharray="4 6">
                        <path id="p1" d="M10 20 S90 260 190 20">
                                <animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite" />
                        </path>
                </g>
        </defs>
        <use href="#p1" transform="rotate(0 100 100)"></use>
        <use href="#p1" transform="rotate(30 100 100)"></use>
        <use href="#p1" transform="rotate(60 100 100)"></use>
        <use href="#p1" transform="rotate(90 100 100)"></use>
        <use href="#p1" transform="rotate(120 100 100)"></use>
        <use href="#p1" transform="rotate(150 100 100)"></use>
        <use href="#p1" transform="rotate(180 100 100)"></use>
        <use href="#p1" transform="rotate(210 100 100)"></use>
        <use href="#p1" transform="rotate(240 100 100)"></use>
        <use href="#p1" transform="rotate(270 100 100)"></use>
        <use href="#p1" transform="rotate(300 100 100)"></use>
        <use href="#p1" transform="rotate(330 100 100)"></use>
       
</svg>

马黑黑 发表于 2024-10-2 22:38

红影 发表于 2024-10-2 22:29
我随便画个弧，从中间分布，也挺有趣




很漂亮。可以有无限可能

红影 发表于 2024-10-2 23:11

马黑黑 发表于 2024-10-2 22:38
很漂亮。可以有无限可能

是啊，这个真的有无限可能呢，不过你那个更好看，看样子组合后让边缘更圆些的好。

马黑黑 发表于 2024-10-2 23:11

红影 发表于 2024-10-2 23:11
是啊，这个真的有无限可能呢，不过你那个更好看，看样子组合后让边缘更圆些的好。

都好看的

红影 发表于 2024-10-3 10:46

马黑黑 发表于 2024-10-2 23:11
都好看的

看到今天的火星礼物了，真好看{:4_199:}

马黑黑 发表于 2024-10-3 11:50

红影 发表于 2024-10-3 10:46
看到今天的火星礼物了，真好看

还行的吧

红影 发表于 2024-10-3 12:20

马黑黑 发表于 2024-10-3 11:50
还行的吧

黑黑真是创意无限{:4_199:}

起个网名好难 发表于 2024-10-3 12:37

红影 发表于 2024-10-2 22:29
我随便画个弧，从中间分布，也挺有趣





模仿一个{:5_106:}
<svg viewBox="0 0 200 200" width='400'>
        <defs>
                <path id="pp1" d="M10 100 S 90 200 190 100" fill="none" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 6">
                        <animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite"></animate>
                </path>
        </defs>
        <use href="#pp1" transform="rotate(0 100 100)" stroke="hsl(0, 80%,50%)" ></use>
        <use href="#pp1" transform="rotate( 30 100 100)" stroke="hsl( 30, 80%,50%)"></use>
        <use href="#pp1" transform="rotate( 60 100 100)" stroke="hsl( 60, 80%,50%)"></use>
        <use href="#pp1" transform="rotate( 90 100 100)" stroke="hsl( 90, 80%,50%)"></use>
        <use href="#pp1" transform="rotate(120 100 100)" stroke="hsl(120, 80%,50%)"></use>
        <use href="#pp1" transform="rotate(150 100 100)" stroke="hsl(150, 80%,50%)"></use>
        <use href="#pp1" transform="rotate(180 100 100)" stroke="hsl(180, 80%,50%)"></use>
        <use href="#pp1" transform="rotate(210 100 100)" stroke="hsl(210, 80%,50%)"></use>
        <use href="#pp1" transform="rotate(240 100 100)" stroke="hsl(240, 80%,50%)"></use>
        <use href="#pp1" transform="rotate(270 100 100)" stroke="hsl(270, 80%,50%)"></use>
        <use href="#pp1" transform="rotate(300 100 100)" stroke="hsl(300, 80%,50%)"></use>
        <use href="#pp1" transform="rotate(330 100 100)" stroke="hsl(330, 80%,50%)"></use>
</svg>

红影 发表于 2024-10-3 12:51

起个网名好难 发表于 2024-10-3 12:37
模仿一个

难难这个好，直接让首尾接起来了，更奇妙{:4_199:}

起个网名好难 发表于 2024-10-3 13:25

红影 发表于 2024-10-3 12:51
难难这个好，直接让首尾接起来了，更奇妙

稍微有点差别， 绿色是你的线条，红色是我的<br>

<svg width='300' viewBox="0 0 200 200" style="border:thin black dotted;">
                <path id="pp1" d="M10 100 S 90 200 190 100" fill="none" stroke-width="4" stroke-linecap="round" stroke='red' stroke-dasharray="4 6">
                        <animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite"></animate>
                </path>
                <path id="p1" d="M10 20 S90 260 190 20" fill="none" stroke="green" stroke-width="4" stroke-linecap="round" stroke-dasharray="4 6">
                                <animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite"></animate>
                </path>
</svg>

红影 发表于 2024-10-3 20:33

起个网名好难 发表于 2024-10-3 13:25
稍微有点差别， 绿色是你的线条，红色是我的

你这个能接起来，很巧妙{:4_187:}

起个网名好难 发表于 2024-10-3 20:38

红影 发表于 2024-10-3 20:33
你这个能接起来，很巧妙

你那条线太靠上了，一偏转就跑出viebox所以接不起来。

我的在中间，怎么转都跑不出框所以就连起来了。

红影 发表于 2024-10-3 21:21

起个网名好难 发表于 2024-10-3 20:38
你那条线太靠上了，一偏转就跑出viebox所以接不起来。

我的在中间，怎么转都跑不出框所以就连起来了。

是的，通常能连接起来的都需要考虑它的对称性{:4_187:}

起个网名好难 发表于 2024-10-3 21:31

红影 发表于 2024-10-3 21:21
是的，通常能连接起来的都需要考虑它的对称性

还是在中间保险些{:5_117:}

红影 发表于 2024-10-3 21:46

起个网名好难 发表于 2024-10-3 21:31
还是在中间保险些

是的，数字的设置还是挺有讲究的。{:4_187:}

起个网名好难 发表于 2024-10-3 21:49

红影 发表于 2024-10-3 21:46
是的，数字的设置还是挺有讲究的。

及时可视的编辑工具能帮助写出合适的代码

红影 发表于 2024-10-3 22:09

起个网名好难 发表于 2024-10-3 21:49
及时可视的编辑工具能帮助写出合适的代码

还有这样的编辑工具啊，我都是自己使劲想的{:4_173:}

起个网名好难 发表于 2024-10-4 07:35

红影 发表于 2024-10-3 22:09
还有这样的编辑工具啊，我都是自己使劲想的

可以试试这个 https://codebeautify.org/htmlviewer#
一边写（或改）代码另一边就可以看到效果，当然还有一些其它的有用功能。

红影 发表于 2024-10-4 11:01

起个网名好难 发表于 2024-10-4 07:35
可以试试这个 https://codebeautify.org/htmlviewer#
一边写（或改）代码另一边就可以看到效果，当然还 ...

太好了，谢谢难难{:4_190:}{:4_187:}

红影 发表于 2024-10-4 11:46

起个网名好难 发表于 2024-10-4 07:35
可以试试这个 https://codebeautify.org/htmlviewer#
一边写（或改）代码另一边就可以看到效果，当然还 ...

去试过了，这个好，边修改就边显示，特别方便{:4_187:}
页: 1 2 [3] 4 5 6
查看完整版本: svg曲线绕圈动态图案