Jump to content


DrawSVG Line Showing Problem

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



I have a short animation made using the DrawSVG Plugin.  There's a lighting bolt in the middle.  Problem is, it shows a long white line at the very beginning and then when in animates, it just jumps at the end to close off the object.  I need this line to be invisible at the beginning and for the animation to run smoothly.


Please check my Codepen URL.






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

Link to comment
Share on other sites

Hi sjerrentrup  :)


your problem come from your svg not DrawSVG Plugin ,

Illustrator have some issues during exporting SVG ( like line breaks in path d / polygon points )


with this online tool you can fix Ai svg issues : https://jakearchibald.github.io/svgomg/


pls check this out : 

See the Pen yYgVQv by MAW (@MAW) on CodePen

  • Like 3
Link to comment
Share on other sites

nice work, Diaco!

Link to comment
Share on other sites

Great job and svg cleanup tool link Diaco! ..


To add to Diaco's outstanding advise!. I also noticed that in your CSS you have some CSS shorthand properties with commas.

// so this 

// should be this with no commas
padding:0 0 0 0;

And since you are including your SVG code in an HTML page (codepen's HTML panel) you don't need the <xml> tag or the <doctype> tag. Since those are only needed if you leave your SVG code in an svg file (example: my_svg_file.svg ).

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

But Diaco's very handy svg clean up tool link, will do all the heavy code clean up for you ;)



SVG in HTML: https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction

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