英文 | https://javascript.plainenglish.io/12-awesome-shape-generators-for-your-web-projects-695da13f11fd
翻译 | 杨小爱
从头开始创建高级形状需要一些高级 CSS 和 SVG 知识，之后您可能仍会调整值。我建议使用一些 GUI 工具，它们为您提供了一个用户界面来调整参数。
在这篇文章中，我整理了一些我最喜欢的形状生成器。我将进一步对它们进行了分类，因此，更容易导航，您可以在每个类别的不同选项之间进行选择。
对于每个工具，我将提供一个直接链接、一个简短描述和一个预览图像，以便您可以在旅途中获得每个生成器及其功能的初步印象。
1、花式边框形状
地址：https://9elements.github.io/fancy-border-radius/
在 CSS 中指定八个边框半径值并构建有机外观的形状。
2、Blobmaker.app
地址：https://www.blobmaker.app/
Blobmaker 是一款免费的生成式设计工具，可帮助您快速创建随机且独特的 SVG 形状。
3、SVG 形状生成器
地址：https://www.softr.io/tools/svg-shape-generator
一个免费的设计工具，用于创建彩色、随机、独特和有机外观的 SVG 形状。
4、 Squircley.app
地址：https://squircley.app/
为徽标、图标和背景图像创建漂亮的形状。导出 SVG 文件，这些文件可以直接复制到剪贴板以放入您的项目中。
5、CSS 波浪
地址：https://getwaves.io/
为您的下一个设计生成 SVG 波形。
6、多个动画波
地址：https://svgwave.in/
一个小巧、免费且美观的 SVG 渐变波浪生成器，具有简单的 UI，可根据您的主题规范自定义和设置波浪样式。
7、SVG 波发生器
地址：https://www.softr.io/tools/svg-wave-generator
一个免费的设计工具，用于创建彩色、多层、随机、独特和有机外观的 SVG 波浪。
8、Shapedivider.app
地址：https://www.shapedivider.app/
一个免费工具，让设计师和开发人员更容易导出漂亮的 SVG。
9、Shapedividers.com
地址：https://shapedividers.com/
在 X 或 Y 轴上创建形状分隔线。创建动画效果的选项也是如此。
10、分页器
地址：https://omatsuri.app/page-dividers
PWA 的一部分，包含 12 个开源前端工具 Omatsuri。
11、放射线
地址：https://msurguy.github.io/rad-lines/
一个 Vue.js 项目，用于生成用于绘图的多边形 SVG。
12、Trianglify.io
地址：https://trianglify.io/
生成低多边形背景、纹理和矢量的工具，它基于一个开源库 Trianglify，用于创建背景非常方便。
写在最后
写作与分享有用的知识，一直是我的热情所在，它让我乐于帮助和激励人们。如果您有任何问题，请随时在留言区给我留言；如果你觉得这篇文章内容非常棒，请记得点赞我，关注我，谢谢。
祝生活愉快！
学习更多技能
请点击下方公众号