I want to write my name out in cursive SVG
So far I've gotten it partially working. But i want it to go from being blank to writing out my name. So far it just rewrites overtop of it. Also, is there a way to change the font family?
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>practice</title> <script type="text/javascript" src="script.js"> </script> <link href="test.scss" rel="stylesheet" /> <link href="svg.css" rel="stylesheet" /> </head> <body> <svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8 s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41 C46.039,146.545,53.039,128.545,66.039,133.545z" /> <text class="path" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="65" id="svg_1" y="330" x="528" stroke-width="2" stroke="#000000" fill="#000000">joshua</text> </svg> </body> </html> CSS
.path { stroke-dasharray: 1000; stroke-dashoffset: 1000; -webkit-animation: dash 2s linear alternate infinite; } @-webkit-keyframes dash { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }