论坛 › 动画音画 › Illuminati

马黑黑 发表于 2025-8-23 20:36

Illuminati

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa {
                --offsetX: 81px;
                --bg: url('https://638183.freep.cn/638183/small/2025/sha.webp') no-repeat center/cover;
                --per: 15px;
                --ma-size: 25%;
        }
        #ma { display: block; }
        #btnFs { bottom: 20px; color: #eee; border-color: currentColor; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2639639788" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4d867a105c9.mp4" autoplay loop muted></video>
        <svg id="ma" class="grayscale" viewbox="-200 -200 400 400"></svg>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        var dr = Dr.dr(ma);
        var tt = 12, d = 'M0 0 L-30 -200 Q0 -50,30 -200, L0 0';
        Array.from({length: tt}).forEach((_,k) => {
                dr.path(d, 'cyan', 'teal', 2).transform(`rotate(${360/tt*k})`);
        });
        FS(pa, ma);
</script>

马黑黑 发表于 2025-8-23 20:38

<div class="codebox">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa {
                --offsetX: 81px;
                --bg: url('https://638183.freep.cn/638183/small/2025/sha.webp') no-repeat center/cover;
                --per: 15px;
                --ma-size: 25%;
        }
        #ma { display: block; }
        #btnFs { bottom: 20px; color: #eee; border-color: currentColor; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=2639639788" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4d867a105c9.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;svg id="ma" class="grayscale" viewbox="-200 -200 400 400"&gt;&lt;/svg&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        var dr = Dr.dr(ma);
        var tt = 12, d = 'M0 0 L-30 -200 Q0 -50,30 -200, L0 0';
        Array.from({length: tt}).forEach((_,k) =&gt; {
                dr.path(d, 'cyan', 'teal', 2).transform(`rotate(${360/tt*k})`);
        });
        FS(pa, ma);
&lt;/script&gt;
</div>

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

马黑黑 发表于 2025-8-23 20:41

小播完整SVG代码

<svg id="msvg" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewbox="-200 -200 400 400">
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(0)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(30)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(60)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(90)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(120)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(150)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(180)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(210)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(240)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(270)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(300)"></path>
        <path d="M0 0 L-30 -200 Q0 -50,30 -200, L0 0" fill="cyan" stroke="teal" stroke-width="2" transform="rotate(330)"></path>
</svg>

杨帆 发表于 2025-8-23 21:08

试了一下这个可以，看来对完整SVG代码才可用介绍的路径适配svg尺寸的方法{:4_173:}

花飞飞 发表于 2025-8-23 21:10

这个小播好看，内弧形的，看代码是一个叶片一个叶片画出来的。。每个叶片从00开始，最后都回到了原点。
小播在触碰后一贯的颜色发生变化，像是被挠了痒痒{:4_173:}

花飞飞 发表于 2025-8-23 21:14

不对，小播叶片是自动生成的，先画一个再通过计算得出别的。。
23-26这几行代码对应三楼那么长一串，数学之美，代码简洁效果美观。。

花飞飞 发表于 2025-8-23 21:17

-200 -200 400 400这句用上了，保证原点在画布中心，现在知道这样设置不是随意就可以被替代的。。

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

背景是立了个规矩{:4_170:}看到了，整个布置都很规矩
display: block; 特特给出一列，别的贴子里好象没看到它。。是为了跟viewbox配套用的吧

马黑黑 发表于 2025-8-23 21:28

花飞飞 发表于 2025-8-23 21:21
背景是立了个规矩看到了，整个布置都很规矩
display: block; 特特给出一列，别的贴子里好象没看 ...

#ma 选择器在本帖是SVG标签，svg是行内元素，如果不把它设置为块状元素，很可能它不听使唤。

马黑黑 发表于 2025-8-23 21:29

花飞飞 发表于 2025-8-23 21:17
-200 -200 400 400这句用上了，保证原点在画布中心，现在知道这样设置不是随意就可以被替代的。。

即使不使用 -200 -200 原点坐标值也是可以的，在设计图案的时候和它配套就成。

马黑黑 发表于 2025-8-23 21:30

杨帆 发表于 2025-8-23 21:08
试了一下这个可以，看来对完整SVG代码才可用介绍的路径适配svg尺寸的方法

就是要配套：所绘制的图像或路径是基于什么样的 viewbox 就对应给svg设置这个属性

马黑黑 发表于 2025-8-23 21:36

花飞飞 发表于 2025-8-23 21:14
不对，小播叶片是自动生成的，先画一个再通过计算得出别的。。
23-26这几行代码对应三楼那么长一串，数学 ...

Array遍历循环那一句，一口气画出 tt 个路径，每个路径都依据自己的角度做旋转。

svg 的旋转是基于左上角坐标点的，viewbox 重新设置了坐标点，在svg画布的中心。

如果没有 viewbox 设置，那么，在400*400的画布上绕画布的中心旋转，需要这么设置：

transform=“rotate(角度值, 200, 200)"

若 viewbox 属性恰好能将原点坐标移到了 0 0，则上述语句可以简写成：

transform=“rotate(角度值)"

因为 0 0 是原点，svg默认也是绕 0 0 做旋转或其它转换动作

红影 发表于 2025-8-23 22:04

这小播好漂亮，每一个叶瓣都那么修长飘逸，和背景结合很好{:4_199:}

红影 发表于 2025-8-23 22:07

这小播代码很简洁，体现了JS的强大，如果用svg一个个去画要麻烦多了{:4_199:}

马黑黑 发表于 2025-8-23 22:14

红影 发表于 2025-8-23 22:04
这小播好漂亮，每一个叶瓣都那么修长飘逸，和背景结合很好

这是用 svgdr 设计的

马黑黑 发表于 2025-8-23 22:14

红影 发表于 2025-8-23 22:07
这小播代码很简洁，体现了JS的强大，如果用svg一个个去画要麻烦多了

就是代码量多一点，也没啥

杨帆 发表于 2025-8-23 22:17

马黑黑 发表于 2025-8-23 21:30
就是要配套：所绘制的图像或路径是基于什么样的 viewbox 就对应给svg设置这个属性

对这种svg动态生成版，如何配套呢？

马黑黑 发表于 2025-8-23 22:28

杨帆 发表于 2025-8-23 22:17
对这种svg动态生成版，如何配套呢？

那不一样的吗？

<svg ... viewbox="..."></svg>

所设计的路径或要绘制的图案，使用 viewbox 规定的数据即可

红影 发表于 2025-8-23 22:59

马黑黑 发表于 2025-8-23 22:14
这是用 svgdr 设计的

这个设计漂亮{:4_199:}

红影 发表于 2025-8-23 23:00

马黑黑 发表于 2025-8-23 22:14
就是代码量多一点，也没啥

当然是代码少了更好啊，那么多重复的设置，JS一句话就搞定{:4_173:}

查看完整版本: Illuminati