Jump to content

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

drawSVG IE10 circle stroke animation glitchey

Recommended Posts

Hey there.


Seem to be having some issues with the draw SVG plugin on IE when trying to animate a circles stroke around a central point to fill up the background. The Problem only occurs on IE When the dial type animation becomes glitchey. The Codepen example shows this.

See the Pen oXNovy by joshscorrar (@joshscorrar) on CodePen

  • Like 1
Link to post
Share on other sites

Thanks for the pen

It looks like DrawSVGPlugin is doing its job and that it could just be an IE rendering issue that occurs when the stroke width is the same as the radius of the circle.

Knocking the stroke width down from 50 to 20 and everything looked smooth and clean.

Make it greater than 60 (even in other browsers) and the stroke will cut into itself too. 


Interested in other ideas, but that's my best assessment at the moment

  • Like 1
Link to post
Share on other sites

Thanks for the Quick Reply.


Yeah I tried that too, really need the stroke too fill up the whole gray background.


Any other thoughts on how to achieve this effect using SVG? I can do it using canvas but I use drawSVG in many other places on my site and want to stick with one method of animating these effects. 

Link to post
Share on other sites

Here is a test without DrawSVGPlugin, just to show how IE renders the stroke cutting into itself even when static:



I came a cool demo from a css-tricks article. It uses some CSS, uh, tricks. It's not SVG but I imagine it would be totally possible to control the animation with GSAP. 

  • Like 1
Link to post
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.