我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
先在这里祝大家新的一年，快快乐乐，🐇兔年大吉哦😘~~
前言
首先想要实现这个效果，说难不难，说容易不容易。难就难在你对svg的陌生，自己不会绘制svg，不知道如何下手。易就易在当你熟悉了这些后，就仿佛在画画一样，点来点去哦~
在这里给大家推荐一个绘制svg的工具，也是我众里寻他千百度才找到的 Inkscape编辑器，下面我会详细介绍如何使用，以及我遇到的坑😡
如何绘制svg
1.首先打开Inkscape编辑器，创建对应尺寸的画布（！！一定要注意这里的尺寸，影响到你后期导出的svg视窗大小）
2.选择绘制贝塞尔曲线或直线，绘制出你想要的svg图案，我这里是以每一个三角形为图案，绘制完一个后你可以继续绘制，填充颜色可以在左下角上选择
3.绘制完成后，选择文件-另存为-优化的svg（这里建议尽量选优化的svg这种格式，因为其他的可能会有path d=M m这种M m的坑，考虑不到路径动画的话可以忽略选其它格式另存）
4.打开保存后的文件，此时你就得到了可以复制的svg代码了（选择svg那块的html直接ctrl+c就可以复制整个代码片段了）
如何绘制网格背景
网格背景单纯是为了突出一个 “感jie” 让人有一种是在文本或者书面的效果。当然你也可以选择用一张背景图，但是类似这种用 css+html就能实现的网格背景的效果当然更好~~
掌握以下3点，你就能学会网格背景，或参考我的这篇文章，深入了解如何实现的。
background: linear-gradient()background-sizebackground-repeat
如何实现svg文字环绕动画
1.首先你需要有一个svg路径，这个效果你可以在上面第一步中用 Inkscape编辑器绘制，当然也可以用ps等工具导出为svg；
<svg
xmlns="http://www.w3.org/2000/svg"
width="500"
height="500"
viewBox="0 0 500 500"
>
<path
id="tuzi"
data-name="颜色填充 1"
class="cls-1"
d="m 323.02844,57.389256 -52.34907,3.885043 -83.17686,59.940651 -70.96207,7.77009 -48.859137,69.93076 94.228327,70.48577 -33.1544,18.31519 6.39821,12.21014 -16.28638,14.98516 h 29.08282 l 28.50116,14.43016 50.6041,-1.11002 38.38931,45.5105 -71.54372,33.85537 25.59288,3.88504 -19.19466,14.43016 186.71168,1.11001 13.3781,-35.52039 46.53251,9.99012 -25.01122,-72.7058 -29.08282,-44.40048 -142.5058,-74.37081 -47.11416,-57.72063 162.28211,-15.54017 -89.57507,-34.41037 z"
/>
</svg>
2.svg有了，然后就是如何让文字吸附在path路径上面，这个时候就要用到 <textPath> 标签了,其中xlink:href="#tuzi"，#tuzi就是你需要吸附的path的id
<text>
<textPath xlink:href="#tuzi" class="textPath">
兔年大吉 兔年大吉
</textPath>
</text>
3.接下来是如何让它动起来，此时就需要用到动画标签 <animate>，详细的属性可参考 svg文字路径动画，让文字沿着路径动起来 这篇文章的解释
<animate attributeName="startOffset" from="0" to="68" begin="0s" dur="3s" repeatCount="indefinite" />
🎉额外小知识🎉这里额外多涉及到了 clip-path:url("#clip-path")背景剪切属性，其中#clip-path为标签<clipPath>的id，有兴趣的可以在编辑器中查看并实践哈~
🐇在线代码 🐇
可能对你有帮助
如果你感觉svg的最终成效就这样了，那你就大错特错了。有一种效果是通过path路径改变过渡的动画，你可以借助 animejs 或者gsap动画库实现。
相信你学会后也可以创作出属于自己的svg动画效果！！
🎉🐇🐇🐇🐇🐇🐇🧨🧧 有帮助到你的掘友们，希望点赞支持哦 🧧🧨🐰🐰🐰🐰🐰🐰🎉
