Jump to content
Search Community

How to make SVG draw from one side?

therddlr test
Moderator Tag

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

First of, I beg your pardon for creating this topic since it's unrelated to GSAP directly, more like SVG esoteric stuff. But I am complete Illustrator beginner, started using it only a week ago. And this animations things a tight together so much!

 

So, after diggin around this is what I found. 

 

1. First option is to fill original shape! But it looks like it is inconvenient way to work with illustrations, or am I wrong here (don't have real-world practice yet)

 

2. So I found second option:

  - Outline stroke on path

  - Remove Fill and add Stroke

  - Release Compound Path!

Now you have 2 shapes: inner and outter. Wew, that was wierd!

 

What do you think? What workflow pro's have? Can't find any tips on this topic.

Link to comment
Share on other sites

2 hours ago, therddlr said:

Wow! This Illustrator/SVG/GSAP workflow if awfully ridiculously unusable.  What a shame.

 

Maybe you're doing it wrong. 

 

Step 1: Draw something. DO NOT do something like Outline Stroke or Offset Path. If you need to change the stroke's appearance, click on the Stroke options next to the stroke color box. It's also at the top-left part of the screen. 

 

suca5GY.png

 

Step 2: Copy and paste path into CodePen.

Step 3: Animate.

 

See the Pen JwPqGz by osublake (@osublake) on CodePen

 

 

 

 

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