React Svg Editor

For any feature request Ping me on linkedIn 👇

Demo

React Svg Editor is a powerful design tool that helps you to create anything: websites, applications, logos, and much more.
Built for Web, React Svg Editor helps you create, share, test, and ship better designs from start to finish.
Whether it’s consolidating tools or simplifying workflows React Svg Editor makes the design process faster, more efficient, and fun while keeping everyone on the same page.

Multiple tools provided to design layouts.
Gradient creator provided to create and use beautiful gradients within the project.
Theming made easy, select and save colours in palettes and use them throughout in the project, didn't liked a color, change it, it will automatically be applied to all the elements in which it was used.
Tool like clipart search, illustration search also provided.
Transform shapes easily, manipulate various properties like height, width, border color, background color etc.
over 8 css filters available.
Divide large projects into small parts , design them in separate pages of a project.
Export your project as svg or json.
Improt the json file again
Effects like outline , box-shadow also available.
Everything is saved locally , don't need internet to work
Pointer helpers are also provided to help place your shape in a perfect position.

click on create new file on header
select tool
click on canvas to add shape
the sidebar on right contains all the properties, manipulate them from there.
for multipoints shapes like line, polygon, path use right click to end the path.
press ctrl key and drag the shape to scale.
press shift key and drag the shape to rotate.
Click on file then on pages to add more pages.
Click on file and then on save to save your project.
Click on gradient , gradient creation tool will open up for you.
Click on color , to add colors to palette.
Click on Insert, clipart search tool will open up for you.

The most complex project That I made is React Svg Editor, It's a in Browser Svg Design Tool has many use cases like Logo Designer, PPT, Ui/UX Design tool, have inbuilt components to search and user cliparts across your projects and other tools for adding effects like gradients, filters, shadows etc.
It includes shapes like Circle, Rectangle, ellipse, Text, Line, Ployline, Polygon, Pencil, Image etc, you can just open this app and start designing whatever u like, all designs will be saved in In Browser Database called IndexedDB.
You can also group two shapes together and thus create a component like Product Card, Navigation bar, Quotes etc and reuse them across your designs, For adding group shape I had to start the project again from scratch brcause I was using Linear traversal by storing shapes in an array to render shapes, But with groups it was not possible so I had to store elements in a map and render them using Depth First Traversal algorithm of trees.
You can also add multiple pages to your design project and later run it like a power point presentation. -The project is made using React.js and Redux and language used is Typescript.