DEV Community

Cover image for 12 Awesome Shape Generators for Your Web Projects 😍🚀
Madza
Madza

Posted on • Originally published at madza.hashnode.dev

12 Awesome Shape Generators for Your Web Projects 😍🚀

Creating advanced shapes from scratch requires some advanced CSS and SVG knowledge and you might still end up adjusting values afterward. I would recommend using some GUI tools, that offer you a user interface to tweak the parameters.

In this article, I have compiled some of my favorite shape generators. I have further sorted them across the categories like blogs, waves, separators, and miscellaneous, so it is easier to navigate and you can choose between different alternatives in each category.

For each tool I will provide a direct link, a short description, and a preview image, so you can get the initial impression of each generator and its features on the go.

Blobs

1. Fancy Border Shape

Specify eight border-radius values in CSS and build organic-looking shapes.

1651590254_1920x929.png

2. Blobmaker.app

Blobmaker is a free generative design tool to help you quickly create random and unique SVG shapes.

1651590275_1882x909.png

3. SVG-shape-generator

A free design tool to create colorful, random, unique, and organic-looking SVG shapes.

1651590318_1898x924.png

4. Squircley.app

Create beautiful shapes for logos, icons, and background images. Exports SVG files which can be copied straight to the clipboard for dropping into your projects.

1651590345_1883x921.png

Waves

5. CSS Waves

Generate SVG waves for your next design.

1651590478_1882x920.png

6. Multiple Animated Waves

A tiny, free and beautiful SVG gradient waves generator with a simple UI to customize, and style your waves based on your theme specifications.

1651590492_1920x929.png

7. SVG-wave-generator

A free design tool to create colorful, multilayer, random, unique, and organic-looking SVG waves.

1651590507_1897x925.png

Separators

8. Shapedivider.app

A free tool to make it easier for designers and developers to export a beautiful SVG

shape divider for their latest project.

1651590526_1905x929.png

9. Shapedividers.com

Create shape dividers on the X or Y-axis. An option to create animated effects as well.

1651590555_1920x929.jpg

10. Page-dividers

Part of the PWA with 12 open source frontend focused tools Omatsuri.

1651590594_1899x930.png

Miscellaneous

11. Rad-lines

A Vue.js project for generating SVGs of polygons for plotting.

1651590623_1920x929.png

12. Trianglify.io

A tool to generate low-poly backgrounds, textures, and vectors. It's based on an open-source library Trianglify.

1651590634_1920x929.png


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn and GitHub!

Visit my Blog for more articles like this.

Discussion (4)

Collapse
andrewbaisden profile image
Andrew Baisden

Great resource as always.

Collapse
madza profile image
Madza Author

Thank you so much 👍💯✨

Collapse
svgatorapp profile image
SVGator

You always bring attention to the most awesome stuff! Another hit piece, Madza 🤟

Collapse
madza profile image
Madza Author

Thank you so much, SVGator 😍✨👍