Jump to content

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

A responsive svg circle animation

Recommended Posts

Hello, I'm trying to create a SVG circle with an animation. It work but when I'm resizing the window, the circle animation is not responsive : the animation accelerate or deselerate by the window resizing. If wee decrease the size of the window, the animation does not end correctly. 


Exemple http://guillaumeduclos.fr/circle/#/


My code

<svg xmlns="http://www.w3.org/2000/svg">
  <circle ref="circle" cx="50%" cy="50%" r="50%" fill="none"/>
svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  border: 0px solid red;
  transform: rotate(-90deg);

  circle {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2px;
    drawSVG: "0%",
    ease: Linear.easeNone,
    repeat: -1,
    //onRepeat: this.props.changeTeaserBackground.bind(this),
    callbackScope: this,


I don't know if there is any solution to manage the speed animation and create a "responsive" animation ? I did not find methode in the doc for this. Thanks for your help.

Link to comment
Share on other sites

I'm not sure I follow the question. Do you think you could make a demo for us?



  • Like 2
Link to comment
Share on other sites

It would really help if you could create a reduced test case as suggested by the thread that PointC shared.

I couldn't easily find the js you are using for that effect on your live site.

Should be pretty easy to drop your circle SVG into a CodePen (or similar) with just the pertinent JS code.

That way we focus on the code in question, edit it, and provide a solution for you.



  • Like 2
Link to comment
Share on other sites

Yeah I tried looking at the JS too, but there's just too much in there. I also don't know if you're using the latest version of DrawSVG. If I understand your question correctly, you should be able to resize the screen while the circle draws and it will look fine.


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


  • Like 5
Link to comment
Share on other sites

Thank you for your help, it work great now.

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.