SVG Text Animation

by janani 2014-03-01 19:11:45

A Simple text animation SVG:

<?xml version="1.0" encoding="utf-8"?>

<svg width="800px" height="800px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800" >
<defs>
<style><![CDATA[
path {
cursor: pointer;
pointer-events : visibleStroke;
fill: none;
stroke-width: 10;
stroke-opacity: 0.25;
stroke: #082042;
stroke-linecap: round;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
path:hover {
stroke : lightgreen;;
}
text {
font-size: 36px;
font-family: Tahoma, sans-serif;
font-color:#A41B1D;
stroke: #A41B1D;
}
]]></style>


</defs>

<text id="txt">
<textPath id="txtPath" xlink:href="#shape" startOffset="40%">HIOX - Bforball.com</textPath>
</text>

<path id="shape" d="M 100,300 A 5,1 0 0 1 500,300" pathLength="2000" />

</svg>


611
like
0
dislike
0
mail
flag

You must LOGIN to add comments