SVG Sample

_stackoverflow.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="350px" height="50px" viewBox="0 0 350 50">
	<defs>
    <mask id="mask1">
      <rect fill="white" width="195" height="50" />
      <text style="font: bold 23px Arial, sans-serif; letter-spacing: -0px" x="5" y="20"><tspan>EXAMPLE</tspan></text>
    </mask>
  </defs>
  <rect width="0" height="25" style="fill:rgb(162,233,51);" mask="url(#mask1)" id="greenBox">
    <animate attributeName="width" attributeType="XML"
      from="0" to="125"
      begin="0s" dur="1s"
      fill="freeze" calcMode="spline"
      keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" />
  </rect>
  <text xml:space="preserve" fill="white" style="font: bold 23px Arial, sans-serif; letter-spacing: -0px" x="5" y="20" id="cutText"><tspan>EXAMPLE</tspan>
    <animate attributeName="opacity" attributeType="XML"
      from="1" to="0"
      begin="1s" dur="2s"
      fill="freeze" />
  </text>
  <text xml:space="preserve" fill="white" style="font: bold 23px Arial, sans-serif;" x="130" y="20"><tspan>TEXT</tspan></text>
</svg>