How to change size of SVG circle


Tags: html,css,svg

Problem :

I want to resize my first SVG circle from here, so I made the second, but there is a problem in the animation, the animation is not the same.

HTML:

<div class="loader">
    <svg class="circular">
        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
    </svg>
</div>


<div style="margin-top: 50px;" class="loader">
    <svg class="circular">
        <circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
    </svg>
</div>

CSS:

body, svg, circle {
    margin: 0px !important;
    padding: 0px !important;
}
.loader {
    position: relative;
    margin: 0px auto;
    padding: 0px;
    width: 100px;
    height: 100px;
    zoom: 1;
    background-color: grey;
}
.circular {
    -webkit-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
    height: 100px;
    position: relative;
    width: 100px;
}
.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}
@-webkit-keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%, 90% {
        stroke: #ffa700;
    }
}
@keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%, 90% {
        stroke: #ffa700;
    }
}

How to properly resize it?



Solution :

The stroke-dasharray property of the circle element determine the length of the stroke's dash and the space between two dashes whereas the stroke-dashoffset determines the offset at which the stroke's dash starts. Within the @keyframes rules these properties are getting modified and thus ends up producing the animation effect. When the circle's radius (and thus the circumference) is changed, these properties (set within the keyframes) also have to modified in proportion to the radius.

Since the settings depend on the radius of the circle, I don't think you can keep the same animation (@keyframe) settings for both circles. At any time only one of them can work properly.

In the below snippet I have done the changes that are required to make the bigger circle work.

body,
svg,
circle {
  margin: 0px !important;
  padding: 0px !important;
}
.loader {
  position: relative;
  margin: 0px auto;
  padding: 0px;
  width: 100px;
  height: 100px;
  zoom: 1;
  background-color: grey;
}
.circular {
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}
.path {
  stroke-dasharray: 1, 440;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 440;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -77;
  }
  100% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -272;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 440;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -77;
  }
  100% {
    stroke-dasharray: 89, 440;
    stroke-dashoffset: -272;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
<div style="margin-top: 50px;" class="loader">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="44" fill="none" stroke-width="8" stroke-miterlimit="10" />
  </svg>
</div>


Alternately, if you wish to make the same animation (@keyframe) settings work for both the circles at the same time, then you could consider using a transform: scale to create the bigger circle instead of manually modifying the radius of the circle. (But as you can see, the output is not exactly same as modifying the radius and hence I wouldn't really recommend this).

body,
svg,
circle {
  margin: 0px !important;
  padding: 0px !important;
}
.loader {
  position: relative;
  margin: 0px auto;
  padding: 0px;
  width: 100px;
  height: 100px;
  zoom: 1;
  background-color: grey;
}
.circular {
  -webkit-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@-webkit-keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%,
  90% {
    stroke: #ffa700;
  }
}
.loader2 {
  transform: scale(2.2);
}
<div class="loader">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
  </svg>
</div>


<div style="margin-top: 100px;" class="loader loader2">
  <svg class="circular">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="8" stroke-miterlimit="10" />
  </svg>
</div>


    CSS Howto..

    How can I make the ul list the same size as the input element in terms of width?

    How to pass a css % parameter in javascript/jquery

    How do I fix this div overflow?

    How can I reposition a DIV with jQuery? [closed]

    How can I align my HTML components with CSS?

    Codeigniter shows views differently when index is removed

    How to center a group of images in HTML/CSS?

    Is there a limit to how deep an HTML document or CSS tree can be?

    How to align Facebook, Twitter, Google+ and LinkedIn buttons on the right?

    Remove oval border-radius when 2 digit numbers show up

    how to remove elements in document fragment after append

    How to choose fontstacks

    How to == Model Method Class in Helper for CSS?

    how to disable one header among of multiple headers in jQuery table sorter

    How does Bootstrap Grid really work?

    How to set background color with opacity by css?

    HTML/CSS How to connect a list to h tag and word-spacing

    How to make image hover in css?

    How to create e-commerce website [closed]

    How can I edit a web part's .css file on the fly in MOSS 2007?

    How to align two different font-sizes next to each other?

    joomla: how is the CSS generated?

    Writing CSS rules to different browsers, how? [duplicate]

    How to detect and deliver separate CSS files for mobile devices?

    How to align list items

    How can I apply a custom css rule to small helping arrows that appears on column reordering in Kendo UI grid

    How to attribute different ids to child elements depending on the number of parent-like elements in that container

    How to make a CSS mega menu be on the full width of the page? (998px, but in the middle?)

    how to add a margin on both sides and center the text in a paragraph?

    How to fade out after hover is done using CSS