This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at Hi,
i have converted text to path from a custom font https://www.google.com/fonts/specimen/Great+Vibes
what i want is to animate this text like a signature,
i have found many code, JS librairies and tutorials to animate paths inside svg, but all of them animate the stroke-dashoffset and not the fill :
- http://maxwellito.github.io/vivus/
- http://webdesign.tutsplus.com/tutorials/sign-on-the-dotted-line-animating-your-own-svg-signature--cms-23846
- http://codepen.io/ghepting/pen/xnezB
- http://bashooka.com/coding/impressive-svg-line-animation-examples/
and so many like these few ones ...
as you can see in the attached inkscape file, the converted text is made with a fill and a stroke, and not suitable to use with these above examples .
so my question is how to convert a text into a path that i can animate it's stroke-dashoffset like the examples ?
any help, idea is welcome .
thanks and good day .
convert text to path and animations
convert text to path and animations
- Attachments
-
- slogan.svg
- (22.58 KiB) Downloaded 260 times
Re: convert text to path and animations
Simple strokes cannot have a variable width, so doing this directly may not be possible.
It may work using the text in the GreatVibes font as a clip, though.
You'd have to create the path that will be used for the animation manually, I think.
It may work using the text in the GreatVibes font as a clip, though.
You'd have to create the path that will be used for the animation manually, I think.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!
Inkscape FAQ - Learning Resources - Website with tutorials (German and English)
Inkscape FAQ - Learning Resources - Website with tutorials (German and English)
Re: convert text to path and animations
There is the Hershey-text extension at extensions/render/Hershey text that can generate single line lettering.
If you are using a different style, you can try the hatching/rough lpe, probably a sketch style would fit that well.
But thinking of your original goal...
Script lettering is flattened in a font from separate strokes.
You could distort a single line lettering with heavy transformation like on this image.
Maybe try with adding a pattern along path lpe to it -doubt it would work; technically at least the pattern's width needs to be altered simultaneously with the stroke's length...
An idea for a cheap solution is using gradient fills for each character(/stroke...) and animating the gradients one after another.
If you are using a different style, you can try the hatching/rough lpe, probably a sketch style would fit that well.
But thinking of your original goal...
Script lettering is flattened in a font from separate strokes.
You could distort a single line lettering with heavy transformation like on this image.
Maybe try with adding a pattern along path lpe to it -doubt it would work; technically at least the pattern's width needs to be altered simultaneously with the stroke's length...
An idea for a cheap solution is using gradient fills for each character(/stroke...) and animating the gradients one after another.
Re: convert text to path and animations
thanks guys for the suggestions
really appreciate
really appreciate
Re: convert text to path and animations
Hi,
these two more examples seems achieve the desired effect by using clip-path and some css3 magic
https://codepen.io/munkholm/pen/EaZJQE
http://codepen.io/IbeVanmeenen/pen/gpBmMQ
but i cannot figure out how the paths and the clips are constructed :/
please see the attached svg file that we can load in inkscape
someone can please help me to understand how the paths and their clips are made so i can use the technique on my own paths ?
good day
these two more examples seems achieve the desired effect by using clip-path and some css3 magic
https://codepen.io/munkholm/pen/EaZJQE
http://codepen.io/IbeVanmeenen/pen/gpBmMQ
but i cannot figure out how the paths and the clips are constructed :/
please see the attached svg file that we can load in inkscape
someone can please help me to understand how the paths and their clips are made so i can use the technique on my own paths ?
good day
- Attachments
-
- h.svg
- (17.71 KiB) Downloaded 165 times
