马黑黑 发表于 2024-9-14 18:30

svg三角形动画代码生成器

<style>
        .pa p { margin: 10px 0; }
        #wrapper { text-align: center; }
        #txtbox { width: 740px; height: 300px; word-break: break-all; padding: 8px; tab-size: 4; }
        #txtnum { width: 40px; }
</style>

<div class="pa">
        <p id="wrapper"></p>
        <p>
                <label for="txtnum">三角形数量 : </label>
                <input id="txtnum" type="number" value="7" cols="2" />
                <button id="reSetting" type="button" value="load">中</button>
        </p>
        <p><textarea id="txtbox" onfocus="this.select()"></textarea></p>
</div>

<script>
var mysvg = document.querySelector('svg');

mkColor = (opacity) => '#' + Math.random().toString(16).substring(2,8) + opacity;

drawImage = (total,pa,codebox) => {
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('version', '1.1');
        svg.setAttribute('width', '300');
        svg.setAttribute('height', '300');
        svg.setAttribute('viewBox', '0 0 300 300');
        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
        svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
        svg.setAttribute('style', 'border-radius: 50%;');
        var pstr = `\n\t<circle cx="150" cy="150" r="60" fill="${mkColor(60)}"></circle>`;
        total = parseInt(total) || 7;
        Array.from({length: total}).forEach((a,b) => {
                a = b + 1;
                var str1 = b > 0 ? `a${b}.begin` : `0s;b${total}.end+1s`, str2 = b > 0 ? `b${b}.end` : `a${total}.end+1s`;
                var angle = 360 / total * b;
                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`;
        });
        svg.innerHTML = pstr;
        pa.prepend(svg);
        txtbox.value = svg.outerHTML
};

drawImage(txtnum.value,wrapper,txtbox);

reSetting.onclick = () => {
        var svg = wrapper.querySelector('svg');
        if(svg) wrapper.removeChild(svg);
        drawImage(txtnum.value,wrapper,txtbox);
};
</script>

马黑黑 发表于 2024-9-14 18:35

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

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

马黑黑 发表于 2024-9-14 18:41

本帖最后由 马黑黑 于 2024-9-14 18:43 编辑

为方便朋友做更多的细节定制，一楼源码公布如下：
<style>
      .pa p { margin: 10px 0; }
      #wrapper { text-align: center; }
      #txtbox { width: 740px; height: 300px; word-break: break-all; padding: 8px; tab-size: 4; }
      #txtnum { width: 40px; }
</style>

<div class="pa">
      <p id="wrapper"></p>
      <p>
                <label for="txtnum">三角形数量 : </label>
                <input id="txtnum" type="number" value="7" cols="2" />
                <button id="reSetting" type="button" value="load">中</button>
      </p>
      <p><textarea id="txtbox" onfocus="this.select()"></textarea></p>
</div>

<script>
var mysvg = document.querySelector('svg');

mkColor = (opacity) => '#' + Math.random().toString(16).substring(2,8) + opacity;

drawImage = (total,pa,codebox) => {
      var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.setAttribute('version', '1.1');
      svg.setAttribute('width', '300');
      svg.setAttribute('height', '300');
      svg.setAttribute('viewBox', '0 0 300 300');
      svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
      svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
      svg.setAttribute('style', 'border-radius: 50%;');
      var pstr = `\n\t<circle cx="150" cy="150" r="60" fill="${mkColor(60)}"></circle>`;
      total = parseInt(total) || 7;
      Array.from({length: total}).forEach((a,b) => {
                a = b + 1;
                var str1 = b > 0 ? `a${b}.begin` : `0s;b${total}.end+1s`, str2 = b > 0 ? `b${b}.end` : `a${total}.end+1s`;
                var angle = 360 / total * b;
                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`;
      });
      svg.innerHTML = pstr;
      pa.prepend(svg);
      txtbox.value = svg.outerHTML;
};

drawImage(txtnum.value,wrapper,txtbox);

reSetting.onclick = () => {
      var svg = wrapper.querySelector('svg');
      if(svg) wrapper.removeChild(svg);
      drawImage(txtnum.value,wrapper,txtbox);
};
</script>

红影 发表于 2024-9-14 19:54

看它们一片片出去，再回来，特别好玩{:4_173:}

红影 发表于 2024-9-14 19:56

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

红影 发表于 2024-9-14 19:56

好奇妙的svg效果制作{:4_187:}

醉美水芙蓉 发表于 2024-9-14 19:58

红影 发表于 2024-9-14 19:59

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

花飞飞 发表于 2024-9-14 20:07

本帖最后由 花飞飞 于 2024-9-14 20:08 编辑

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

花飞飞 发表于 2024-9-14 20:08

本帖最后由 花飞飞 于 2024-9-14 20:11 编辑

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

花飞飞 发表于 2024-9-14 20:12

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

是这个源码可以改变圆的大小，我抄走瞧瞧{:4_173:}

上海朝阳 发表于 2024-9-14 20:12

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

上海朝阳 发表于 2024-9-14 20:14

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

影姑娘中秋节快乐！

花飞飞 发表于 2024-9-14 20:19

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

源码放得好，下方的圆果然可以修大一些。{:4_199:}

樵歌 发表于 2024-9-14 20:30

玩出新花样，玩出新高度了。{:4_190:}

马黑黑 发表于 2024-9-14 21:03

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

也就是1米24

马黑黑 发表于 2024-9-14 21:04

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

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

马黑黑 发表于 2024-9-14 21:04

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

那是自然

马黑黑 发表于 2024-9-14 21:04

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

玩心太重

马黑黑 发表于 2024-9-14 21:05

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

同乐
页: [1] 2 3
查看完整版本: svg三角形动画代码生成器