Inspiration

This project is inspired by vector tools available in graphics editor. Vector tools are commonly used for logos, icons, typography, illustrations, and interface elements.

What it does

A tool that allows users to upload images and manually draw lines or shapes on specific elements to mark areas of interest. The app analyzes the marked regions, generates vector overlays of the identified elements, and outputs vector path, with optional smoothing for more natural vector shapes. Users can refine vector overlays by erasing and adding specific elements and download the vector path as SVG, or as Json formats.

How we built it

The tool was build using the AI MeDo deep build agent.

Challenges we ran into

The challenges I ran into in this project include generating continuous lines or closed shapes based on the uploaded image using mouse or touch input. The algorithm developed by the AI to analyze the marked regions, generate vector overlays of the identified elements, and output vector paths did not always return accurate or reliable results. This is a common issue in edge detection and contour extraction systems.

Accomplishments that we're proud of

I'm proud to develop a tool that can help create precise, scalable and editable graphics, this tool enhances graphic design productivity. The generated vector path can be used to create illustrations inside a graphic editing software.

What we learned

I learned how to build a full SPA application using only text prompts.

What's next for Vector Overlay generator

The Vector Overlay Generator app could be extended with zoom functionalities and colorization.

Built With

Share this project:

Updates