Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swampthang

Dynamic SVGs and drawSVG

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):

 

https://www.npmjs.com/package/inline-svg

 

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:

http://codepen.io/GreenSock/pen/OXbygo?editors=0010

  • 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.

×