Practicing SVG Path drawing I created the SVG Handwriting Animation.
I’ve tried several ways to make this animation, and I found (in my opinion) the easiest way is to create the text in Adobe Illustrator (or any different program which creates SVG’s) by using the path tools like the Pen tool, or the Pencil tool.
To see the live output of the animation on the website click here.
Demo:
Step1.
Draw your text
This time I used the Pencil tool, and renamed each path (like on the image below, I drew the letter L and I named this path as an L). This will make the animation easier to set up later.
I drew the letters one by one but if you want to draw more letters on the same path that will be okay too.
Draw your text and export it like an SVG. (To see how to create an SVG file click here).
Step2.
Add the HTML and paste your SVG code into it:
<div id="container">
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285.84 73.32"><defs><style>.cls-1{fill:none;stroke:#1d1d1b;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style></defs><title>lenastanley</title><path id="L" class="cls-1" d="M109.68,101.19c1.09,5.41,6.88,9,12.4,8.87s10.6-3.21,14.52-7.1c1.82-1.81,3.52-3.94,3.92-6.47s-.9-5.5-3.39-6.15a5.31,5.31,0,0,0-4.69,1.34,12.14,12.14,0,0,0-2.83,4.18c-5.73,12.48-4,27.77-11.35,39.37a13.56,13.56,0,0,1-4,4.32,6.65,6.65,0,0,1-5.66.87c-3.45-1.21-4.62-5.89-3.14-9.23s4.79-5.48,8.15-6.93c4.7-2,10-3.1,15-2s9.64,4.64,11.15,9.55-.81,10.95-5.58,12.85" transform="translate(-103.33 -88.71)"/><path id="E" class="cls-1" d="M154,127.24a15.13,15.13,0,0,0,6.2-2.32c1.77-1.34,2.93-3.76,2.13-5.84s-3.48-3.15-5.72-2.65a9.37,9.37,0,0,0-5.36,4,17.26,17.26,0,0,0-3,11.81,7.87,7.87,0,0,0,1.85,4.62,6.47,6.47,0,0,0,5.85,1.6,12.8,12.8,0,0,0,5.55-2.9" transform="translate(-103.33 -88.71)"/><path id="N" class="cls-1" d="M170.47,115.52c1.94,3.42,1.81,7.63,1,11.47s-1.56,7.08-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.5-7.54,5.67-9.67,1.28-.87,3.07-1.36,4.32-.45a4.59,4.59,0,0,1,1.45,3.13,43.49,43.49,0,0,1-.68,17.12l.28-.62" transform="translate(-103.33 -88.71)"/><path id="A" class="cls-1" d="M210.05,138.29a16.72,16.72,0,0,1-.49-8.35,74.74,74.74,0,0,0,1.18-8.38,6.47,6.47,0,0,0-1.36-4.8,4.93,4.93,0,0,0-4.8-1.07,10.56,10.56,0,0,0-4.33,2.71c-3.58,3.41-6.19,8.15-5.93,13.08.11,2.12.86,4.37,2.61,5.56a4.69,4.69,0,0,0,7.26-3.18" transform="translate(-103.33 -88.71)"/><path id="S" class="cls-1" d="M263.55,91.6a11.16,11.16,0,0,0-7.92,9,4.59,4.59,0,0,0,1.12,4.2,3.42,3.42,0,0,0,4.72-.76,5,5,0,0,0,.21-5.07,9.18,9.18,0,0,0-3.79-3.67c-3.76-2.15-8.58-2.7-12.46-.77s-6.42,6.59-5.29,10.77c.88,3.26,3.68,5.69,6.7,7.22s6.34,2.35,9.46,3.68,6.14,3.31,7.64,6.34a10.65,10.65,0,0,1-.8,10.26,14.2,14.2,0,0,1-8.68,5.91,21.83,21.83,0,0,1-10.65-.33c-3.31-.87-6.6-2.43-8.59-5.21s-2.24-7,.12-9.44a8.48,8.48,0,0,1,5.13-2.27,14.31,14.31,0,0,1,9.19,26.42" transform="translate(-103.33 -88.71)"/><path id="T" class="cls-1" d="M280.38,107c-2,7.37-4,14.83-4.25,22.46a18,18,0,0,0,.91,7.16c.42,1.09,1.2,2.23,2.37,2.32" transform="translate(-103.33 -88.71)"/><path id="T2" class="cls-1" d="M272.26,116.93a27,27,0,0,1,11.69-.07" transform="translate(-103.33 -88.71)"/><path id="A2" class="cls-1" d="M303.78,139.29a16.77,16.77,0,0,1-.48-8.36,76.78,76.78,0,0,0,1.18-8.38c0-1.71-.17-3.57-1.36-4.8a5,5,0,0,0-4.81-1.07A10.58,10.58,0,0,0,294,119.4c-3.59,3.4-6.2,8.15-5.94,13.08.11,2.12.86,4.36,2.62,5.55a4.75,4.75,0,0,0,4.5.42,4.8,4.8,0,0,0,2.76-3.59" transform="translate(-103.33 -88.71)"/><path id="N2" class="cls-1" d="M315,115.69c1.93,3.41,1.81,7.63,1,11.46s-1.56,7.09-2.12,11c1-3.25,2.28-6,3.4-10.17,1-3.69,2.49-7.54,5.66-9.68,1.28-.86,3.08-1.36,4.33-.45a4.61,4.61,0,0,1,1.44,3.14,43.69,43.69,0,0,1-.67,17.12l.27-.63" transform="translate(-103.33 -88.71)"/><path id="L2" data-name="L" class="cls-1" d="M345.1,96.4c-.3,11.8-4.39,23.33-4.06,35.13a15.66,15.66,0,0,0,1.58,7.26" transform="translate(-103.33 -88.71)"/><path id="E2" class="cls-1" d="M355.85,127.4a15.12,15.12,0,0,0,6.2-2.31c1.77-1.35,2.93-3.77,2.13-5.84s-3.48-3.15-5.72-2.66a9.43,9.43,0,0,0-5.36,4,17.29,17.29,0,0,0-3,11.8,7.92,7.92,0,0,0,1.86,4.62,6.47,6.47,0,0,0,5.85,1.61,12.71,12.71,0,0,0,5.55-2.91" transform="translate(-103.33 -88.71)"/><path id="Y"class="cls-1" d="M373.08,115.75a29.75,29.75,0,0,0-.38,16.7c.52,1.89,1.42,3.94,3.26,4.61a4.61,4.61,0,0,0,4.57-1.22,12,12,0,0,0,2.58-4.21A69.17,69.17,0,0,0,387.62,116l-1.46,13.43a84.83,84.83,0,0,1-2.53,15,28.46,28.46,0,0,1-7.56,13,11.54,11.54,0,0,1-5.4,3,6.09,6.09,0,0,1-5.75-1.72c-1.85-2.17-1.35-5.66.47-7.85s4.63-3.29,7.4-4a16.16,16.16,0,0,1,8.67-.07c2.78.89,5.26,3.18,5.72,6.07l.49-.49" transform="translate(-103.33 -88.71)"/></svg>
</div>Step3.
Add CSS
Set up the colour and the position of your background, and the elements:
body {
background-color: #FFD4CA;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#container {
position: relative;
cursor:pointer;
width: 100%;
max-width: 400px;
left:-200px;
}
svg {
width: 100%;
max-width: 400px;
padding: 150px;
}Add your letters(paths):
#L {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards;
}To each letter, I added the animation – duration time and animation-delay to make handwriting smoother.
#E {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards .8s;
}
#N {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards 1.1s;
}
#A {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards 1.3s;
}
#S {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.4s linear forwards 1.8s;
}
#T {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards 2.3s;
}
#T2 {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards 2.3s;
}
#A2 {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards 2.6s;
}
#N2 {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards 2.9s;
}
#L2 {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards 3.2s;
}
#E2 {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards 3.5s;
}
#Y {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: lena 1.5s linear forwards 3.8s;
}Step4.
Add CSS Animation
Add the @keyframes:
@keyframes lena {
0% {
stroke-width: 3;
stroke-dashoffset: 600;
}
14% {
stroke-width: 3;
}
15% {
stroke-width: 3;
}
100% {
stroke-dashoffset: 0;
}
}To see the live output of the animation go to lenastanley.com.
Enjoy coding!
Read also:
CSS Background Change Animation – Day & Night
CSS Umbrella (Open/Close on Click)