UI design #1 Handwriting Animation with SVG

nana Jeon
nana Jeon
Sep 29, 2018 · 3 min read

These days, I am designing a website for an artist, NamSin Kwak. This handwriting UI animation was designed for the intro page of the website. I would like to share how I designed and handed over it to the front-end engineer, Ryan Yu.

Let’s get started.

① Layout design in Sketch

First of all, I designed all static pages; intro, main, about, content, etc. And discussed them with Ryan how it would work, for example, transition, micro animation, etc. Ryan Yu and I decided to draw the intro page using handwriting effects with SVG animation.

② Select the image and export it as SVG.

③ Open that SVG file in Adobe Illustrator.

I changed colour white to black but you can ignore this because we are going to delete fill colour in the next step.

④ Delete fill colour and give a stroke 1px. I am going to name these layers as a “mask” layers.

⑤ Draw a path with the Pen tool inside each mask layer. The animation will follow the path you draw.

⑥ When you draw the path, you must draw it a bit off from the edge of each mask layer like the image below.

⑦ If some mask layers are grouped together, ungroup them and rename the layer accordingly like below image.

⑧ Select the two layers, ‘mask layer’ and ‘path layer’. And then do the clipping mask.

object > Clipping Mast > Maskor command + 7

⑨ Export the entire artboard as SVG format like below images.

Export > Export As... 

10. Open the SVG file in the code editor you use. Copy and paste in the HTML file.

That’s a wrap!!!!!

I have completed this design and handed over this SVG file to the front-end engineer, Ryan Yu. He has already finished writing a code. Check it out from CodePen.IO.

Also, I am going to write a tutorial on how to code this UI animation so please stay tuned and gives me 👏loves if you liked it.

🎉🎉🎉 Happy codesign today 🎉🎉🎉


Lastly, I would like to share <FrontEnd30 /> where I learnt many cool front-end techniques.

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary Visual Designer with coding skills; web, graphic and print. Specialized in interactive & responsive UI with accessibility in mind.

nana Jeon

Written by

nana Jeon

UX & UI design with code🐨❤️

Design & Code Repository

Hello there, I am nana, living in Sydney, multidisciplinary Visual Designer with coding skills; web, graphic and print. Specialized in interactive & responsive UI with accessibility in mind.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade