Categories
#SVG Web development

SVG Handwriting Animation

Practising SVG Path drawing I created the SVG Handwriting Animation.

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.

*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Draw your text

This time I used the Pencil tool, and renamed each path (like on the image below, I drew 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!