-
-
This was our prototype design that we discussed on during the first night.
-
home page
-
sign in page
-
canvas drawing animation
-
canvas drawing
-
editor in canvas
Inspiration
Designing logos and icons is very fun, but sometimes it is very difficult to scale them for your needs without losing quality. We were inspired by animation software like Procreate and Flipnote Studio - a polished and simple UI but with lower level tools for good fun.
What it does
SVGogh (like Van Gogh) is an animation software that allows users to create and download animated SVGs. We incorporated basic tools like a brush, color wheel, color picker, and more. Furthermore, we have a responsive code editor built into the canvas display that shows users what their frame would look like as an SVG (and they can edit their canvas from it too!).
How we built it
Sticking to simplicity, we used HTML, CSS, and JavaScript.
Challenges we ran into
We had many challenges when it came to learning how to use GitHub properly. Additionally, applying the eraser button was harder than it needed to be. We also ran into the challenge of including databases due to the time restrictions and learning curve.
Accomplishments that we're proud of
We are very proud of our UI as it took a long time to bring it to perfection. Another big accomplishment was finally getting the code editor to reflect its changes on the canvas, enabling users to code or draw as they please.
What we learned
We learned a lot about SVGs, how they're composed, and how to sync raster-based strokes on a canvas with our own math to create them. We also learned a lot about styling and structuring code in a readable way. We especially picked up on how to use GitHub with a group.
What's next for SVGogh — A Vector Animation Tool
We hope to polish this project even further with a database and more features, such as mimicking 3d objects with animated SVGs and user collaboration on one canvas.
Log in or sign up for Devpost to join the conversation.