Create a stroke animation

[Hardrock72]

Hi, i want to make a stroke animation arround an image from point A to B like a pencil. The stroke will appear in tracing effect !?!?
Thanks

[Daniel]

Please see this thread:

Libraries for simulating line drawing

Hi there, I’ m working on a project which need an effect just like the process that you’re drawing some lines, maybe like this: [image] An animation process of drawing the picture from A to B. I don’t know if Hype can make it… Anyone have some ideas? Thanks very much!!

[michelangelo (Freelancer)]

@Hardrock72

The stroke will appear in tracing effect !?!?

this could be useful

[Hardrock72]

Yes excuse my english, i’m french canadian!

it’s a drawing stroke effet around an object

[Rasmus (Freelancer)]

If I understand you correct this is the easiest way to do it.
tracing.hype.zip (961.0 KB)
If I misunderstood let me know and I will help you further

[DBear]

Hi @michelangelo

Could you add the following to your example too. It would make the process much easier for people that aren't good with code Also it responds to the size of the element in Hype as well as other things

Libraries for simulating line drawing

a much easier way would be to do this (instead of inline code) <object id="my-svg" type="image/svg+xml" data="${resourcesFolderName}/link/to/my.svg"></object> then you can use the same <script> calls but not have to worry about inline SVG code. NOTE You must put this code in the innerHTML of a rectangle element. So, if my svg was called “mySVG.svg” I would create a rect element and then “Edit innerHTML” and put: <object id="my-svg" type="image/svg+xml" data="${resourcesFolderName}/mySVG.svg…

@Hardrock72. Michael's example is a good place to start. Clear

[michelangelo (Freelancer)]

@DBear

Could you add the following to your example too. It would make the process much easier for people that aren't good with code

HI @DBear and thanks !
of course

[Hardrock72]

Here what i really want (see picture) the stroke fill around a person

[TYancy (Trey Yancy)]

Most simplistic method for non-coders: Create the stroke, group it to itself, set the overflow visibility to hidden, animate the width or height of the group to reveal the stroke.

Reveal Stroke.hype.zip (13.1 KB)