meyian

It definitely did! Using your advice, I got the effect I wanted. Thanks so much! http://codepen.io/meyian/pen/AXJjKm These are the steps I went through in Illustrator to get rid of the extra outline: 1) After expanding the shape, by following the steps outlined in the question, I was basically given something with two outlines. The outer square has a black fill, and the inner square has a transparent fill. To the naked eye, it looks like it should be just one path. We need to delete the second outline. 2) To do so, select the whole thing, and clickObject > Compound path. This will clearly reveal the two squares that made what that you thought was a single square. 3) Painstakingly delete anchor points on the outline you don't want, until you have just one shape. 4) Choose a stroke color for it, since it will have transparent fill and transparent stroke. 5) Now you can save for web and devices, and get the SVG you want. Thanks again, GreenSock! And if anyone has a better workflow than this, please do share.

I'm trying to smoothly morph a square into triangle, in which the top corners slowly move towards each other, and meet in the middle. If you look at the Codepen, you'll see two rectangles turning into a triangle, one after the other, and in different ways. This was my process: I created the two SVGs in Illustrator. I created a 1-pixel stroke rectangle with a transparent fill, clicked Object > Expand, and then saved the SVG using "Save for Web and Devices". The triangle was created similarly, this time by adding an anchor point in the middle of the two top corners of a square, and then deleting the other two anchor points, expanding, and then saving. In the Codepen, you'll see I used the basic line TweenLite.to("#rectangle", 1, {morphSVG:"#triangle"}); to morph my two paths. Three questions, please: 1) What's the Illustrator workflow for making single-line SVG paths in Illustrator? Like what I'm trying for above, but maybe something with curves next time. 2) How about filled shapes? 3) Am I correct in thinking I'll need to play around shapeIndex to get the animation I want?