Jump to content


Dynamic SVGs and drawSVG

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Thought I'd share a couple of CodePen's that might help someone. I was charged with coming up with something that would allow a user to dynamically load an SVG into a container and then draw it using drawSVG. (Our organization got the Business Green membership so we wanted to get all the goodie we could get out of it!) As you know, not all SVGs are alike and we didn't have the convenience of being able to go into every SVG and add class names.


So, first I needed something that would snag an svg file in an img tag and replace it with the inline version. I decided to use this (won't go into the process of doing that but it works):




Then I needed a script that would parse through the lines, paths, etc to see what was there and draw the SVG. I wrote a really quick function that will do that and added a couple of bonus functions (center on the screen and shake) for good measure.


Hope that helps someone who might have the same issues at least get started.


See the Pen YWGbMZ?editors=1010 by swampthang (@swampthang) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Swampthang,


Thanks so much for sharing. Very cool.

I noticed that a majority of the line drawing was happening off-screen so I made some small edits just so folks could see that part better:


  • Like 2
Link to comment
Share on other sites

Thanks, Carl. Yea, I'm gonna have to provide options for the user to have SVGs come in from off-screen and do other animations as well. It's gonna be a little tricky to get everything to cooperate. There's a point at which some things just don't make sense like flying in a drawSVG function. ;-)

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.