Skip to content

Instantly share code, notes, and snippets.

@Anaerin
Last active February 27, 2016 22:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Anaerin/a6628c87cac70931ffde to your computer and use it in GitHub Desktop.
Save Anaerin/a6628c87cac70931ffde to your computer and use it in GitHub Desktop.
Just a test...
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<div class="contain-demo">
<svg width="620" height="200">
<defs>
<path id="testPath" d="M33.858,150.079
c11.975-4.27,24.203-7.505,36.886-9.269c36.049-5.015,72.766,0.364,108.379,5.91c40.242,6.267,80.697,9.723,121.433,9.69
c36.672-0.03,77.969-1.382,112.804-13.971c16.76-6.057,30.847-15.648,38.949-32.09c15.894-32.258-12.098-67.663-44.498-72.831
c-27.709-4.42-63.533,24.213-53.21,54.99c5.929,17.669,29.09,11.549,41.399,5.908" />
</defs>
<desc>Purple text moving along curved path with different pacing.</desc>
<text x="2" y="20%" fill="#765373" font-size="25" font-family="'Lato', sans-serif">
<textPath class="please" xlink:href="#testPath">There are over 8,000 grape varieties worldwide. Lots and lots of words go here. So yay?
<animate attributeName="startOffset" values="100%;0;-100%" dur="8s" repeatCount="indefinite" keyTimes="0;0.5;1" />
</textPath>
</text>
</svg>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment