Hugo Ramon Pereira

SVGenius - Your Interactive SVG Editor

SVGenius is an interactive SVG editor where you can add rectangles and stars and play with them by moving across the canvas and making some edits to them

This project was generated and developed using Angular CLI version 19.2.12.

Clone repository

To clone this repository to your local machine, run the following command:

git clone https://github.com/HugoRamonPereira/svgenius.git

Then navigate into the project directory:

cd svgenius

Install the project dependencies using the command:

npm install

Make sure you have Node.js installed on your computer:

You can check if you have Node.js by using the command:

node --version

If it shows a version like: v20.18.0 it means you already have it on your machine, otherwise you will have to install it by vising their website -> Node.js.

And there you can choose your operating system Windows, Linux or Mac and we strongly advise you to install the LTS version.

Then you have your application ready to be used. Just follow the instructions for development server below or you can visit the Live Production on Vercel → SVGenius on Vercel.

Development server

To start a local development server, run:

ng serve

npm start

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Application Structure

This is a tree view of the current application structure:

src/
├── app/
│   ├── components/
│   ├── core/
│   │   └── services/
│   │       ├── canvas/
│   │       │   ├── canvas-store/
│   │       │   ├── drawing/
│   │       │   └── mouse-events/
│   │       └── id-generator/
│   ├── layouts/
│   │   └── main-layout/
│   └── pages/
│       ├── home/
│       ├── pricing/
│       └── not-found/
└── assets/

Home Page

This is the main page and this is where the canvas sits with the editor where you can add rectangles and stars and modify and move them across the canvas.

Toolbar

At the left side of the canvas there is a toolbar with 4 tools:

1. Move
2. Configure
3. Rectangle
4. Star

Rectangle configurations

When you add a rectangle to the canvas you can modify its corners by increasing the border-radius and it will give the rectangle a rounded look.

Star configurations

As for the star you can increase the amount of points it has and move it around the canvas.

Pricing page

A page where you can choose a plan, you can use the free version or you can upgrade to have more tools and possibilities as described in the pricing cards shown in the page.

Not found page

In case you run in trouble or input an incorrect url address by accident you have a custom page with a button to return to the home/main page.

SVGenius - Production - Vercel

This application is online and deployed by Vercel You can use this application online by visiting the website → SVGenius on Vercel

License

© Developed with a lot of ❤ by Hugo Ramon Pereira -> Portfolio -> LinkedIn 🇧🇷