CODEWITHSUNDEEP
javascriptjquerycsssvggeometry
JonCode
JonCode

Reputation: 241

Increasing the size of an SVG circle

I came across this fiddle:

http://jsfiddle.net/wz32sy7y/1/

I'm having a hard time understanding how I would expand the circle to have a bigger radius.

I tried change the radius property r, but this desynchronizez the animation.

The radius seems to be some magical number, but I cannot determine how it's calculated. 

 <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" class="circle_animation" r="79.85699"
       cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
 </svg>

Upvotes: 3

Views: 3275

Answers (2)

Richard Peterson
Richard Peterson

Reputation: 883

The following fiddle will allow you to set the width arbitrarily, using the tag and the "r" attribute, and not changing your CSS every time. Try changing the value in the "r" attribute in the SVG to whatever you like.

https://jsfiddle.net/ma46yjvx/1/

Dash offset animation in SVG works by making a really long dash, using SVG's dashed outline features, and then creeping the border along that path, using an offset in pixels. It makes it look like it is drawing.

So when we scale the radius, we need to scale the amount that we offset the dash per animation step. Thus, using the same magic number the author used (dunno where it comes from, but it works!), we have this:

var time = 10;
var initialOffset = '440';
var i = 1
var r = $(".circle_animation").attr("r"); //Get the radius, so we can know the multiplier
var interval = setInterval(function() {
    $('.circle_animation').css(
        'stroke-dashoffset',
        initialOffset-(i*(initialOffset/time)*(r/69.85699)) //Scale it!
    );
    $('h2').text(i);
    if (i == time) {
        clearInterval(interval);
    }
    i++;  
}, 1000);

Upvotes: 1

Michael Laszlo
Michael Laszlo

Reputation: 12239

For a given radius r, the circumference of the circle is 2πr.

The values in this fiddle are slightly off due to rounding, but you can verify that the relationship holds by setting new values for the radius and circumference.

There are three places in the fiddle where the circumference is used. Once in the JavaScript:

var initialOffset = '440';

Twice in the CSS:

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
  transition: all 1s linear;
}

Here is a version of the fiddle where the radius is set to 20 and the circumference to 2 π × 20 = 125.664:

http://jsfiddle.net/6x3rbpfu/1/

Here we set the radius to 50 and the radius to 314.159:

http://jsfiddle.net/6x3rbpfu/2/

Upvotes: 2

Related Questions