早起出门上班，天气晴🌤，一直以来的愁绪似乎因对即将到来的新年充满期待而渐渐淡化，变得不那么显著。大盘一路上涨，收盘3个点📈，小回了点本。
一开始对于龙年春节创意没有什么想法的，直到看到群友们的聊天，突然就觉得，这样也不是不行。
全篇全部使用 svg 方式 + class 混合模式实现。虽然都可以通过 canvas 实现，但相比 svg，canvas实现更加复杂，代码也更加多，虽然也实现了一下，但是最终采用的还是 svg 的方式
svg 基础
以下内容实现主要涉及 svg 的 path 路径动画、filter 原子滤镜容器、feTurbulence 噪声函数图像。结合其他的 css 属性（使用最多的混合模式）一起实现。
画个龙
首先要找一张龙的 png 纯色图
通过将 png 图转成 svg 图【方法见文末】，打开 svg 文件资源就可以获取到龙的路径组
将 svg 中的路径组进行提取到要进行渲染的节点中，根据节点的尺寸，调整位置进行渲染，并设置 fill值，即可得到一张被渲染在节点上的龙
根据 svg 的路径动画，让龙看起来稍微那么 “生动” 一些。
与 svg 路径动画相关的就stroke-width（描边粗细），stroke（描边颜色），stroke-dasharray（虚线描边）和stroke-dashoffset（虚线的起始偏移）这几个参数，具体效果可以在 mdn 上体验一下，我们这里不需要很多虚线端，直接将虚线描边值拉满，描边动画要从无描边到满描边，所以描边偏移值也拉满让他描边在一开始时不展示。
这里我们的龙有5条路径，5条路径的长度都不一样，所以要给5条路径的虚线描边值和偏移值都分别拉满，然后通过动画在动画结束时将偏移值设置为0，就可以得到一条“生动”的龙。这里为了更加合理点，路线没跑完的龙不进行涂色，在动画结束后就会得到一个骨架龙。
在骨架龙完成后进行简单的动画填色，黑红是一个很帅的搭配
自此，“生动”的龙就完成了
背景
以上还是单调了一些，弄个春节热闹点的背景吧。祥云背景借用了掘友的祥云背景
结合 svg 的<filter> 和 feTurbulence 给背景加点噪点滤镜，让他看起来更有质感一些
同样，也可以用上面的功能的相关配置，给背景添加个五彩斑斓的反光效果
金粉描边
同理，使用上面的噪点滤镜，调整适当的参数，也可以实现金箔纸的效果
别的都有金粉描边，我们龙也要。结合css 的混合模式，将龙和金箔纸叠加混合，使用 multiply 的混合模式，选择一下能混成金色的颜色，就可以得到一个拥有金粉描边的龙。
添加祥云背景，调整下颜色
收尾
结合上面几个元素，再补个 ”龙年大吉”
字体还是僵硬了些，从别的网站找个可以用的毛笔的艺术字体，好看多了。
最后，龙有金粉描边，那我们字也要金粉描边，上面龙的同样的操作给这几个字也来一套。就简单的收了尾。
最后，补上全套动画，完成。
没做自适应，手机上看一塌糊涂。。。。
附录
获得图片的路径信息的方式
- 使用 Illustrator 或 Inkscape 等矢量图形编辑软件，打开 PNG 图片，然后在软件中将它转换为矢量图形。这样就可以得到一个矢量图形的 SVG 文件，包含图片中的路径信息。
- 使用在线工具，如 image.online-convert 或 www.vectorization.org ，亲测第二个转出来的更干净更好用。
- 使用图像处理软件，如 Photoshop 或 GIMP，将 PNG 图片转换为矢量图形。这样就可以得到一个矢量图形的 SVG 文件，包含图片中的路径信息。
- 使用命令行工具，如 potrace，将 PNG 图片转换为矢量图形。这样就可以得到一个矢量图形的 SVG 文件，包含图片中的路径信息。
偶尔写点工作中永远也用不到的代码也挺有意思
原文链接：https://juejin.cn/post/7327910163628802058 作者：九酒