For any feature request Ping me on linkedIn 👇

Follow me on linkedin for more interesting projects

Click here to visit site

• 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.