svg三角形动画代码生成器

马黑黑

三角形数量 : 中

马黑黑

可以设置三角形总数，点按钮“中”重新生成动画。每一次生成，三角形以及三角形堆叠下方的圆背景颜色全部随机。

下方文本框是生成的完整SVG代码，单击全选中。代码可以存为 .svg 晚间文件，上传后便可当图片使用，放大缩小都不是真。

马黑黑

为方便朋友做更多的细节定制，一楼源码公布如下：

1. <style>
   
2.         .pa p { margin: 10px 0; }
   
3.         #wrapper { text-align: center; }
   
4.         #txtbox { width: 740px; height: 300px; word-break: break-all; padding: 8px; tab-size: 4; }
   
5.         #txtnum { width: 40px; }
   
6. </style>
   
7. 
   
8. <div class="pa">
   
9.         <p id="wrapper"></p>
   
10.         <p>
    
11.                 <label for="txtnum">三角形数量 : </label>
    
12.                 <input id="txtnum" type="number" value="7" cols="2" />
    
13.                 <button id="reSetting" type="button" value="load">中</button>
    
14.         </p>
    
15.         <p><textarea id="txtbox" onfocus="this.select()"></textarea></p>
    
16. </div>
    
17. 
    
18. <script>
    
19. var mysvg = document.querySelector('svg');
    
20. 
    
21. mkColor = (opacity) => '#' + Math.random().toString(16).substring(2,8) + opacity;
    
22. 
    
23. drawImage = (total,pa,codebox) => {
    
24.         var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    
25.         svg.setAttribute('version', '1.1');
    
26.         svg.setAttribute('width', '300');
    
27.         svg.setAttribute('height', '300');
    
28.         svg.setAttribute('viewBox', '0 0 300 300');
    
29.         svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    
30.         svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
    
31.         svg.setAttribute('style', 'border-radius: 50%;');
    
32.         var pstr = `\n\t<circle cx="150" cy="150" r="60" fill="${mkColor(60)}"></circle>`;
    
33.         total = parseInt(total) || 7;
    
34.         Array.from({length: total}).forEach((a,b) => {
    
35.                 a = b + 1;
    
36.                 var str1 = b > 0 ? `a${b}.begin` : `0s;b${total}.end+1s`, str2 = b > 0 ? `b${b}.end` : `a${total}.end+1s`;
    
37.                 var angle = 360 / total * b;
    
38.                 pstr += `\n\t<polygon points="100 150,200 150,150 100" fill="${mkColor(80)}" stroke="none" transform= "rotate(${angle} 150 150)">\n\t\t<animate id="b${a}" attributeName="points" to="150 0,100 -100,200 -100" dur="1s" begin="${str2}" fill="freeze"></animate>\n\t\t<animate id="a${a}" attributeName="points" to="100 150,200 150,150 100" dur="1s" begin="${str1}" fill="freeze"></animate>\n\t</polygon>\n`;
    
39.         });
    
40.         svg.innerHTML = pstr;
    
41.         pa.prepend(svg);
    
42.         txtbox.value = svg.outerHTML;
    
43. };
    
44. 
    
45. drawImage(txtnum.value,wrapper,txtbox);
    
46. 
    
47. reSetting.onclick = () => {
    
48.         var svg = wrapper.querySelector('svg');
    
49.         if(svg) wrapper.removeChild(svg);
    
50.         drawImage(txtnum.value,wrapper,txtbox);
    
51. };
    
52. </script>

复制代码

红影

看它们一片片出去，再回来，特别好玩

红影

为什么让它们一片片地出去，如果一块散出去再回来估计也挺好看

红影

好奇妙的svg效果制作

红影

好玩，一片也能正常演示。不过设置为0片，则恢复原设置的7片了。

花飞飞

马黑黑 发表于 2024-9-14 18:35
可以设置三角形总数，点按钮“中”重新生成动画。每一次生成，三角形以及三角形堆叠下方的圆背景颜色全部随 ...

这个可以当成一张动态图片使用。。。。
我试试先

花飞飞

https://642303.freep.cn/642303/za/%E4%B8%89%E8%A7%92%E5%BD%A2.svg

                               
登录/注册后可看大图

花飞飞

马黑黑 发表于 2024-9-14 18:41
为方便朋友做更多的细节定制，一楼源码公布如下：

是这个源码可以改变圆的大小，我抄走瞧瞧

上海朝阳

那可以把花瓣一片片飘逸出去啦————中秋快乐！

上海朝阳

红影 发表于 2024-9-14 19:54
看它们一片片出去，再回来，特别好玩

影姑娘中秋节快乐！

花飞飞

马黑黑 发表于 2024-9-14 18:41
为方便朋友做更多的细节定制，一楼源码公布如下：

源码放得好，下方的圆果然可以修大一些。

樵歌

玩出新花样，玩出新高度了。

马黑黑

樵歌 发表于 2024-9-14 20:30
玩出新花样，玩出新高度了。

也就是1米24

马黑黑

红影 发表于 2024-9-14 19:56
为什么让它们一片片地出去，如果一块散出去再回来估计也挺好看

这都可以的，设置 begin 值即可

马黑黑

花飞飞 发表于 2024-9-14 20:19
源码放得好，下方的圆果然可以修大一些。

那是自然

马黑黑

红影 发表于 2024-9-14 19:54
看它们一片片出去，再回来，特别好玩

玩心太重

马黑黑

上海朝阳 发表于 2024-9-14 20:12
那可以把花瓣一片片飘逸出去啦————中秋快乐！

同乐