[A responsive svg circle animation]

Thank you for your help, it work great now.

[A responsive svg circle animation]

Hello, my bad, I update the link.

[A responsive svg circle animation]

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>

svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  border: 0px solid red;
  transform: rotate(-90deg);

  circle {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2px;
  }
}

TweenMax.from(
  this.refs.circle,
  this.state.animDuration,
  {
    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.