SVG logos - can we animate them?

[neoeclipse]

Hey all! 

 

My first time with a problem that I couldn't solve via the docs or forums on my own. I'm taking a stab at drawSVG and morphSVG. 

 

I've had success animating more simply SVG's that were created as icons. When I take a svg logo for a company, I can't seem to figure out how to draw it out or morph. I'm wondering is someone can help me create a simple draw animation for a logo and show me how to build out paths if possible.

 

I haven't been able to find any examples of complex SVG's being animated. If you have any examples that would be great to see as well! 

 

Here is the svg code for one of the logos. 

 

<svg version="1.1" id="image1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 201 72" style="enable-background:new 0 0 201 72;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#005DAA;}
.st2{fill:#E31837;}
</style>
<path class="st0" d="M192.9,20.8c-3.2-3.9-8.8-6.1-15.5-6.1c-7,0-13.3,2.4-17.7,6.3l0.7-4.5l-1.9-0.6c-2.7-0.8-5.7-1.2-8.6-1.2
c-5.1,0-9.9,1.6-13.9,4.2l1.1-3.7h-30.4l-0.4,1.2c-2.7-1.1-5.7-1.6-9-1.6c-6.3,0-13,2.4-16.5,7.1c-0.2-0.3-0.5-0.7-0.7-1
c-3.2-3.9-8.8-6.1-15.5-6.1c-6.8,0-13,2.2-17.3,5.9l1.7-10.3l-1.9-0.6c-3.3-1-6.9-1.5-10.6-1.5c-13.3,0-25.4,8.5-27.6,19.3
c-0.9,4.6,0.2,9,3,12.5c2.4,3,6,5.1,10.3,6.2H9.2v16.9h67.2l0.1-0.2l0,0.2h8.1l1.1-1.8l-0.3,1.8h18.3l0.3-1.4c1.6,1,3.7,1.6,6.1,1.6
c2.1,0,4.1-0.4,5.9-1.2l-0.2,1h10.9h3.6h11.1l0-0.2c1.2,0.3,2.4,0.4,3.6,0.4c0.7,0,1.5-0.1,2.2-0.2h9.8l0.7-1.5h0.7l0.2,1.5h4.5h6
h4.9h3.6h11.1l1.5-7.9h-0.5l0.2-1.1h0.4l1.5-7.9h-0.8c0.7-0.6,1.2-1.4,1.3-2.3c0.2-1.1-0.1-2.2-0.8-3c-0.2-0.2-0.4-0.4-0.6-0.6
c2.4-2.5,4-5.4,4.7-8.8C196.3,27.5,195.4,23.8,192.9,20.8z M175.5,54.6h-0.9l1.4-7.3c0.3,0,0.6-0.1,0.9-0.1L175.5,54.6z M153.9,30.8
c-0.1,0.5-0.2,1-0.2,1.5c-2,1.4-3.9,2-6,2c-1.4,0-2.6-0.5-3.2-1.2c-0.4-0.4-0.5-0.9-0.4-1.5c0.4-1.9,2.9-3.5,5.5-3.5
c1.6,0,3.1,0.6,4.5,1.7C154.1,30.1,154,30.4,153.9,30.8z M156,46.2l-1,1.6l-0.8-0.5c-0.5-0.3-1.1-0.5-1.7-0.7
c0.4-0.1,0.9-0.2,1.2-0.4l1.2-0.4l1.1-5c0.2,0.2,0.3,0.4,0.5,0.6c1.7,2.1,4.2,3.7,7.2,4.7L156,46.2L156,46.2z M166.1,46.9l-0.4,2.1
l-0.5-2.3C165.4,46.8,165.7,46.9,166.1,46.9z M175.7,28.2c1.2,0,2.2,0.3,2.7,0.9c0.5,0.5,0.4,1.3,0.3,1.7c-0.4,2-2.5,3.5-5.1,3.5
c-1.3,0-2.3-0.3-2.7-0.9c-0.3-0.4-0.4-1-0.3-1.7C171,30,172.8,28.2,175.7,28.2z M118.5,47.8c-0.4-0.2-0.7-0.5-1.1-0.6h1.3
L118.5,47.8z M111.6,54.6c-0.2,0.1-0.4,0.2-0.7,0.3C111,54.8,111.2,54.6,111.6,54.6z M109.6,28.4l-1.5,5c-0.1-1.3-0.5-2.5-1.2-3.6
c-0.3-0.4-0.7-0.8-1-1.2L109.6,28.4z M66.1,30.9c-0.4,2-2.5,3.5-5.1,3.5c-1.3,0-2.3-0.3-2.7-0.9c-0.3-0.4-0.4-1-0.3-1.7
c0.3-1.8,2.2-3.5,5.1-3.5c1.2,0,2.2,0.3,2.7,0.9C66.2,29.7,66.2,30.4,66.1,30.9z M83.5,47l0,0.1L83.5,47C83.4,47,83.5,47,83.5,47z
M105.9,40.4l-1.8,5.8h-6.8C100.9,45.1,104,43.2,105.9,40.4z M106.7,47.1h0.4c-0.1,0.1-0.3,0.1-0.4,0.2L106.7,47.1z M33.9,31.9
c-1.9,0-3.6-0.6-4.5-1.7c-0.5-0.6-0.7-1.3-0.5-2.1c0.5-2.5,3.9-4.7,7.4-4.7c2.4,0,4.5,0.9,6.7,2.7c-0.6,1-1,2.1-1.3,3.3
C39,31.1,36.5,31.9,33.9,31.9z M73.7,43.8l2.2,1c1.2,0.5,2.6,1,4,1.4h-4.1l-0.4,0.9l-0.1-0.9h-7.1C70.2,45.6,72,44.8,73.7,43.8z
M127.2,54.6l1.6-8.4h-7.7l5.4-17.9l1.7,0.1c-0.3,0.8-0.6,1.6-0.7,2.5c-0.8,4,0.2,7.8,2.6,10.8c1.6,2,3.9,3.5,6.5,4.5h-6.8l-1.6,8.4
L127.2,54.6L127.2,54.6z M41.1,45.6l1.2-0.4l1-4.3c0.2,0.2,0.3,0.5,0.5,0.7c1.7,2.1,4.2,3.7,7.2,4.7H38.6
C39.5,46.1,40.4,45.9,41.1,45.6z M180.9,46.2c1-0.3,2-0.7,2.9-1.1c0.1,0.3,0.3,0.6,0.5,0.9c0,0.1,0.1,0.1,0.2,0.2H180.9z"/>
<g>
<path class="st1" d="M73.1,48.5l0.5,7.4h0.1c0.2-0.8,0.5-1.5,0.9-2.3l2.5-5.1h4.1l0.6,7.4H82c0.2-0.7,0.5-1.5,0.8-2.2l2.5-5.2h5.6
l-7.6,12.3h-4.7l-0.4-6.7H78c-0.2,0.6-0.3,1.3-0.6,1.9L75,60.8h-4.6l-2.8-12.3H73.1z"/>
<path class="st1" d="M90.5,48.5h5.2l-0.8,4.2h3.3l0.8-4.2h5.2l-2.3,12.3h-5.2l0.8-4.3h-3.3l-0.8,4.3h-5.2L90.5,48.5z"/>
<path class="st1" d="M119.4,54.7c-0.8,4-4.9,6.3-9.4,6.3c-4.5,0-7.7-2.4-7-6.3c0.7-3.9,4.9-6.4,9.4-6.4S120.1,50.8,119.4,54.7z
M108.4,54.8c-0.3,1.4,0.7,2.4,2.3,2.4c1.6,0,3-1,3.2-2.4c0.2-1.3-0.6-2.4-2.3-2.4C109.9,52.4,108.6,53.5,108.4,54.8z"/>
<path class="st1" d="M120.6,48.5h5.4l-1.6,8.4h4.5l-0.8,4h-9.9L120.6,48.5z"/>
<path class="st1" d="M141.6,56.4l0.2,0.2c0.8,0.6,1.9,1.1,3.1,1.1c0.5,0,1.4-0.2,1.5-0.7s-0.6-0.6-1.1-0.7l-1.1-0.2
c-2-0.3-3.6-1.3-3.2-3.3c0.6-2.9,4.1-4.6,7.3-4.6c1.7,0,3.2,0.3,4.5,1.1l-2.1,3.2c-0.8-0.5-1.8-0.9-2.9-0.9c-0.5,0-1.2,0.1-1.3,0.7
c-0.1,0.5,0.6,0.5,1,0.6l1.2,0.2c2.2,0.4,3.7,1.4,3.3,3.5c-0.6,2.9-4.1,4.4-7.3,4.4c-1.9,0-3.9-0.4-5.5-1.1L141.6,56.4z"/>
<path class="st1" d="M160.1,56.4l-0.2-2.2c-0.1-0.5-0.1-1.1-0.1-1.6h-0.2l-1.7,3.8H160.1z M155.4,60.8h-5.7l7.5-12.3h6l2.9,12.3
h-5.7l-0.2-1.5h-4.1L155.4,60.8z"/>
<path class="st1" d="M168,48.5h5.4l-1.6,8.4h4.5l-0.8,4h-9.9L168,48.5z"/>
<path class="st1" d="M178.9,48.5h10l-0.6,3.4h-4.5l-0.2,1.2h4.1l-0.6,3.2h-4.1l-0.2,1.2h4.7l-0.6,3.4h-10.1L178.9,48.5z"/>
<g>
<path class="st2" d="M105.8,26.3l6.8-0.3l-5.7,18.8h12.2l5.7-18.8l6.6,0.3l2.7-8.9h-25.6L105.8,26.3z"/>
<path class="st2" d="M80.6,31.2C78.9,40,69.5,45.3,59.3,45.3c-10.2,0-17.5-5.3-15.8-14.1c1.7-8.6,11.1-14.2,21.3-14.2
C75,16.9,82.3,22.6,80.6,31.2z M55.7,31.3c-0.6,3.1,1.6,5.3,5.3,5.3c3.7,0,6.7-2.1,7.3-5.3c0.6-2.9-1.4-5.4-5.2-5.4
C59.2,26,56.3,28.4,55.7,31.3z"/>
<path class="st2" d="M76.8,42.8c3.5,1.6,8.2,2.5,12.4,2.5c7.3,0,15.2-3.2,16.5-9.8c0.9-4.7-2.4-6.9-7.4-7.9l-2.7-0.5
c-0.9-0.2-2.4-0.3-2.2-1.3c0.2-1.1,1.8-1.5,2.9-1.5c2.6,0,4.8,0.9,6.7,2.1l4.7-7c-3-1.6-6.3-2.4-10.2-2.4
c-7.3,0-15.3,3.6-16.5,10.2c-0.8,4.3,2.7,6.6,7.4,7.3l2.4,0.4c1.1,0.2,2.7,0.3,2.4,1.5s-2.2,1.6-3.4,1.6c-2.8,0-5.2-1.1-7.1-2.5
L82,35L76.8,42.8z"/>
<path class="st2" d="M157.9,18.1c-2.4-0.7-5.2-1.1-8-1.1c-9.8,0-18.8,6.4-20.3,14.4c-1.5,7.8,4.8,13.9,14.4,13.9
c2.2,0,6.8-0.3,8.9-1.1l2.3-10.3c-2.3,1.6-4.7,2.5-7.5,2.5c-3.6,0-6.4-2.3-5.8-5.4c0.6-3,4-5.4,7.7-5.4c2.8,0,5,1.3,6.6,2.8
L157.9,18.1z"/>
<path class="st2" d="M177.5,16.9c-10.2,0-19.6,5.6-21.3,14.2c-1.7,8.8,5.6,14.1,15.8,14.1c10.2,0,19.6-5.3,21.3-14.1
C195,22.6,187.7,16.9,177.5,16.9z M175.7,26c3.9,0,5.8,2.4,5.2,5.4c-0.6,3.1-3.6,5.3-7.3,5.3s-5.9-2.1-5.3-5.3
C169,28.4,171.9,26,175.7,26z"/>
<path class="st2" d="M46.6,11.9c-3-0.9-6.5-1.4-9.9-1.4c-12.3,0-23.4,7.8-25.4,17.4c-1.9,9.5,6,16.8,17.9,16.8
c2.7,0,8.5-0.4,11.1-1.3l2.9-12.4c-2.8,1.9-5.8,3.1-9.3,3.1c-4.6,0-7.9-2.8-7.2-6.5c0.7-3.6,5-6.5,9.6-6.5c3.4,0,6.2,1.5,8.3,3.3
L46.6,11.9z"/>
<path class="st2" d="M185.8,43.5c0.2-1,1.3-1.7,2.4-1.7c1.2,0,1.9,0.8,1.8,1.7c-0.2,1-1.3,1.7-2.4,1.7
C186.4,45.3,185.6,44.5,185.8,43.5z M189.4,43.5c0.1-0.8-0.4-1.3-1.3-1.3c-0.9,0-1.6,0.5-1.8,1.3c-0.1,0.8,0.4,1.3,1.3,1.3
C188.5,44.8,189.3,44.3,189.4,43.5z M188.7,44.4h-0.5l-0.3-0.8h-0.4l-0.1,0.8h-0.5l0.3-1.8h1.1c0.5,0,0.7,0.1,0.6,0.6
c-0.1,0.3-0.3,0.5-0.6,0.5L188.7,44.4z M188,43.3c0.2,0,0.4,0,0.5-0.2c0-0.2-0.2-0.2-0.4-0.2h-0.5l-0.1,0.4H188z"/>
</g>
<polygon class="st1" points="12.2,60.9 69.3,60.9 69.2,60.8 69.2,60.8 68.5,57.7 12.2,57.7 "/>
<polygon class="st1" points="12.2,56.4 68.2,56.4 67.4,53.2 12.2,53.2 "/>
<polygon class="st1" points="12.2,51.9 67.1,51.9 66.9,50.7 66.4,48.5 12.2,48.5 "/>
<path class="st1" d="M131.5,48.5h10l-0.6,3.4h-4.5l-0.2,1.2h4.1l-0.6,3.2h-4.1l-0.2,1.2h4.7l-0.6,3.4h-10.1L131.5,48.5z"/>
</g>
</svg>

See the Pen WpZXrM by anon (@anon) on CodePen

[neoeclipse]

I got 'something' going in codepen, but the underlying image is still fully present. Clearly I'm missing some nooby thing since this is my first go at it! 

[PointC]

Hi neoeclipse 

 

Welcome to the GreenSock forum.

 

I'm not 100% sure what you're asking. Are you asking how to group and target all the paths? Or just general advice about animating a logo?

 

I dropped your SVG into a CodePen and did a quick DrawSVG animation and fill for some of the letters:

 

See the Pen jBGaPx by PointC (@PointC) on CodePen

 

None of the letters had a stroke and DrawSVG needs that to work its magic so I added that to the CSS.

 

I'd recommend creating groups of paths that you want to target with something like a stagger. In your example the letters already had a class so I just targeted that for my demo stagger. If your paths don't have a class, you can simply group them and then target the parent id and each child path like:

tl.staggerTo("#yourGroup path", 1, { ... }, stagger)

It really depends on what you're after, but targeting groups and classes should allow you to do quite a bit. For morphs remember that it's path to path and not group to group.

 

Does that help at all?

 

If you need additional assistance, a CodePen would be most appreciated. Please see this link for more info:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

You can also just fork my pen and start with that if you like.

 

Happy tweening.

[PointC]

Whoops. Looks like you were making a CodePen and posting again while I was typing. Thanks for the demo.

 

The underlying image is still there because the fill is still there. You can set the fill to transparent during the the DrawSVG part and then fade the fill back to the original color. That's pretty much what I did in my demo.

 

Happy tweening.

[neoeclipse]

Thank you for the quick response! 

 

Yes clearly I was missing multiple things This is a whole new kind of animation for me so I'm breaking things all over! But your codepen is doing almost exactly what I wanted except all the letters need to animate in or draw in. I still don't fully understand the 'fill' and how it plays in with the drawSVG. I just haven't used svg for more than image placement until this week. 

 

The original plan was to have a row of logos that morphs in and out into different logos. I started with draw that works really well for simply AI created icons but I failed with a complex logo as you saw. I just made a few edits to your codepen that animates in the COSTCO which is great! Now I just need to digest and keep playing around with this. If you have time, I can try to create a quick overlayed svg that you could try to do a morphSVG on to show me the ways of the pros?  

[PointC]

Fill has nothing to do with DrawSVG. That works with strokes only.

 

Yeah - if you want to put together a pen with a starting morph path for some of the letters, I'll take a look at it for you. I'm not sure if you're starting with basic shapes or other types of paths, but just remember that we need one starting path for each of the letters you want to morph. Also remember that morphs assume the position of the new path too so you probably want to line up the starting path over the letter and make it roughly the same size for the best results.

 

Please post a link when it's ready and I'll look at it for you.

 

Happy tweening.

[neoeclipse]

Fill has nothing to do with DrawSVG. That works with strokes only.

 

Yeah - if you want to put together a pen with a starting morph path for some of the letters, I'll take a look at it for you. I'm not sure if you're starting with basic shapes or other types of paths, but just remember that we need one starting path for each of the letters you want to morph. Also remember that morphs assume the position of the new path too so you probably want to line up the starting path over the letter and make it roughly the same size for the best results.

 

Please post a link when it's ready and I'll look at it for you.

 

Happy tweening.

 

 

ok my sad attempt to start a morph is up! 

 

See the Pen OpxQyP by anon (@anon) on CodePen

 

So these SVG paths seem to be complex when you get logos from Companies. I'm not sure how to go about this. It doesn't have to be uber complex animation. Even if the animation was a blob animation into another logo that would be pretty epic imo. I just need some help to understand how I'm suppose to create the SVG code (I'm pulling out of AI btw) to be grouped together and morph into other logos. 

