How to Animate Handwriting Text on the Web Page Using Svg

How to animate handwriting text on the web page using SVG?

How the Se7ensky animation works is that it uses the standard dash animation technique, but clips the animated stroke with an outline representing the hand-drawn look of the logo.

So the standard dash animation technique works as follows. You take a standard line:

<svg>  <path d="M 10,75 L 290,75" stroke="red" stroke-width="50"/></svg>

SVG handwriting letter drawing animation

The way your svg is made now won't allow you to make the animation you are seeking. The stroke-dasharray animation alone won't let you draw the letters as if they were made with a text marker as the stroke is "around" the letters. You can see this in the following example animation:

path{  fill:transparent;  stroke:#000;  stroke-width:1;  stroke-dasharray:0,0,800;  animation:stroke 3s ease-out;}@keyframes stroke {  from { stroke-dasharray:0,800,800; }  to { stroke-dasharray:0,0,800; }}

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 672.74 331.21">  <title>bedifferent</title>  <path d="M204,360.29c-10.4,4.75-24.44,2.49-28.91,1.71,1.57,3,5.59,8.93.93,11.06-9.86,4.5-17.28,2-19.32-2.45-1.72-3.77-42.11-88.93-55.13-117.44-1.64-3.59-2.92-2.13-4.17-4.38-2.64-5.3,20.74-7.73,23-2.89,1.15,2.51,16.49,35.17,30.76,65.5-2.56-17.47-5.64-27.55-5.27-28.15,1.38-4.1,6.63-7.79,12-10.25,7.53-3.44,27.32,15.7,38.21,39.56C202.26,326,213,356.2,204,360.29Zm-25.32-39.81C170.62,302.73,154,287.14,152,288c0,0,4.32,25.12,8,41.84,6,12.65,11.08,23.33,13.7,29.07,2.28,0.26,9.42.69,10.59-.07C187.77,356.45,187.81,340.39,178.72,320.48Z" transform="translate(-79.87 -108.93)" />  <path d="M254.9,272.28c1.54,13.82,4,63-11.93,70.25-28.34,12.94-59.72-80-51.65-83.71,0,0,27.07-19.51,35.91-.14,2.46,5.38,15.19,41.83,9.64,46.75-2.28,2.13-14.62,1.69-14.62,1.69,6.94,13.3,16.73,25.74,22.11,23.28,5.2-2.37,7.07-40.07,5.55-57.15C249.58,270.59,254.57,269.18,254.9,272.28Zm-37.08,23.21c1.26-15.75-8.34-31.09-8.34-31.09C207,265.55,211.21,280.08,217.81,295.49Z" transform="translate(-79.87 -108.93)" />  <path d="M348.44,348.66c0.95,12.78,3.21,62-4.28,65.47-5.17,2.4-14.8,4.05-19.77-6.64-0.25-.54-3.38-7.75-5.45-12.2,1.08,11.2,2,23.54,1.85,24.06-2.55,6.17-7.7,7.69-13.21,9.82-7.65,3.12-24-25.49-30.67-42.75-3.2-7.83-18.51-40.81-9.42-45,9.45-4.39,19.14-5,26-3.2-9.09-20-18.91-42.14-19.82-44.1-2.15-4.64,14.75-20.5,16.71-15.34,0.9,2.4-.45,3.24,2.44,9.92,12.28,28.32,43.46,117,48.28,114.75,3-1.41,3.63-40.25,2.27-53.92C343.08,345.51,348.3,344.61,348.44,348.66Zm-36.1,31.92c-5.45-12.2-10.15-22.81-16.59-37.15-2.51-1.22-6-2.2-8-1.46-4,1.64,2.77,28.83,7.29,39.52,3,7.47,16.14,31.51,18,30.86C314.25,411.76,313.36,394,312.34,380.58Z" transform="translate(-79.87 -108.93)" />  <path d="M320.8,304.51c-4.7-1.72-11.25-24.25-11.25-24.25s10.44-8.31,14.62-6.79c4.52,1.8,11.25,24.25,11.25,24.25S325,306,320.8,304.51Zm66,25c4.42,59.48,5,62.67-3.88,66.8-1.25.58-9.67,3-9.67,3-10.69,1.71-43.67-73.55-45.33-77.11s-2.27-3.5-2.77-4.56c-1.08-2.32,13.76-10.5,16.45-9.37,5,1.81,36.58,81.61,41.57,79.29,1.07-.5.21-43.43-1.6-56.67C380.94,325.78,386.48,325.59,386.81,329.55Z" transform="translate(-79.87 -108.93)" />  <path d="M419.37,289.09c-4.73,2.41-9.83,5.43-14.64,7.66,11.09,23.89,34.27,91.56,47.58,117.45,2.83,5.62-8.42,8.46-13.91,6.45C408.12,410,350.13,260.34,349.14,258.2c-1.08-2.32-.54.25-2.18-3.76-1.55-4.27,7.57-9.36,15.25-4.48s58.93,129.3,62.68,127.56c0,0-17.67-54.42-27.1-78-4.43,1.19-7.86,1.27-9.19-1.59-3.48-7.49,4.86-12.87,11.1-9.7,0.52,0.19,1.2,1.18,2.12,2.7,8.47-4.15,12.83-6,14.62-6.79C421.87,281.86,423.21,287.09,419.37,289.09Z" transform="translate(-79.87 -108.93)" />  <path d="M463.4,268.65c-4.73,2.41-9.83,5.43-14.64,7.66,11.09,23.89,34.27,91.56,47.58,117.45,2.83,5.62-8.42,8.46-13.91,6.45-30.29-10.64-88.28-160.31-89.27-162.45-1.08-2.32-.54.25-2.18-3.76-1.55-4.27,7.57-9.36,15.25-4.48s58.93,129.3,62.68,127.56c0,0-17.67-54.42-27.1-78-4.43,1.19-7.86,1.27-9.19-1.59-3.48-7.49,4.86-12.87,11.1-9.7,0.52,0.19,1.2,1.18,2.12,2.7,8.47-4.15,12.83-6,14.62-6.78C465.9,261.43,467.24,266.65,463.4,268.65Z" transform="translate(-79.87 -108.93)" />  <path d="M523.44,227.91c1.62,13.76,8,97.72-10.64,108-27.73,14-60-79.39-52-83.11,0,0,26.86-19.62,35.8-.37,2.48,5.35,15.41,41.6,9.9,46.54-2.26,2.13-14.56,1.77-14.56,1.77,7,13.22,16.91,25.7,22.19,23.07,8.57-4.26,6-77.84,4.37-94.86C518.12,226.26,523.09,224.82,523.44,227.91Zm-36,61.23c1.16-15.71-8.51-30.94-8.51-30.94C476.42,259.36,480.75,273.82,487.43,289.14Z" transform="translate(-79.87 -108.93)" />  <path d="M514,202.07c1.57,3.39,4.45,13.32,6.44,17.6,2.07,4.46,17.71-4.32,24.25,9.76,2.23,4.81,18.17,70.43,24.41,67.54,0,0,1.29-41.11.85-56.51-0.09-5.81,6.72-7.46,6.74-1.83-0.2,9.84.29,56.63,0.22,62.08-0.71,6.4-3.21,7.56-5.88,8.8-11.05,5.13-15.89,2.18-24.6-15.66-14.82-31.47-17.34-65.84-21-65.68-9.14-.09-19.11.85-20.57-3.24-1.3-3.73-9.05-21.37-5.66-22.94C501.51,200.91,512.39,198.68,514,202.07Z" transform="translate(-79.87 -108.93)" />  <path d="M625.14,218.93c1.62,13.76,4.42,62.74-11.45,70.1-28.17,13.07-60-79.39-52-83.11,0,0,26.86-19.62,35.8-.37,2.48,5.35,15.41,41.6,9.9,46.54-2.26,2.13-14.56,1.77-14.56,1.77,7,13.22,16.84,25.55,22.19,23.07,5.17-2.4,6.79-40,5.17-57C619.82,217.28,624.79,215.84,625.14,218.93ZM588.32,242.3c1.16-15.71-8.51-30.94-8.51-30.94C577.32,212.53,581.64,227,588.32,242.3Z" transform="translate(-79.87 -108.93)" />  <path d="M689.08,188.17c1,6.27,4.12,64,1.09,65.36l-3.74,1.74c-14.44,6.7-34.14-26.41-46.26-51.11,1.08,2.32,5.47,26.71,19,55.95,1.32,2.85.17,6.42-7.86,10.15-11.41,5.3-46-79-46-79-1.41-3-2.76-1.75-3.92-4.25-0.58-1.25,15.64-8.78,20.11.85,1.41,3,15.47,33.34,16.54,32.84s-4.08-26.06-5.46-32.78c-2.4-5.17-3.79-8.64-4-9-0.5-1.07-1.15.32-1.9-1.29-0.5-1.07,15.29-11.87,22.66,4,21.68,46.71,33.28,61.9,35.24,61,1.07-.5.16-51-0.1-53.9A2.28,2.28,0,1,1,689.08,188.17Z" transform="translate(-79.87 -108.93)" />  <path d="M703.51,127.3l-22.28,10.34c13.61,34,33.6,87.32,39.84,84.43,0,0,1.18-40.41,1.26-52.37,0-4.57,5.05-4.51,5-.38,0.18,18.12.24,61.21,0.24,61.21,0.18,2.73,1.26,5-2.3,6.7-4.64,2.15-9,2.46-14.12,1.79-9-1.23-32-56.24-48.12-92.94l-12.48,5.79c-4.1,1.9-6.61-2.57-2.6-4.21,4.18-1.73,8.72-3.62,13.36-5.77-3.55-8.1-6.69-14.88-9.27-20-3.24-6.51-4.75-6-6-8.26-2.58-5.09,18.64-6.05,22.86-3,1.64,1.19,5.59,10.19,10.51,22.64,7.76-3.82,15.17-7.47,21.94-10.62C703.85,121.51,707.25,125.57,703.51,127.3Z" transform="translate(-79.87 -108.93)" />  <path d="M82.17,429c4.09-1.53,1.86-.59,4.09-1.53,2.46-1,132.17-63.07,159.43-60.26,5.54,0.64,10.36,9.56,6,14.19-15.26,15.62-46.85,39.33-55.38,45.33-3.67,2.55-6.35-.7-3.21-3.22,2.92-2.43,43.77-36,42.49-39.68-1.55-4.92-133,56.83-141.61,56.31C85.11,439.71,75.32,431.51,82.17,429Z" transform="translate(-79.87 -108.93)" />  <path d="M744.24,273.12c-8.83,8.46-208.15,82.33-205.23,87.63,2,4,77.46-7.6,82.88-8.41,5.75-.95,5.89,4.1-0.44,5.52-14.79,3.23-71,14-102,16-9,.43-12.17-11.06-6.8-16.73C539.35,329.52,737.1,257.46,740.72,256c3.29-1.34,0,0,5.84-2.61C756.28,249,753.4,264.52,744.24,273.12Z" transform="translate(-79.87 -108.93)" /></svg>

How can I animate the drawing of text on a web page?

I want this word to be drawn with an animation, such that the page
"writes" the word out the same way that we would

Canvas version

This will draw single chars more like one would write by hand. It uses a long dash-pattern where the on/off order is swapped over time per char. It also has a speed parameter.

Snapshot

^{Example animation (see demo below)}

To increase realism and the organic feel, I added random letter-spacing, an y delta offset, transparency, a very subtle rotation and finally using an already "handwritten" font. These can be wrapped up as dynamic parameters to provide a broad range of "writing styles".

For a even more realistic look the path data would be required which it isn't by default. But this is a short and efficient piece of code which approximates hand-written behavior, and easy to implement.

How it works

By defining a dash pattern we can create marching ants, dotted lines and so forth. Taking advantage of this by defining a very long dot for the "off" dot and gradually increase the "on" dot, it will give the illusion of drawing the line on when stroked while animating the dot length.

Since the off dot is so long the repeating pattern won't be visible (the length will vary with the size and characteristics of the typeface being used). The path of the letter will have a length so we need to make sure we are having each dot at least covering this length.

For letters that consists of more than one path (f.ex. O, R, P etc.) as one is for the outline, one is for the hollow part, the lines will appear to be drawn simultaneously. We can't do much about that with this technique as it would require access to each path segment to be stroked separately.

Compatibility

For browsers that don't support the canvas element an alternative way to show the text can be placed between the tags, for example a styled text:

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

Demo

This produces the live animated stroke-on (no dependencies) -

var ctx = document.querySelector("canvas").getContext("2d"),    dashLen = 220, dashOffset = dashLen, speed = 5,    txt = "STROKE-ON CANVAS", x = 30, i = 0;
ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;ctx.strokeStyle = ctx.fillStyle = "#1f2f90";
(function loop() {  ctx.clearRect(x, 0, 60, 150);  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask  dashOffset -= speed;                                         // reduce dash length  ctx.strokeText(txt[i], x, 90);                               // stroke letter
  if (dashOffset > 0) requestAnimationFrame(loop);             // animate  else {    ctx.fillText(txt[i], x, 90);                               // fill final letter    dashOffset = dashLen;                                      // prep next char    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta    ctx.rotate(Math.random() * 0.005);                         // random rotation    if (i < txt.length) requestAnimationFrame(loop);  }})();

canvas {background:url(http://i.imgur.com/5RIXWIE.png)}

<canvas width=630></canvas>

CSS Handwriting Animation

I've created a JSFiddle of it, that will do the trick for you.

And for effect like this, using HTML5 is really good option as you've being suggested to use canvas.

Here you can change height & width of canvas and your CSS as per your need.

Source: Handwriting Effect.

Animate text in SVG

Something like this: http://hoffmann.bplaced.net/svgtest/textonapath02.svg or http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/textPath1.svg perhaps. These animated the startOffset attribute of a textPath.

How can I animate SVG text to be written out

And how could I make my own SVG's (such as the one below) animate in
the same fashion as on the Codepen? (Besides replacing the path id!)

For this you need to change your SVG

Your shapes is drawn with double paths:

Sample Image

You need to redraw the shape using single paths and make the line thicker (stroke-width ="6")

Sample Image

This is how it looks in the end:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8">
<g fill="none" stroke="#949BA5" stroke-width="6" stroke-linecap="round">
   <!-- Length = 337px -->
<path id="horizont"  d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3"/> 
  
<path id="vert1" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" />
<path id="vert2" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6" />
<path id="sign" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" />
<path id="dot" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" />
</g>
</svg>

How can I make svg animation like gif?

Need to use svg path fill animation using CSS like

.line {
  stroke-dasharray: 280 280;
  stroke-dashoffset: 280;
  animation-duration: 2s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 280;
  }

  to {
    stroke-dashoffset: 0;
  }
}

<svg>
  <path class="line" d="M 10,75 L 290,75" stroke="green" stroke-width="50"/>
</svg>

How to Animate Handwriting Text on the Web Page Using Svg