Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rybesh/524aabcd5ea7e342e9a5 to your computer and use it in GitHub Desktop.
Save rybesh/524aabcd5ea7e342e9a5 to your computer and use it in GitHub Desktop.
<div class="container fluid">
<div class="row">
<h1>SVG/CSS: Clever method to simulate path drawing</h1>
<div class="span8"><blockquote>This method to simulate I discovered reading a blog post by <a href="https://twitter.com/jaffathecake">Jake Archibald</a>. I read his blog post: <a href="http://jakearchibald.com/2013/animated-line-drawing-svg/">Animated line drawing in SVG</a> (also: <a href="http://bl.ocks.org/mbostock/5649592">
Stroke Dash Interpolation</a>, and a practical use of this effect: <a href="http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html?_r=0">Among the Oscar Contenders, a Host of Connections</a>)
where he describes this clever technique. In short it uses animated dash patterns to simulate that the path is drawn. Here are some letters drawn as <strong>you hover over them</strong>. <code><time>2014/11/19</time></code>Take a look at <a href="http://maxwellito.github.io/vivus/">vivus.js</a></blockquote></div>
<div class="span4"><h3>Hover over each letter to see the cute effect.</h3></div>
</div>
<div class="row"><div class="span12">
<svg class="squiggle-animated"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="960"
height="600"
id="svg2"
version="1.1"
inkscape:version="0.48.2 r9819"
sodipodi:docname="chars.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="0.49497475"
inkscape:cx="-122.49471"
inkscape:cy="531.69974"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1803"
inkscape:window-height="843"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-452.36181)">
<path
inkscape:connector-curvature="0"
id="path3030"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Verdana;-inkscape-font-specification:Verdana Bold"
d="m 101.78593,556.02037 0,-16.45313 c -3.421931,0.28129 -7.125052,0.67973 -11.109375,1.19532 -3.984419,0.46878 -7.007854,1.03128 -9.070312,1.6875 -2.531287,0.7969 -4.476598,1.96878 -5.835938,3.51562 -1.312532,1.50003 -1.968781,3.49222 -1.96875,5.97657 -3.1e-5,1.64064 0.140593,2.97658 0.421875,4.00781 0.281218,1.03127 0.984342,2.01564 2.109375,2.95312 1.07809,0.93752 2.367151,1.64064 3.867188,2.10938 1.49996,0.42189 3.843708,0.63283 7.03125,0.63281 2.531202,2e-5 5.085887,-0.51561 7.664062,-1.54687 2.624945,-1.03124 4.921818,-2.39061 6.890625,-4.07813 m 0,12.23438 c -1.35943,1.03125 -3.046931,2.27344 -5.0625,3.72656 -2.015677,1.45313 -3.914113,2.60156 -5.695312,3.44531 -2.484422,1.125 -5.062544,1.94531 -7.734375,2.46094 -2.671914,0.5625 -5.601598,0.84375 -8.789063,0.84375 -7.500025,0 -13.781268,-2.32031 -18.84375,-6.96094 -5.062508,-4.64061 -7.593756,-10.5703 -7.59375,-17.78906 -6e-6,-5.7656 1.289056,-10.47653 3.867188,-14.13282 2.578112,-3.65621 6.234359,-6.53902 10.96875,-8.64843 4.687474,-2.10933 10.499969,-3.60933 17.4375,-4.5 6.937455,-0.89058 14.13276,-1.54683 21.585932,-1.96875 l 0,-0.42188 c -6e-5,-4.35932 -1.7813,-7.35931 -5.343745,-9 -3.562551,-1.68744 -8.812545,-2.53119 -15.75,-2.53125 -4.171909,6e-5 -8.62503,0.75006 -13.359375,2.25 -4.734395,1.45319 -8.132829,2.57818 -10.195312,3.375 l -2.320313,0 0,-19.05469 c 2.67186,-0.70304 7.007793,-1.52336 13.007813,-2.46093 6.046843,-0.9843 12.093712,-1.47649 18.140625,-1.47657 14.390567,8e-5 24.773367,2.22664 31.148437,6.67969 6.4218,4.40632 9.63273,11.34381 9.63282,20.8125 l 0,53.71875 -25.10157,0 0,-8.36718" />
<path
inkscape:connector-curvature="0"
id="path3032"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Utopia;-inkscape-font-specification:Utopia Bold"
d="m 217.19377,470.63793 -1.008,-0.864 -29.232,3.888 0,5.184 5.04,0.864 c 2.304,0.432 3.456,1.72801 3.456,7.488 l 0,88.56 4.608,2.592 7.776,-4.896 c 5.18399,2.736 12.09601,4.896 21.456,4.896 20.59198,0 37.728,-6.91203 37.728,-39.456 0,-23.47198 -12.52802,-34.56 -26.928,-34.56 -9.07199,0 -16.12801,4.75201 -22.896,9.936 l 0,-43.632 m 0,61.056 c 0,-3.024 0.144,-6.048 0.864,-8.064 1.872,-4.89599 5.18401,-8.208 11.664,-8.208 7.05599,0 14.4,3.60002 14.4,27.072 0,18.14398 -3.74401,29.232 -14.544,29.232 -7.05599,0 -10.8,-3.888 -11.808,-9.216 -0.432,-2.15999 -0.576,-5.328 -0.576,-8.064 l 0,-22.752" />
<path
inkscape:connector-curvature="0"
id="path3034"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Tw Cen MT;-inkscape-font-specification:Tw Cen MT Bold"
d="m 374.40436,555.73912 0,18 c -6.18754,2.76563 -11.32035,4.14844 -15.39844,4.14844 -9.09377,0 -16.68752,-3 -22.78125,-9 -6.09375,-5.99999 -9.14063,-13.49998 -9.14062,-22.5 -10e-6,-9.04684 2.81249,-16.54683 8.4375,-22.5 5.67186,-5.95307 12.84372,-8.92963 21.51562,-8.92969 6.04684,6e-5 11.90621,1.40631 17.57813,4.21875 l 0,17.01562 c -5.25005,-2.5312 -10.05473,-3.79683 -14.41406,-3.79687 -4.03129,4e-5 -7.2891,1.24223 -9.77344,3.72656 -2.43753,2.43754 -3.65628,5.67191 -3.65625,9.70313 -3e-5,3.9844 1.21872,7.21877 3.65625,9.70312 2.43747,2.43752 5.6484,3.65627 9.63281,3.65625 3.60934,2e-5 8.39058,-1.14842 14.34375,-3.44531" />
<path
inkscape:connector-curvature="0"
id="path3036"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Trebuchet MS;-inkscape-font-specification:Trebuchet MS Bold"
d="m 486.64252,576.62193 0,-4.57031 c -1.45318,1.59375 -3.91412,3 -7.38281,4.21875 -3.4688,1.17187 -7.05473,1.75781 -10.75782,1.75781 -10.50002,0 -18.77345,-3.32812 -24.82031,-9.98437 -6.00001,-6.65624 -9,-15.93748 -9,-27.84375 0,-11.90621 3.4453,-21.58588 10.33594,-29.03907 6.93748,-7.49992 15.60934,-11.24992 26.01562,-11.25 5.71871,8e-5 10.92183,1.17195 15.60938,3.51563 l 0,-30.16406 17.57812,-4.21875 0,107.57812 -17.57812,0 m 0,-57.30469 c -3.75005,-2.99994 -7.66411,-4.49994 -11.74219,-4.5 -7.03129,6e-5 -12.44534,2.15631 -16.24219,6.46875 -3.7969,4.26568 -5.69533,10.4063 -5.69531,18.42188 -2e-5,15.65627 7.54685,23.48439 22.64063,23.48438 1.68745,1e-5 3.74995,-0.49218 6.1875,-1.47657 2.48432,-1.03123 4.1015,-2.06248 4.85156,-3.09375 l 0,-39.30469" />
<path
inkscape:connector-curvature="0"
id="path3038"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Sans;-inkscape-font-specification:Terminal Bold"
d="m 648.80252,537.03599 0,7.17188 -58.85156,0 c 0.60934,5.90627 2.74215,10.33596 6.39844,13.28906 3.65621,2.95314 8.76558,4.42971 15.32812,4.42969 5.29682,2e-5 10.71088,-0.77342 16.24219,-2.32031 5.57805,-1.59373 11.2968,-3.98436 17.15625,-7.17188 l 0,19.40625 c -5.9532,2.25001 -11.90632,3.9375 -17.85937,5.0625 -5.95319,1.17188 -11.90631,1.75781 -17.85938,1.75782 -14.25004,-10e-6 -25.33596,-3.60938 -33.25781,-10.82813 -7.87501,-7.26561 -11.81251,-17.43748 -11.8125,-30.51563 -10e-6,-12.84369 3.86718,-22.94525 11.60156,-30.30468 7.78123,-7.3593 18.46872,-11.03899 32.0625,-11.03907 12.37494,8e-5 22.26555,3.72664 29.67188,11.17969 7.45303,7.45319 11.17959,17.41412 11.17968,29.88281 m -25.875,-8.36718 c -6e-5,-4.7812 -1.40631,-8.62495 -4.21875,-11.53125 -2.76568,-2.95307 -6.39849,-4.42963 -10.89843,-4.42969 -4.87505,6e-5 -8.83598,1.38287 -11.88282,4.14844 -3.04691,2.7188 -4.94534,6.6563 -5.69531,11.8125 l 32.69531,0" />
<path
inkscape:connector-curvature="0"
id="path3040"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Telugu Sangam MN;-inkscape-font-specification:Telugu Sangam MN Bold"
d="m 721.44986,499.46825 0,-16.21895 c -2e-5,-2.32412 0.42946,-4.47148 1.28842,-6.44211 0.85893,-1.97042 2.07156,-3.66305 3.63789,-5.07789 1.61682,-1.46516 3.56209,-2.602 5.83579,-3.41053 2.32419,-0.80831 4.92629,-1.21252 7.80632,-1.21263 1.56628,1.1e-4 3.43575,0.35379 5.60842,1.06105 2.17259,0.65695 4.31996,1.61695 6.44211,2.88 l 0,12.58106 c -2.42531,-1.01044 -4.39584,-1.79359 -5.91158,-2.34948 -1.46531,-0.55569 -2.32425,-0.83359 -2.57684,-0.83368 -1.61688,9e-5 -2.93057,0.37904 -3.94106,1.13684 -1.01056,0.75799 -1.51582,1.99588 -1.51579,3.71368 l 0,14.17264 12.96,0 0,13.18736 -12.96,0 0,63.96632 -16.67368,0 0,-63.96632 -12.58105,0 0,-13.18736 12.58105,0" />
<path
inkscape:connector-curvature="0"
id="path3042"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Telugu MN;-inkscape-font-specification:Telugu MN Bold"
d="m 272.71562,625.5531 0,7.45313 -13.00781,0 c 1.12493,1.7813 2.03899,3.67974 2.74219,5.69531 0.74992,2.01568 1.12492,4.2188 1.125,6.60937 -8e-5,3.93755 -0.89071,7.45317 -2.67188,10.54688 -1.78132,3.09378 -4.28913,5.69534 -7.52344,7.80469 -3.23443,2.1094 -7.10162,3.72658 -11.60156,4.85156 -4.45317,1.12502 -9.37504,1.68752 -14.76562,1.6875 -1.54692,2e-5 -3.1641,-0.0937 -4.85157,-0.28125 -1.68753,-0.23435 -3.21097,-0.46873 -4.57031,-0.70313 -0.93753,0.70315 -1.68753,1.57034 -2.25,2.60157 -0.51565,1.03127 -0.77346,2.13283 -0.77344,3.30468 -2e-5,0.37502 0.0937,0.72658 0.28125,1.05469 0.23435,0.28127 0.7031,0.56252 1.40625,0.84375 0.74997,0.28127 1.8281,0.53908 3.23438,0.77344 1.45309,0.23439 3.3984,0.46876 5.83594,0.70312 2.43746,0.18752 5.46089,0.39846 9.07031,0.63282 3.6562,0.18751 8.03901,0.37501 13.14844,0.5625 4.73431,0.18751 8.69524,0.6797 11.88281,1.47656 3.2343,0.79688 5.83586,1.87501 7.80469,3.23437 1.96866,1.35939 3.37491,2.95313 4.21875,4.78125 0.84366,1.82813 1.26554,3.86719 1.26562,6.11719 -8e-5,3.93749 -1.05477,7.49999 -3.16406,10.6875 -2.10946,3.23436 -5.15633,5.97654 -9.14063,8.22656 -3.98444,2.29686 -8.836,4.05467 -14.55468,5.27344 -5.67193,1.21872 -12.11724,1.8281 -19.33594,1.82813 -12.89065,-3e-5 -22.59377,-1.31253 -29.10938,-3.9375 -6.46875,-2.62503 -9.70312,-6.09377 -9.70312,-10.40625 0,-1.59377 0.44531,-3.16408 1.33594,-4.71094 0.93749,-1.54688 2.15624,-3.07032 3.65625,-4.57031 1.49999,-1.50001 3.18749,-3.00001 5.0625,-4.5 1.87498,-1.45313 3.77342,-2.88281 5.69531,-4.28907 -2.71876,-0.93749 -4.92189,-2.08593 -6.60938,-3.44531 -1.64063,-1.40624 -2.46094,-2.99999 -2.46093,-4.78125 -10e-6,-1.21874 0.37499,-2.48436 1.125,-3.79687 0.74999,-1.35936 1.78124,-2.67186 3.09375,-3.9375 1.31248,-1.26561 2.81248,-2.46092 4.5,-3.58594 1.73435,-1.17185 3.58591,-2.2031 5.55468,-3.09375 -2.34377,-1.03122 -4.45314,-2.17966 -6.32812,-3.44531 -1.82814,-1.31247 -3.39845,-2.7656 -4.71094,-4.35938 -1.26563,-1.64059 -2.25001,-3.46871 -2.95312,-5.48437 -0.70314,-2.06246 -1.0547,-4.35933 -1.05469,-6.89063 -1e-5,-4.0312 0.89062,-7.61713 2.67187,-10.75781 1.78124,-3.14057 4.24218,-5.76556 7.38282,-7.875 3.1406,-2.15618 6.82028,-3.79681 11.03906,-4.92188 4.26559,-1.12492 8.85934,-1.68742 13.78125,-1.6875 2.3437,8e-5 4.64058,0.1407 6.89062,0.42188 2.29683,0.23445 4.42964,0.56257 6.39844,0.98437 1.96869,0.42195 3.7265,0.91414 5.27344,1.47657 1.59369,0.56256 2.85931,1.17194 3.79687,1.82812 l 21.86719,0 m -27.77344,67.07813 c -3.18755,0 -6.39849,-0.0703 -9.63281,-0.21094 -3.18754,-0.0937 -6.23442,-0.23438 -9.14062,-0.42188 -2.85942,-0.14062 -5.46098,-0.30468 -7.80469,-0.49218 -2.34378,-0.1875 -4.24222,-0.375 -5.69531,-0.5625 -1.50003,1.21875 -2.6719,2.71875 -3.51563,4.5 -0.84377,1.78124 -1.26565,3.53905 -1.26562,5.27343 -3e-5,1.31249 0.49216,2.57812 1.47656,3.79688 1.03122,1.21874 2.55466,2.27342 4.57031,3.16406 2.06247,0.93749 4.59372,1.68748 7.59375,2.25 2.99996,0.56248 6.51558,0.84373 10.54688,0.84375 4.35932,-2e-5 8.24994,-0.32814 11.67187,-0.98437 3.46869,-0.6094 6.39838,-1.42971 8.78906,-2.46094 2.39056,-1.03126 4.21868,-2.1797 5.48438,-3.44531 1.26555,-1.26564 1.89836,-2.53126 1.89844,-3.79688 -8e-5,-1.3125 -0.35164,-2.4375 -1.05469,-3.375 -0.7032,-0.9375 -1.71101,-1.71094 -3.02344,-2.32031 -1.31257,-0.60938 -2.88288,-1.05469 -4.71094,-1.33594 -1.82818,-0.28125 -3.89068,-0.42187 -6.1875,-0.42187 m -15.46875,-28.05469 c 1.59371,3e-5 3.11715,-0.44528 4.57032,-1.33594 1.49995,-0.89059 2.81245,-2.06247 3.9375,-3.51562 1.17182,-1.49997 2.08588,-3.2109 2.74218,-5.13282 0.70307,-1.96871 1.05464,-3.98433 1.05469,-6.04687 -5e-5,-3.04683 -0.39849,-5.9062 -1.19531,-8.57813 -0.79693,-2.71869 -1.87505,-5.06244 -3.23438,-7.03125 -1.31255,-2.01556 -2.88286,-3.60931 -4.71093,-4.78125 -1.82817,-1.17181 -3.75005,-1.75774 -5.76563,-1.75781 -1.92191,7e-5 -3.58597,0.46882 -4.99219,1.40625 -1.35941,0.89069 -2.4844,2.13288 -3.375,3.72656 -0.89065,1.54694 -1.5469,3.37506 -1.96875,5.48438 -0.4219,2.06255 -0.63284,4.26568 -0.63281,6.60937 -3e-5,2.81255 0.3281,5.48442 0.98438,8.01563 0.65621,2.53129 1.57028,4.75785 2.74218,6.67969 1.17184,1.9219 2.57809,3.44534 4.21875,4.57031 1.68746,1.12503 3.56246,1.68753 5.625,1.6875" />
<path
inkscape:connector-curvature="0"
id="path3044"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Tamil Sangam MN;-inkscape-font-specification:Tamil Sangam MN Bold"
d="m 333.13288,593.72348 0,30.528 c 2.59197,-1.91993 5.47197,-3.26393 8.64,-4.032 3.16796,-0.86393 6.43196,-1.29593 9.792,-1.296 3.64795,7e-5 6.95995,0.57607 9.936,1.728 3.07195,1.15207 5.71194,2.73607 7.92,4.752 2.20794,2.01606 3.93594,4.41606 5.184,7.2 1.24793,2.78405 1.87193,5.76005 1.872,8.928 l 0,50.256 -16.416,0 0,-48.528 c -5e-5,-3.74395 -1.10405,-6.38395 -3.312,-7.92 -2.20804,-1.53594 -4.70404,-2.30394 -7.488,-2.304 -1.92004,6e-5 -3.84004,0.43206 -5.76,1.296 -1.92003,0.76805 -3.64803,1.87205 -5.184,3.312 -1.53603,1.44005 -2.78403,3.12005 -3.744,5.04 -0.96002,1.92004 -1.44002,3.98404 -1.44,6.192 l 0,42.912 -16.56,0 0,-98.064 16.56,0" />
<path
inkscape:connector-curvature="0"
id="path3046"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Tamil MN;-inkscape-font-specification:Tamil MN Bold"
d="m 421.31851,620.42029 22.85156,-6.32813 0,77.69532 -22.85156,0 0,-71.36719 m -0.98437,-28.19531 c -10e-6,-1.54678 0.30467,-2.9999 0.91406,-4.35938 0.65624,-1.35927 1.54686,-2.53114 2.67187,-3.51562 1.12499,-1.03114 2.43749,-1.82802 3.9375,-2.39063 1.49999,-0.60926 3.09373,-0.91395 4.78125,-0.91406 1.68748,1.1e-4 3.28123,0.3048 4.78125,0.91406 1.49998,0.56261 2.81247,1.35949 3.9375,2.39063 1.12497,0.98448 2.0156,2.15635 2.67188,3.51562 0.65622,1.35948 0.98434,2.8126 0.98437,4.35938 -3e-5,1.54697 -0.32815,3.00009 -0.98437,4.35937 -0.65628,1.35947 -1.54691,2.53135 -2.67188,3.51563 -1.12503,0.98446 -2.43752,1.78134 -3.9375,2.39062 -1.50002,0.56259 -3.09377,0.84384 -4.78125,0.84375 -1.68752,9e-5 -3.28126,-0.28116 -4.78125,-0.84375 -1.50001,-0.60928 -2.81251,-1.40616 -3.9375,-2.39062 -1.12501,-0.98428 -2.01563,-2.15616 -2.67187,-3.51563 -0.60939,-1.35928 -0.91407,-2.8124 -0.91406,-4.35937" />
<path
inkscape:connector-curvature="0"
id="path3048"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Tahoma;-inkscape-font-specification:Tahoma Bold"
d="m 537.59763,693.19373 c -4e-5,8.90624 -2.64848,15.84373 -7.94531,20.8125 -5.29691,5.0156 -12.14065,7.52341 -20.53125,7.52343 -4.50001,-2e-5 -8.57813,-0.21096 -12.23438,-0.63281 -3.65624,-0.37503 -6.32812,-0.77346 -8.01562,-1.19531 l 0,-18.14063 1.89844,0 c 1.59375,0.51562 3.35156,0.91406 5.27343,1.19532 1.96875,0.32811 3.53906,0.49217 4.71094,0.49218 4.73437,-1e-5 7.9453,-1.45313 9.63281,-4.35937 1.73436,-2.90625 2.60155,-7.6875 2.60157,-14.34375 l 0,-54.5625 -14.20313,0 0,-17.15625 38.8125,0 0,80.36719 m 0,-91.61719 -26.22656,0 0,-19.19531 26.22656,0 0,19.19531" />
<path
inkscape:connector-curvature="0"
id="path3050"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Skia;-inkscape-font-specification:Skia Bold"
d="m 592.56424,691.78748 -11.10937,0 c 0.0469,-0.84375 0.0937,-7.17187 0.14062,-18.98438 0.0937,-11.81247 0.14061,-23.9062 0.14063,-36.28125 -2e-5,-5.29681 -0.0234,-11.97649 -0.0703,-20.03906 -1e-5,-8.06242 -0.0703,-17.32022 -0.21093,-27.77344 l 11.10937,0 c -0.14065,8.29697 -0.2344,17.92978 -0.28125,28.89844 -2e-5,10.96881 -2e-5,17.48443 0,19.54687 -2e-5,4.82818 0.0469,14.95317 0.14063,30.375 0.0937,15.37501 0.1406,23.46094 0.14062,24.25782 m 50.34375,-1.40625 -6.67969,6.11718 c -10.35943,-10.54686 -19.61723,-19.73436 -27.77343,-27.5625 -8.10941,-7.82809 -12.58597,-12.14059 -13.42969,-12.9375 l 0,-0.14062 c 1.12497,-1.03121 6.04684,-5.99996 14.76562,-14.90625 8.7187,-8.95307 15.77338,-16.289 21.16407,-22.00781 l 6.82031,7.03125 c -5.57819,5.39068 -11.43756,11.08599 -17.57813,17.08593 -6.09379,5.95317 -9.9141,9.67973 -11.46093,11.17969 l 0,0.0703 c -4e-5,4e-5 3.42183,3.60941 10.26562,10.82813 6.89057,7.21877 14.85931,15.63282 23.90625,25.24219" />
<path
inkscape:connector-curvature="0"
id="path3052"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Silom;-inkscape-font-specification:Silom Bold"
d="m 686.76523,691.78748 0,-108 24.048,0 0,108 -24.048,0" />
<path
inkscape:connector-curvature="0"
id="path3054"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-width:1.27035034;stroke-opacity:1;font-family:Serto Mardin;-inkscape-font-specification:Serto Mardin Bold"
d="m 895.93359,687.97111 c -1.5e-4,2.50101 -1.66748,3.7515 -5.002,3.7515 l -20.18667,0 c -3.33478,0 -5.00211,-1.25049 -5.002,-3.7515 -1.1e-4,-2.56055 1.66722,-3.84082 5.002,-3.84082 l 6.34183,0 -0.0893,-36.71114 c -1.4e-4,-5.83562 -2.14386,-10.51011 -6.43115,-14.02348 -3.98981,-3.27506 -8.96204,-4.91262 -14.91669,-4.91268 -9.46819,6e-5 -18.43011,4.67455 -26.88577,14.02347 0.2381,1.19101 0.35719,2.41174 0.35728,3.66218 l 0.0893,37.96165 6.34183,0 c 3.33457,0 5.0019,1.28027 5.002,3.84082 -10e-5,2.50101 -1.66743,3.7515 -5.002,3.7515 l -20.18667,0 c -3.33473,0 -5.00207,-1.25049 -5.002,-3.7515 -7e-5,-2.56055 1.66727,-3.84082 5.002,-3.84082 l 6.34183,0 -0.0893,-36.71114 c -8e-5,-5.83562 -2.1438,-10.51011 -6.43115,-14.02348 -3.98977,-3.27506 -8.96199,-4.91262 -14.9167,-4.91268 -6.4312,6e-5 -11.61184,1.69717 -15.54193,5.09132 -0.47644,0.41689 -4.16838,4.67455 -11.07587,12.77298 l 0.0893,37.783 6.34183,0 c 3.33461,0 5.00195,1.28027 5.002,3.84082 -5e-5,2.50101 -1.66739,3.7515 -5.002,3.7515 l -20.18667,0 c -3.33468,0 -5.00202,-1.25049 -5.00201,-3.7515 -10e-6,-2.56055 1.66733,-3.84082 5.00201,-3.84082 l 6.34183,0 -0.0893,-52.96766 -6.34183,0 c -3.33468,6e-5 -5.00201,-1.28021 -5.002,-3.84082 -10e-6,-2.50094 1.66732,-3.75143 5.002,-3.75151 l 13.84484,0 0,11.34384 c 5.59744,-5.65697 9.43826,-9.1405 11.52247,-10.45062 3.87055,-2.38184 8.9321,-3.57279 15.18465,-3.57286 11.55218,7e-5 20.03772,4.55547 25.45664,13.66619 9.1107,-9.11072 19.08492,-13.66612 29.92269,-13.66619 7.62199,7e-5 14.23178,2.26288 19.82938,6.78844 5.95463,4.82342 8.93202,10.9866 8.93215,18.48954 l 0.0893,37.96165 6.34183,0 c 3.33452,0 5.00185,1.28027 5.002,3.84082" />
<path
inkscape:connector-curvature="0"
id="path3056"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:STSong;-inkscape-font-specification:STSong Bold"
d="m 199.02831,795.50231 c -9.98406,-0.57599 -19.96805,-0.57599 -29.952,0 l 0,-2.304 7.92,-1.152 c 2.11195,-0.28799 3.16795,-2.15999 3.168,-5.616 l 0,-24.336 c -5e-5,-5.37596 -0.91205,-9.69595 -2.736,-12.96 -1.82405,-3.26394 -5.37605,-4.89594 -10.656,-4.896 -6.14404,6e-5 -12.14403,2.92805 -18,8.784 l 0,34.992 c -2e-5,1.53601 1.15197,2.59201 3.456,3.168 l 8.496,2.016 0,2.304 c -1.34403,-0.096 -2.92803,-0.19199 -4.752,-0.288 -1.82403,-0.096 -3.84003,-0.14399 -6.048,-0.144 l -4.752,0 c -6.81601,1e-5 -12.00001,0.14401 -15.552,0.432 l 0,-2.304 7.632,-1.44 c 1.91999,-0.28799 2.87999,-1.72799 2.88,-4.32 l 0,-28.512 c -1e-5,-2.97595 -0.62401,-4.99195 -1.872,-6.048 -1.15201,-1.05595 -3.26401,-1.82395 -6.336,-2.304 l 0,-2.592 c 6.04799,-1.43995 10.89598,-5.75994 14.544,-12.96 l 2.304,0 0,12.96 c 3.64797,-3.16794 7.67997,-5.66394 12.096,-7.488 4.41596,-1.91994 8.30396,-2.87994 11.664,-2.88 11.03994,6e-5 16.55994,6.57606 16.56,19.728 l 0,28.656 c -6e-5,1.82401 0.23994,3.21601 0.72,4.176 0.47994,0.96001 1.43993,1.58401 2.88,1.872 l 6.336,1.152 0,2.304" />
<path
inkscape:connector-curvature="0"
id="path3058"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Sathu;-inkscape-font-specification:Sathu Bold"
d="m 300.92676,805.85787 c -10.24807,0 -18.98903,-3.46624 -26.22292,-10.39874 -7.23392,-6.93248 -10.85087,-17.29354 -10.85086,-31.0832 -10e-6,-13.63888 3.61694,-23.92459 10.85086,-30.85715 7.23389,-7.00777 15.97485,-10.51169 26.22292,-10.51177 10.24799,8e-5 18.98895,3.504 26.22292,10.51177 7.23383,6.93256 10.85079,17.21827 10.85087,30.85715 -8e-5,13.78966 -3.61704,24.15072 -10.85087,31.0832 -7.23397,6.9325 -15.97493,10.39874 -26.22292,10.39874 m 0,-10.85086 c 7.08315,10e-6 12.73464,-2.78806 16.95448,-8.36421 4.29507,-5.65147 6.44263,-13.07375 6.4427,-22.26687 -7e-5,-9.11769 -2.14763,-16.46462 -6.4427,-22.04082 -4.21984,-5.65142 -9.87133,-8.47717 -16.95448,-8.47724 -7.08324,7e-5 -12.7724,2.82582 -17.0675,8.47724 -4.2198,5.5762 -6.32969,12.92313 -6.32967,22.04082 -2e-5,9.19312 2.10987,16.6154 6.32967,22.26687 4.2951,5.57615 9.98426,8.36422 17.0675,8.36421" />
<path
inkscape:connector-curvature="0"
id="path3060"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Serto Mardin;-inkscape-font-specification:Serto Mardin Bold"
d="m 471.80179,776.49937 c -8e-5,8.20314 -2.90633,15.16407 -8.71875,20.88281 -5.76569,5.71875 -12.7735,8.57813 -21.02344,8.57813 -10.17191,0 -18.28128,-4.14844 -24.32813,-12.44532 l -0.0703,38.46094 c 3.8906,-3e-5 5.69528,-0.0235 5.41406,-0.0703 2.34372,0.28122 3.5156,1.28903 3.51563,3.02344 -3e-5,1.96871 -1.31253,2.95309 -3.9375,2.95312 l -15.82031,0 c -2.67189,-3e-5 -4.00783,-0.98441 -4.00782,-2.95312 -10e-6,-1.73441 1.17187,-2.74222 3.51563,-3.02344 -0.28126,0.0469 1.52342,0.0703 5.41406,0.0703 l 0,-75.86719 -4.99219,0 c -2.62501,5e-5 -3.93751,-1.00776 -3.9375,-3.02343 -10e-6,-1.9687 1.31249,-2.95307 3.9375,-2.95313 l 10.89844,0 0,9.35156 c 6.04685,-8.34369 14.17965,-12.51556 24.39844,-12.51562 8.24994,6e-5 15.25775,2.85943 21.02344,8.57812 5.81242,5.7188 8.71867,12.70317 8.71875,20.95313 m -5.34375,0 c -8e-5,-6.74997 -2.3907,-12.44527 -7.17188,-17.08594 -4.73444,-4.68745 -10.50005,-7.0312 -17.29687,-7.03125 -6.75005,5e-5 -12.51567,2.3438 -17.29688,7.03125 -4.7344,4.64067 -7.10159,10.33597 -7.10156,17.08594 -3e-5,6.70315 2.3906,12.39845 7.17187,17.08594 4.78122,4.6875 10.5234,7.03125 17.22657,7.03125 6.74994,0 12.51556,-2.32031 17.29687,-6.96094 4.78118,-4.68749 7.1718,-10.40623 7.17188,-17.15625" />
<path
inkscape:connector-curvature="0"
id="path3062"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Sinhala Sangam MN;-inkscape-font-specification:Sinhala Sangam MN Bold"
d="m 593.17047,764.35031 c -6e-5,-4.22396 -0.54406,-8.15996 -1.632,-11.808 -1.08806,-3.71195 -2.62406,-6.91194 -4.608,-9.6 -1.98406,-2.75194 -4.38405,-4.92794 -7.2,-6.528 -2.81605,-1.59993 -5.92004,-2.39993 -9.312,-2.4 -3.39204,7e-5 -6.46403,0.80007 -9.216,2.4 -2.75203,1.60006 -5.12003,3.77606 -7.104,6.528 -1.92002,2.68806 -3.42402,5.88805 -4.512,9.6 -1.02402,3.64804 -1.53602,7.58404 -1.536,11.808 -2e-5,4.22403 0.51198,8.19203 1.536,11.904 1.08798,3.71202 2.59198,6.94402 4.512,9.696 1.98397,2.75201 4.35197,4.92801 7.104,6.528 2.75197,1.60001 5.82396,2.40001 9.216,2.4 3.32796,10e-6 6.36795,-0.76799 9.12,-2.304 2.75195,-1.53599 5.11994,-3.61599 7.104,-6.24 2.04794,-2.62398 3.61594,-5.72798 4.704,-9.312 1.15194,-3.58397 1.75994,-7.39197 1.824,-11.424 l 0,-1.248 m 11.712,71.424 -11.712,0 0,-43.872 c -1.40806,2.17601 -3.04006,4.09601 -4.896,5.76 -1.85606,1.6 -3.84006,2.976 -5.952,4.128 -2.04805,1.088 -4.19205,1.888 -6.432,2.4 -2.17604,0.576 -4.25604,0.864 -6.24,0.864 -5.31204,0 -10.01603,-1.056 -14.112,-3.168 -4.09602,-2.112 -7.55202,-4.992 -10.368,-8.64 -2.81601,-3.71199 -4.96001,-8.03198 -6.432,-12.96 -1.40801,-4.99197 -2.11201,-10.30397 -2.112,-15.936 -1e-5,-5.63196 0.73599,-10.91195 2.208,-15.84 1.47199,-4.92794 3.61599,-9.21594 6.432,-12.864 2.87998,-3.64793 6.36798,-6.52793 10.464,-8.64 4.15997,-2.11192 8.89596,-3.16792 14.208,-3.168 2.04796,8e-5 4.15996,0.28808 6.336,0.864 2.17595,0.57608 4.28795,1.44007 6.336,2.592 2.04794,1.15207 3.96794,2.59207 5.76,4.32 1.85594,1.66407 3.45594,3.58407 4.8,5.76 l 0,-11.808 11.712,0 0,110.208" />
<path
inkscape:connector-curvature="0"
id="path3064"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Skia;-inkscape-font-specification:Skia Bold"
d="m 710.83991,740.85093 c -2.57818,0.60944 -6.53911,1.8985 -11.88281,3.86719 -5.29691,1.96881 -11.4141,4.5938 -18.35157,7.875 -2e-5,0.51568 -0.0235,2.88286 -0.0703,7.10156 -0.0469,4.17192 -0.0703,8.06254 -0.0703,11.67188 -2e-5,5.53127 0.0468,12.09377 0.14062,19.6875 0.14061,7.59375 0.21092,11.8125 0.21094,12.65625 l -11.10937,0 c -2e-5,-0.79688 0.0469,-3.42187 0.14062,-7.875 0.0937,-4.45312 0.14061,-12.0703 0.14063,-22.85157 -2e-5,-4.35934 -0.0235,-10.45308 -0.0703,-18.28125 -0.0469,-7.82806 -0.1172,-15.21087 -0.21093,-22.14843 l 10.89843,0 0,10.6875 0.0703,0.0703 c 5.29684,-2.99994 10.5234,-5.6015 15.67968,-7.80469 5.15621,-2.20305 9.28121,-3.70305 12.375,-4.5 l 2.10938,9.84375" />
<path
inkscape:connector-curvature="0"
id="path3066"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Telugu Sangam MN;-inkscape-font-specification:Telugu Sangam MN"
d="m 787.4878,779.83662 c 0.0505,2.8295 0.53051,5.2295 1.44,7.2 0.95998,1.97054 2.22313,3.56212 3.78948,4.77474 1.56628,1.21264 3.41049,2.09685 5.53263,2.65263 2.17259,0.5558 4.52207,0.83369 7.04842,0.83369 2.07154,0 4.2189,-0.17684 6.4421,-0.53053 2.27364,-0.4042 4.34522,-1.06104 6.21474,-1.97053 1.91995,-0.90946 3.48626,-2.14735 4.69895,-3.71368 1.2631,-1.5663 1.89468,-3.56209 1.89473,-5.98737 -5e-5,-2.17261 -0.6569,-4.04208 -1.97052,-5.60842 -1.31374,-1.56629 -3.0569,-2.9305 -5.22948,-4.09263 -2.17268,-1.2126 -4.64846,-2.27365 -7.42736,-3.18316 -2.72847,-0.95997 -5.53267,-1.94523 -8.41264,-2.95579 -2.88003,-1.06101 -5.7095,-2.19786 -8.48842,-3.41053 -2.72844,-1.21259 -5.17897,-2.65258 -7.35158,-4.32 -2.17264,-1.71784 -3.9158,-3.71363 -5.22947,-5.98736 -1.3137,-2.32416 -1.97054,-5.10311 -1.97053,-8.33685 -10e-6,-3.3852 0.73262,-6.34098 2.1979,-8.86736 1.51577,-2.52625 3.51156,-4.59783 5.98737,-6.21474 2.47576,-1.66729 5.3305,-2.90519 8.56421,-3.71369 3.23365,-0.80834 6.59365,-1.21255 10.08,-1.21263 3.94101,8e-5 7.60416,0.42955 10.98947,1.28842 3.43574,0.8085 6.41679,2.07166 8.94316,3.78948 2.52625,1.71796 4.52204,3.91586 5.98737,6.59368 1.51572,2.62743 2.3494,5.76006 2.50105,9.3979 -0.96007,5e-5 -2.02112,-0.0252 -3.18316,-0.0758 -1.16217,-0.0505 -2.12216,-0.0757 -2.88,-0.0758 l -5.45684,0 c -0.25269,-2.07152 -0.88427,-3.78941 -1.89474,-5.15369 -0.96005,-1.41467 -2.19794,-2.52625 -3.71368,-3.33473 -1.46531,-0.85888 -3.18321,-1.4652 -5.15368,-1.81895 -1.92005,-0.35362 -3.96636,-0.53046 -6.13895,-0.53053 -5.00214,7e-5 -8.81687,0.93481 -11.44421,2.80421 -2.6274,1.81901 -3.94108,4.24428 -3.94106,7.27579 -2e-5,2.02111 0.65682,3.78953 1.97053,5.30527 1.31366,1.46531 3.05681,2.77899 5.22947,3.94105 2.1726,1.16215 4.62313,2.24847 7.35158,3.25895 2.77891,1.01057 5.60838,2.04636 8.48842,3.10736 2.93048,1.01057 5.75995,2.12215 8.48843,3.33474 2.77889,1.21267 5.25467,2.62741 7.42736,4.24421 2.17257,1.61688 3.91573,3.51161 5.22948,5.68421 1.31361,2.12213 1.97045,4.64845 1.97052,7.57895 -7e-5,4.1937 -0.83375,7.78107 -2.50105,10.7621 -1.66743,2.93054 -3.91585,5.3558 -6.74526,7.27579 -2.77901,1.86948 -6.03795,3.23369 -9.77684,4.09264 -3.739,0.85894 -7.65478,1.28842 -11.74737,1.28842 -3.94109,0 -7.68003,-0.50527 -11.21684,-1.51579 -3.53687,-1.06105 -6.64424,-2.65263 -9.32211,-4.77474 -2.67791,-2.1221 -4.82528,-4.77473 -6.4421,-7.95789 -1.61686,-3.18315 -2.50107,-6.89683 -2.65264,-11.14106 l 11.82316,0" />
<path
inkscape:connector-curvature="0"
id="path3068"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Trebuchet MS;-inkscape-font-specification:Trebuchet MS"
d="m 218.18437,858.48422 -8.71875,0 0,-14.13282 8.71875,0 0,-15.32812 17.57813,-6.46875 0,21.79687 20.67187,0 0,14.13282 -20.67187,0 0,32.97656 c -3e-5,5.39065 0.84372,9.21095 2.53125,11.46094 1.68746,2.20313 4.64058,3.3047 8.85937,3.30468 4.21871,2e-5 8.1562,-1.14842 11.8125,-3.44531 l 0,16.17188 c -4.07817,1.40624 -9.89067,2.10937 -17.4375,2.10937 -7.50003,0 -13.26565,-2.10937 -17.29687,-6.32812 -4.03127,-4.26562 -6.04689,-10.31249 -6.04688,-18.14063 l 0,-38.10937" />
<path
inkscape:connector-curvature="0"
id="path3070"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Times New Roman;-inkscape-font-specification:Times New Roman"
d="m 376.03487,853.9139 0,51.46875 c -7e-5,5.01564 0.46868,8.15626 1.40625,9.42188 0.93743,1.21875 2.83586,1.99219 5.69531,2.32031 l 0,2.53125 -26.78906,0 0,-8.78906 c -3.14067,3.75 -6.28129,6.49219 -9.42188,8.22656 -3.14066,1.6875 -6.65628,2.53125 -10.54687,2.53125 -3.70315,0 -7.00783,-1.125 -9.91406,-3.375 -2.85939,-2.29687 -4.78127,-4.96874 -5.76563,-8.01562 -0.98439,-3.04687 -1.47657,-8.36717 -1.47656,-15.96094 l 0,-26.08594 c -1e-5,-4.96869 -0.46876,-8.06244 -1.40625,-9.28125 -0.89063,-1.21869 -2.78907,-2.01556 -5.69531,-2.39062 l 0,-2.60157 26.78906,0 0,44.92969 c -3e-5,4.68752 0.21091,7.71095 0.63281,9.07031 0.46872,1.35939 1.17184,2.39064 2.10938,3.09375 0.98434,0.70314 2.10934,1.0547 3.375,1.05469 1.68746,1e-5 3.21089,-0.4453 4.57031,-1.33594 1.87496,-1.21874 4.12495,-3.67967 6.75,-7.38281 l 0,-35.15625 c -5e-5,-4.96869 -0.4688,-8.06244 -1.40625,-9.28125 -0.89067,-1.21869 -2.78911,-2.01556 -5.69531,-2.39062 l 0,-2.60157 26.78906,0" />
<path
inkscape:connector-curvature="0"
id="path3072"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Telugu MN;-inkscape-font-specification:Telugu MN Bold"
d="m 458.86192,847.44515 20.8125,44.4375 21.09375,-44.4375 14.76563,0 -35.01563,73.82813 -9.84375,0 -34.38281,-73.82813 22.57031,0" />
<path
inkscape:connector-curvature="0"
id="path3074"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Tamil Sangam MN;-inkscape-font-specification:Tamil Sangam MN Bold"
d="m 617.505,874.15209 -12.672,45.504 -15.552,0 -20.592,-71.568 16.848,0 11.664,43.92 12.24,-43.92 16.272,0 11.808,43.92 c 1.91993,-7.19997 3.93593,-14.59196 6.048,-22.176 2.11192,-7.58394 4.07992,-14.83194 5.904,-21.744 l 16.848,0 -20.448,71.568 -15.696,0 -12.672,-45.504" />
<path
inkscape:connector-curvature="0"
id="path3076"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Stencil;-inkscape-font-specification:Stencil Bold"
d="m 762.29649,835.98422 35.36718,71.92968 c 0.84367,1.64064 1.99211,2.83595 3.44532,3.58594 1.26554,0.65626 2.10929,1.26563 2.53125,1.82813 0.46866,0.5625 0.70304,1.33594 0.70312,2.32031 -8e-5,1.26563 -0.46883,2.27344 -1.40625,3.02344 -0.79696,0.65625 -2.48446,0.98437 -5.0625,0.98437 l -32.97656,0 c -2.53129,0 -4.17192,-0.16406 -4.92188,-0.49219 -1.64066,-0.70312 -2.46097,-1.89843 -2.46093,-3.58593 -4e-5,-0.60938 0.16402,-1.125 0.49218,-1.54688 0.32809,-0.46874 0.93746,-1.03124 1.82813,-1.6875 1.59371,-1.17187 2.36714,-2.24999 2.32031,-3.23437 -0.0469,-0.79687 -0.46879,-1.99218 -1.26562,-3.58594 L 726.3668,835.98422 c -0.56251,-1.1718 -1.17188,-2.08586 -1.82813,-2.74219 -0.65625,-0.70304 -1.52344,-1.33585 -2.60156,-1.89844 -0.9375,-0.46866 -1.59375,-0.98429 -1.96875,-1.54687 -0.32812,-0.56241 -0.49219,-1.33585 -0.49219,-2.32032 0,-1.40615 0.49219,-2.39053 1.47657,-2.95312 1.03124,-0.56241 2.83593,-0.84366 5.41406,-0.84375 l 32.76562,0 c 2.39059,9e-5 4.10152,0.30478 5.13282,0.91406 1.07807,0.60947 1.61714,1.59384 1.61718,2.95313 -4e-5,1.35946 -0.77348,2.55477 -2.32031,3.58593 -0.70317,0.51572 -1.19535,0.96103 -1.47656,1.33594 -0.23442,0.32821 -0.35161,0.79696 -0.35156,1.40625 -5e-5,0.65634 0.18745,1.35946 0.5625,2.10938 m 15.82031,19.47656 -3.9375,-7.80469 3.9375,-6.67969 c 0.89056,-1.54679 1.33588,-2.88273 1.33594,-4.00781 -6e-5,-1.03117 -0.32819,-2.03898 -0.98438,-3.02344 -0.60943,-0.98429 -1.42974,-1.71085 -2.46094,-2.17968 l -2.46093,-1.125 c -0.46881,-0.23429 -0.89068,-0.6796 -1.26563,-1.33594 -0.32818,-0.65616 -0.49224,-1.31241 -0.49219,-1.96875 -5e-5,-1.12491 0.39839,-2.01553 1.19532,-2.67188 0.79682,-0.65615 1.8515,-0.98428 3.16406,-0.98437 l 20.32031,0 c 1.31242,9e-5 2.39055,0.30478 3.23438,0.91406 0.89054,0.56259 1.33585,1.31259 1.33593,2.25 -8e-5,1.12509 -0.42195,2.10947 -1.26562,2.95313 -0.32821,0.28133 -1.31258,0.86727 -2.95313,1.75781 -3.3282,1.82821 -6.09382,4.47664 -8.29687,7.94531 l -10.40625,15.96094 m -33.1875,29.88281 3.86719,8.01563 -4.35938,7.10156 c -1.59377,2.62501 -2.39065,4.71095 -2.39062,6.25781 -3e-5,2.25001 1.2656,3.89063 3.79687,4.92188 1.40622,0.5625 2.36716,1.125 2.88281,1.6875 0.5156,0.5625 0.77341,1.33594 0.77344,2.32031 -3e-5,1.3125 -0.56253,2.39062 -1.6875,3.23437 -0.4219,0.32813 -0.89065,0.53907 -1.40625,0.63282 -0.51565,0.0937 -1.50002,0.14062 -2.95312,0.14062 l -18.14063,0 c -1.5,0 -2.69532,-0.30469 -3.58594,-0.91406 -0.84375,-0.65625 -1.26562,-1.54688 -1.26562,-2.67188 0,-0.89062 0.25781,-1.61718 0.77344,-2.17968 0.56249,-0.60937 1.52343,-1.17187 2.88281,-1.6875 3.51561,-1.35937 6.23436,-3.58593 8.15625,-6.67969 l 12.65625,-20.17969" />
<path
inkscape:connector-curvature="0"
id="path3078"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Skia;-inkscape-font-specification:Skia Bold"
d="m 916.06883,919.23422 c -0.23444,0 -4.19538,0 -11.88282,0 -7.64067,-0.0469 -13.2891,-0.0703 -16.94531,-0.0703 -4.68753,0 -10.3594,0.0234 -17.01562,0.0703 -6.60939,0 -10.07814,0 -10.40625,0 l -2.32032,-6.60938 c 4.64062,-5.95311 10.82811,-13.92185 18.5625,-23.90625 7.78122,-10.03121 15.67965,-20.27339 23.69532,-30.72656 l -0.0703,-0.14063 c -2.01567,6e-5 -4.07816,6e-5 -6.1875,0 -2.06254,-0.0468 -4.05472,-0.0702 -5.97656,-0.0703 -4.50003,6e-5 -10.24221,0.0469 -17.22656,0.14063 -6.93751,0.0469 -10.59376,0.0704 -10.96875,0.0703 l 0,-8.78906 c 0.42187,7e-5 4.24218,0.0235 11.46094,0.0703 7.21872,7e-5 11.6484,7e-5 13.28906,0 3.28121,7e-5 8.36715,7e-5 15.25781,0 6.93745,-0.0468 10.71088,-0.0702 11.32031,-0.0703 l 3.58594,6.60937 c -8.01568,9.98443 -16.64067,21.04692 -25.875,33.1875 -9.2344,12.09377 -14.64846,19.14845 -16.24219,21.16406 l 0.0703,0.14063 c 1.78122,10e-6 4.10154,0.0234 6.96093,0.0703 2.90622,10e-6 6.02341,10e-6 9.35157,0 9.4687,10e-6 16.35932,-0.0234 20.67187,-0.0703 4.31244,-0.0937 6.60931,-0.14062 6.89063,-0.14063 l 0,9.07032" />
<path
inkscape:connector-curvature="0"
id="path3080"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:STSong;-inkscape-font-specification:STSong"
d="m 112.38831,1030.1967 c -1.72803,4.608 -3.79203,8.016 -6.192,10.224 -2.30402,2.304 -4.80002,3.456 -7.488004,3.456 -1.82401,0 -3.21601,-0.576 -4.176,-1.728 -0.96001,-1.152 -1.44001,-2.4 -1.44,-3.744 -10e-6,-1.152 0.38399,-2.16 1.152,-3.024 0.76799,-0.864 1.96799,-1.296 3.6,-1.296 1.15198,0 2.159984,0.096 3.024004,0.288 0.86398,0.192 1.67998,0.384 2.448,0.576 0.76798,0.192 1.34398,0.288 1.728,0.288 0.47998,0 0.95998,-0.24 1.44,-0.72 0.28798,-0.288 0.52798,-0.528 0.72,-0.72 0.28798,-0.096 0.57598,-0.384 0.864,-0.864 0.28797,-0.384 0.62397,-1.008 1.008,-1.872 0.47997,-0.864 1.00797,-2.16 1.584,-3.888 1.24797,-3.552 1.87197,-5.904 1.872,-7.056 -3e-5,-1.536 -0.48003,-3.456 -1.44,-5.76 L 93.524306,967.84474 c -0.76801,-2.20794 -2.01601,-3.55194 -3.744,-4.032 l -5.328,-1.584 0,-2.304 c 6.04799,0.48006 11.37599,0.72006 15.984004,0.72 4.60798,6e-5 8.92797,-0.23994 12.96,-0.72 l 0,2.304 c -1.05603,0.19206 -2.30403,0.38406 -3.744,0.576 -1.34403,0.0961 -2.59202,0.33606 -3.744,0.72 -1.15202,0.28806 -2.06402,0.76806 -2.736,1.44 -0.67202,0.67206 -0.76802,1.63206 -0.288,2.88 l 14.544,41.03996 13.392,-37.15196 c 0.47995,-1.34395 0.67195,-2.78394 0.576,-4.32 -5e-5,-1.63194 -0.81605,-2.68794 -2.448,-3.168 l -8.064,-2.016 0,-2.304 c 4.31996,0.48006 8.25595,0.72006 11.808,0.72 3.64795,6e-5 7.87194,-0.23994 12.672,-0.72 l 0,2.304 -4.608,1.296 c -1.34406,0.38406 -2.49605,1.20006 -3.456,2.448 -0.96005,1.15206 -2.11205,3.55205 -3.456,7.2 l -21.456,57.02396" />
<path
inkscape:connector-curvature="0"
id="path3082"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Skia;-inkscape-font-specification:Skia Bold"
d="m 307.66164,985.96905 -50.20312,0 c 0.0468,5.06254 1.1015,9.67972 3.16406,13.85157 2.10931,4.12498 5.29681,7.54688 9.5625,10.26558 2.71867,1.7344 5.81242,3.0235 9.28125,3.8672 3.51554,0.8438 7.71085,1.2657 12.58594,1.2656 1.6874,10e-5 3.63271,-0.07 5.83593,-0.2109 2.20303,-0.1406 3.58584,-0.2578 4.14844,-0.3516 l -1.26562,9.3516 c -0.51573,0.047 -1.54698,0.1172 -3.09375,0.2109 -1.5001,0.1407 -3.70323,0.211 -6.60938,0.211 -7.50008,0 -13.96883,-0.9375 -19.40625,-2.8125 -5.43757,-1.9219 -10.03131,-4.6641 -13.78125,-8.2266 -3.56256,-3.4218 -6.2813,-7.4296 -8.15625,-12.0234 -1.82817,-4.64061 -2.74224,-9.56248 -2.74219,-14.76563 -1.87504,0.0469 -5.13285,0.32816 -9.77343,0.84375 -4.64066,0.46878 -8.92972,1.45316 -12.86719,2.95312 -2.95315,1.03128 -5.36721,2.60159 -7.24219,4.71094 -1.87502,2.1094 -2.81252,4.47658 -2.8125,7.10152 -2e-5,3.3282 0.84373,5.8594 2.53125,7.5938 1.73436,1.6875 4.05467,3.0469 6.96094,4.0781 2.2031,0.7969 4.89841,1.2656 8.08594,1.4063 3.23433,0.1406 6.16402,0.2109 8.78906,0.2109 1.45308,0 3.2812,-0.07 5.48437,-0.2109 2.20308,-0.1875 3.51558,-0.3282 3.9375,-0.4219 l -1.26562,9.0703 c -0.56255,0.094 -2.08599,0.2109 -4.57031,0.3516 -2.48442,0.1406 -4.66411,0.2109 -6.53907,0.2109 -4.21878,0 -8.34378,-0.3281 -12.375,-0.9844 -4.03127,-0.6562 -7.47658,-1.6875 -10.33593,-3.0937 -4.07814,-2.0156 -7.12501,-4.4766 -9.14063,-7.3828 -2.01563,-2.9532 -3.02344,-6.4219 -3.02344,-10.4063 0,-3.93746 1.24218,-7.61714 3.72657,-11.03905 2.48436,-3.42184 6.51561,-6.2109 12.09375,-8.36718 3.8906,-1.49996 8.36715,-2.6484 13.42968,-3.44532 5.06246,-0.8437 10.10152,-1.38276 15.11719,-1.61718 -0.18755,-3.56246 -1.12505,-6.56245 -2.8125,-9 -1.64067,-2.43745 -3.9141,-4.24213 -6.82031,-5.41407 -2.06254,-0.84369 -4.35941,-1.42962 -6.89063,-1.75781 -2.53128,-0.37494 -5.4844,-0.56244 -8.85937,-0.5625 -2.1094,6e-5 -4.03127,0.0469 -5.76563,0.14063 -1.73439,0.0938 -3.8672,0.211 -6.39843,0.35156 l 1.125,-9.35156 c 0.56248,7e-5 2.03904,-0.0702 4.42968,-0.21094 2.43748,-0.18743 5.46092,-0.28118 9.07032,-0.28125 7.17184,7e-5 13.21871,0.96101 18.14062,2.88281 4.9687,1.92194 8.69526,5.086 11.17969,9.49219 l 0.14062,0 c 2.48432,-3.84369 5.99994,-7.00775 10.54688,-9.49219 4.59368,-2.53118 9.51555,-3.7968 14.76562,-3.79687 4.35929,7e-5 8.20304,0.65632 11.53125,1.96875 3.37491,1.26569 6.28115,3.23444 8.71875,5.90625 2.76552,3.00006 4.85146,6.75005 6.25782,11.25 1.40614,4.45317 2.10926,9.67973 2.10937,15.67968 m -10.82812,-7.875 c -0.79698,-5.99995 -2.71885,-10.59369 -5.76563,-13.78125 -3.00009,-3.23431 -7.1954,-4.8515 -12.58594,-4.85156 -5.29695,6e-5 -9.72663,1.64069 -13.28906,4.92188 -3.51569,3.23443 -5.95319,7.80473 -7.3125,13.71093 l 38.95313,0" />
<path
inkscape:connector-curvature="0"
id="path3084"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Silom;-inkscape-font-specification:Silom"
d="m 457.12305,940.19674 -5.904,8.208 c 3.93592,5.47207 5.90392,10.70407 5.904,15.696 l 0,35.99996 c -8e-5,6.5281 -2.35208,12.192 -7.056,16.992 -4.70407,4.704 -10.32007,7.056 -16.848,7.056 l -24.048,0 c -3.45603,0 -6.91203,-0.768 -10.368,-2.304 l -1.584,2.304 -12.096,0 6.048,-8.208 c -4.03201,-5.472 -6.04801,-10.7519 -6.048,-15.84 l 0,-35.99996 c -10e-6,-6.52793 2.35199,-12.14393 7.056,-16.848 4.79998,-4.70392 10.46397,-7.05592 16.992,-7.056 l 24.048,0 c 3.45594,8e-5 6.91193,0.76808 10.368,2.304 l 1.584,-2.304 11.952,0 m -47.952,50.4 22.752,-31.824 c -2.78406,-4.41593 -6.38405,-6.62393 -10.8,-6.624 -3.26405,7e-5 -6.09604,1.20007 -8.496,3.6 -2.30404,2.30407 -3.45604,5.08806 -3.456,8.352 l 0,26.496 m 24.048,-16.848 -22.752,31.82396 c 2.78396,4.416 6.33596,6.624 10.656,6.624 3.35995,0 6.19195,-1.2 8.496,-3.6 2.39994,-2.3999 3.59994,-5.2319 3.6,-8.496 l 0,-26.35196" />
<path
inkscape:connector-curvature="0"
id="path3086"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:none;stroke:#ffff00;stroke-opacity:1;font-family:Serto Kharput;-inkscape-font-specification:Serto Kharput"
d="m 553.32662,943.85187 c -4e-5,2.62507 -0.93754,4.85163 -2.8125,6.67968 -1.87504,1.78132 -4.1016,2.67195 -6.67968,2.67188 -2.62504,7e-5 -4.87504,-0.89056 -6.75,-2.67188 -1.87503,-1.82805 -2.81253,-4.05461 -2.8125,-6.67968 -3e-5,-2.62492 0.93747,-4.85148 2.8125,-6.67969 1.87496,-1.82804 4.12496,-2.7421 6.75,-2.74219 2.57808,9e-5 4.80464,0.91415 6.67968,2.74219 1.87496,1.82821 2.81246,4.05477 2.8125,6.67969 m 20.74219,77.34373 c -7e-5,1.9688 -1.31257,2.9531 -3.9375,2.9531 l -10.33594,0 0,-7.664 c -7.73442,6.5156 -16.00785,9.7734 -24.82031,9.7734 -5.57815,0 -10.24221,-1.3594 -13.99219,-4.0781 -4.26563,-3.0469 -6.39844,-7.2656 -6.39843,-12.6563 -10e-6,-6.6093 3.18748,-11.64837 9.5625,-15.11715 5.10935,-2.81246 11.22653,-4.21871 18.35156,-4.21875 5.06246,4e-5 10.82808,0.65629 17.29687,1.96875 l 0,-8.64843 c -5e-5,-3.79684 -1.87505,-6.65621 -5.625,-8.57813 -2.90629,-1.49995 -6.44535,-2.24995 -10.61718,-2.25 -2.67192,5e-5 -6.51566,0.72661 -11.53125,2.17969 -4.96878,1.4063 -7.80471,2.10942 -8.50782,2.10937 -1.64064,5e-5 -2.46095,-0.89057 -2.46093,-2.67187 -2e-5,-0.6562 0.21092,-1.24214 0.63281,-1.75781 0.79686,-0.93745 4.24216,-2.06245 10.33594,-3.375 5.67184,-1.26557 9.60933,-1.89839 11.8125,-1.89844 5.43745,5e-5 10.19526,1.31255 14.27343,3.9375 4.73432,3.00005 7.10151,7.10161 7.10157,12.30469 l -0.0703,34.66408 4.99219,0 c 2.62493,0 3.93743,1.0078 3.9375,3.0234 m -23.90625,-77.34373 c -4e-5,-1.7343 -0.63286,-3.21086 -1.89844,-4.42969 -1.21879,-1.21867 -2.69535,-1.82804 -4.42968,-1.82813 -1.78129,9e-5 -3.30473,0.60946 -4.57032,1.82813 -1.21878,1.21883 -1.82815,2.69539 -1.82812,4.42969 -3e-5,1.73445 0.63278,3.21101 1.89844,4.42968 1.26559,1.17195 2.76558,1.75789 4.5,1.75782 1.73433,7e-5 3.21089,-0.58587 4.42968,-1.75782 1.26558,-1.21867 1.8984,-2.69523 1.89844,-4.42968 m 9.63281,65.53123 0,-11.74217 c -4.82817,-1.40622 -10.40629,-2.10935 -16.73437,-2.10938 -5.48441,3e-5 -10.38284,0.98441 -14.69531,2.95313 -5.62502,2.53122 -8.43752,6.21092 -8.4375,11.03902 -2e-5,3.8438 1.57029,6.7735 4.71093,8.7891 2.67186,1.7344 6.04685,2.6016 10.125,2.6016 8.67184,0 17.01558,-3.8438 25.03125,-11.5313" />
<flowRoot
xml:space="preserve"
id="flowRoot4124"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"><flowRegion
id="flowRegion4126"><rect
id="rect4128"
width="1052.579"
height="591.9494"
x="808.12201"
y="68.473602" /></flowRegion><flowPara
id="flowPara4130" /></flowRoot> </g>
</svg>
</div></div>
</div>
function simulatePathDrawing(path) {
// var path = document.querySelector('.squiggle-animated path');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 1.5s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
path.style.strokeWidth = '3px';
path.style.fill = 'rgba(255,255,0,.12)';
}
var chars = $('.squiggle-animated path').on('mouseover', function(e) {
simulatePathDrawing(this)
})
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Simulate SVG paths are drawn using CSS animation

This method to simulate I discovered reading a blog post by Jake Archibald. I read his blog post: Animated line drawing in SVG where he describes this clever technique. In short it uses animated dash patterns to simulate that the path is drawn. Here are some letters drawn as you hover over them.

A Pen by Sten Hougaard on CodePen.

License.

.span4 {
background-color: rgba(255,255,0,.2);
border-radius: 4px;
}
.span4 h3 {
margin: 10px;
line-height: 105%;
}
<link href="http://s.cdpn.io/9729/cyborg_bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment