SVG Circle Animation

Animates circle without changing the stroke width.

by bryandowning

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<svg version="1.1" class="breadcrumb-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 160 160" enable-background="new 0 0 160 160" xml:space="preserve">
  <circle fill="#FFFFFF" cx="80" cy="80" r="36" style="stroke:#000000; stroke-width: 12;"/>
</svg>

CSS

svg {
  width: 160px;
}

JavaScript

TweenMax.to('.breadcrumb-circle circle', 1, {attr:{r:74}});