blastergod

Thank you! It seems it works. I understand now what you did, you took the motion path from maskreveal not from the mask. I will try to work on the mask a bit. I am doing this programatically. The problem was that drawing the image (without mask) was outlined, so the end result was not good. I tried to remove some paths and see if I get a better result, but it seems I didn't. I will do more digging.

Hello This did not work for me. I was using the exact code you wrote, or am I mistaken? I used var elem=document.getElementById("theMask"); var paths = elem.getElementsByTagName("path"); And then: for (let i = 1; i < paths.length; i++) { tl.add("path"+i); tl.to(paths[i], {duration: 0.75, drawSVG:true}, "path"+i); tl.to("#hand", {duration: 0.75, motionPath:{path:paths[i], align:paths[i]} }, "path"+i); } And it does not work. I tried adding the pen <g> at the end, made no difference.

Hello, I managed to get it working by using the SVG masked, and revealing it using the stroke animation. The only problem I am facing, is that the "pen" that should follow the lines is not showing. Probably because the stroke animation is used as the mask. How can I fix this? Any ideas? https://codepen.io/Cristian-M/pen/poqRQRz Thanks! Vlad

Thank you for the explanation. I understand your point, and it makes sense. What I am trying to do is see if I can "simulate" hand drawing animation over any SVG path (without preparing it). Even if it does not follow the outline perfect, but simply reveals part of the svg in an animation. Speeding up the animation will make it look like the shape is drawn by hand. I want to know if that is possible, because I am using a tool to convert BMP to SVG paths. The BMPs are white and black shapes like the ones you see in my example. The tool then converts the images to svg paths and they look perfect. I just need a solution to draw them part by part, to simulate a hand drawing. Thank you Vlad

Hello, I am considering buying GASP but I am trying it first. I want to simulate a hand drawing effect on a more complex path. I modified the hand drawing example, but unfortunately the results are not what I expect, and I don't know if I am doing something wrong. You can check my codepen at: https://codepen.io/Cristian-M/pen/MWzRYWM Any help is appreciated. First, I don't know exactly what mistake I made that the hand is not transparent background. The problem is that as you can see, the svg shape is drawing faster than the hand is moving, with multiple points starting at the same time. Can this be solved? So the shape is drawn by the hand 100% ? Thank you! Vlad