Recently I discovered that using the html svg (Scalable Vector Graphics) element along with css animations or javascript, you can create line animations where the drawing actually looks like it’s drawing itself. I’ve always been fascinated by the effect animations can have in enhancing a website’s appearance, so naturally I had to make one of these things myself. The effect I wanted could only be achieved using a path element guided by Bezier curves, but after searching the web, I couldn’t find any tool that would allow me to forgo the meticulous plotting involved. However, I really wanted a cool leaf animation for my website, so I proceeded to spend six consecutive hours manually plotting every single point. After one leaf was done I could easily copy and paste the coordinates to create another leaf, but the difficulty and amount of time it took to make just one drawing was very much not ideal. This is why I created LineScape, a React web application that offers a simpler, more flexible option for front-end developers who want to bring their web design to the next level.

What it does

LineScape provides an interactive visual interface that allows users to quickly and intuitively create scalable & and easily animated drawings without having to worry about each individual point that make up each individual curve. The application automatically keeps up with your actions and outputs path coordinates that you can simply copy and paste into your own SVG element once you’re satisfied with the overall appearance and animation effect.

How we built it

LineScape was built with React.js as the underlying framework and uses Firebase for login authentication and storage.

Challenges we ran into

I don't have much experience with using React, so it was difficult to work with components, and I had trouble figuring out how the data flow and component state worked.

Accomplishments that we're proud of

I’m really proud of having built an efficiently functioning tool that I will definitely continue to use in the future. Once I got the hang of drawing using curves, I could easily create and reuse both simple drawings and complex designs. Due to the simplistic nature of the drawing tool, you don’t have to be a good artist to bring to life artistic renderings that give your website an original and unique look.

What's next for LineScape

I plan to add an animation syncing feature so that different layers can be animated at the same time with the correct amount of delay, a feature that allows you to modify the order of layers, and preset curves that would make drawing easier.

Share this project: