Fatih Solhan

Sorry, it's been a busy week couldn't get back here. Splitting circles in two helped a lot actually, thank you for that. I drew the paths by considering the starting and ending points and it looks like I am close to completing the animation. I will post the updates and hopefully the finished version when I'm done.

Hey @mvaneijgen, thank you! Since I'm not experienced much in drawing, I am using https://yqnn.github.io/svg-path-editor/ to draw my paths. I will focus more on the start/end points of paths to find the perfect transitions. But could you please explain your suggestion a bit more? I'm sorry I couldn't quite get that idea. Also, thank you for your reply even though you were on your phone ❤️

Hi, I am trying to build an event loop visualization as Jack Archibald did in this wonderful talk. I've created three SVG (2 ellipses, 1 circle) for this visualization. My goal is to be able to change the path in the middle of the animation and it should continue to follow the next path at the first opportunity(probably when it reaches the center-top position of the center circle or the center-bottom position of the center circle. My current implementation is adding an "onRepeat" callback to the currently playing animation and killing it when it starts to repeat. Then I'm starting to the next animation. But the problem with that is the square doesn't transition smoothly to the next path because my SVG's start positions are not the same. Even though I set their start position as close as possible to each other, I *should* be able to decide to follow another path in any phase of the currently running animation. So, I need some suggestions or clarifying that if this is possible with my way or should I try another approach. Any idea is appreciated. I hope my explanation makes sense, if you could watch Jake's talk for a few seconds, you can understand better my goal I also added a small video about how I use three different svg and merge them around center circle. svgs.mov