Jump to content
Search Community

drawSVG complex SVG with multiple paths

Web Bae test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi All!


I have a complex SVG with multiple paths I'm trying to animate. I was able to follow the tutorial on motiontricks but have issues where the path crosses itself. Of course motiontricks has a more advanced tutorial for that too, but I'm getting stuck (and overwhelmed) thinking about the final desired result, which involves an even more complex SVG than the one in the codepen - I'll attach a screenshot.


Anyways, just wondering if you all had any advice on how I should best proceed. Maybe this would be easier in After Effects (not a lot of experience here) and export to Lottie?





complex svg.png

See the Pen ZEMqaox by webisbae (@webisbae) on CodePen

Link to comment
Share on other sites

I don't have much time to dig into this right now but...

  • Maybe you could split it apart into TWO drawSVG animations - one that's just for the thin line (so that the mask can be equally thin and not accidentally expose intersecting lines) and one that's for the chunkier shapes. Think of it like they're on separate layers, masked individually.
  • -OR- maybe you'd have to chop the artwork apart into a few sections based on where the intersections occur (so that each individual section can have its own mask that doesn't affect other sections), and then just sequence them in a timeline. 

I defer to @PointC's geniusness on this type of stuff. 


I can't imagine it'll be a lot easier in After Effects, honestly, and I'm pretty sure Lottie is gonna be bigger and less performant. Just a guess though.

  • Like 2
Link to comment
Share on other sites

Thanks Jack - I'm going to ask my client to revisit the designs to see if we can simplify the final result a bit, which I'll probably end up chopping up like you mentioned. Just curious what everyone's ideas are, I think I've only used drawSVG once before on a project.

  • Like 1
Link to comment
Share on other sites

In my opinion - steer clear of Lottie as much as possible tbh, especially for nice simple things like this.

Lottie doesn't 'tween' properties, it stores all the information about each frame in a JSON file and then bangs an entirely new SVG 'frame' into the DOM, 60 times per second (or however many frames you render out) 

It's ok for some things, but it can be very performance intensive, and if you hook lottie's up to scroll, unless they have a lot of frames you can see it flick from frame to frame. Not ideal. The canvas renderer is better if anyone does go that route, but more limited in terms of animation.

*edited for context

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...