13

I'm looking for some direction, not necessarily code.
I would like to spell out my name with SVG text.
So far I've been able to place it and allow it to animate drawing, but it doesn't happen in a linear writing fashion.

I use the code below which you can see fully here:

<svg width="700" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text class="path" xml:space="preserve" text-anchor="middle" font-family="pharmount" font-size="100" id="svg_1" y="230" x="300" stroke-width="2" stroke="#000000" fill="#000000">Martavis Parker</text>
</svg>

Any idea how I can make it so that the name writes across as if you're actually writing on paper?

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
Martavis P.
  • 1,708
  • 2
  • 27
  • 45
  • Please unmark this as a duplicate question. I have, in fact, gotten this far by using that question. I am asking a more specific question of how to draw it in a linear fashion, which is not a duplicate. – Martavis P. May 26 '14 at 21:00
  • This script do exactly what you want : http://codecanyon.net/item/responsive-svg-handwriting-font-animation-script/6719796 – user2267379 Feb 19 '16 at 06:11

1 Answers1

14

Convert the text to path(s) (you most likely want a path describing how you'd draw each letter), then animate stroke-dashoffset, see How to draw a vector path progressively? (Raphael.js) for more details.

Some resources (with examples) to look through:

Community
  • 1
  • 1
Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • I've been looking over things and there's one issue. I'm using the native HTML svg text. I cannot understand how to find the path from that. – Martavis P. May 26 '14 at 21:10
  • You cannot really expect to use a element for this, you'll have to convert the text to element(s) using a vector graphics editor (try Illustrator, Inkscape or equivalent). Judging by your choice of font it's going to be difficult to get what you're after by animating just the stroke, if you're looking for a calligraphy-like progressive drawing you'll probably have to do path animation, which unfortunately is quite a bit harder. I'll add another resource that shows a possible way of doing it. A problem is that SVG doesn't yet have variable width strokes. – Erik Dahlström May 27 '14 at 07:52
  • Thank you. I marked this as a answer because the last example really gets into what I'm trying to do. I'm studying this now. Thanks! – Martavis P. May 28 '14 at 02:58
  • @ErikDahlström, I could relate to what said in the last line, but couldn't exactly get how the lack of it makes calligraphic style of progressive animation difficult. I'm trying to find a way to convert text(for example from a DOM element),convert into svg with proper paths(the difficulty I'm at), instead of using a vector graphics editor. I [asked this](https://medium.com/@arihantverma/hi-nathan-d4f94add8dcd#.dzbco6ru0) in the comments of the last link you posted in the answer, and also a person I asked it to, provided me [this](https://twitter.com/netsi1964/status/777000689197277184). – Arihant Sep 22 '16 at 13:07