[PointC]

LOL - it's not a sad attempt. You're just not familiar with SVG yet.

 

Here's what I made for you:

 

See the Pen xqXYry by PointC (@PointC) on CodePen

 

I stripped out the extra logo pieces and focused on the letters. You can see that we have to deal with the dot over the 'i' in github. I just made that fade out, but you could fly it off the stage or whatever you want.

 

How do you deal with AI files? Well... you want to do as much grouping and naming in AI as possible. I find that a lot easier than trying to figure out what path is what in the SVG. You'll see in the demo I had to go find and name each path so we could have a start and end morph.

 

I kept it simple and named each path according to its letter in the logo and then have a tween for each morph. If I were doing this for real, I'd probably name the start and end paths sequentially (#start1, #end1, etc.) and then it's really easy to use a loop for the tween work. Here's a basic example of looping through several morphs.

 

See the Pen LNLpgB by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy morphing.

[neoeclipse]

Yes this is perfect! Thanks for taking the time to spin all this up! 

 

Clearly I need to put in some hours to get things to work. I was able to get my own svgdraw to work on other logos. The morphing part is a whole new animal because of the multiple paths. But your example paves the way for me to understand it all much better  

 

Thanks again for the help! 

[Promixmart]

Please help me out, i want to create a text svg with only this alphabets "xorg" but i dont know how. Pls teach me or something

[mikel]

Hey @Promixmart,

 

You could use a vector software like INKSCAPE.
Type some letters, convert them to paths. Plus some dots.
Use svgomg to clean the SVG data. And ...

 

See the Pen abzMOxW by mikeK (@mikeK) on CodePen

 

Happy morphing ...

Mikel