Animate SVG Fill

by aflynt

HTML

<div>

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="35 10.5 84 139.5">
        <linearGradient id="graphic" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
          <stop offset="40%" stop-opacity="1" stop-color="royalblue">
            <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
          </stop>
          <stop offset="40%" stop-opacity="0" stop-color="royalblue">
            <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s"  begin="0s"/>
          </stop>
          <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
      </linearGradient>
  <path
    stroke="#4F4F51"
    fill="url(#graphic)"
    d="M116.4 40.2c0-7.7-1-17.1-10-21.7-3.1-1.5-6.9-2.3-11.2-2.8-1.3-1.8-3.6-2.8-5.9-2.8-4.1 0-7.7 3.3-7.7 7.7s3.3 7.7 7.7 7.7c2.8 0 5.1-1.5 6.4-3.8 10 1.3 12 4.9 12 15.8 0 18.9-16.6 41.4-30.7 41.4S46.4 59.1 46.4 40.2c0-11.2 3.1-14.8 12-15.8 1.3 2.3 3.8 3.8 6.6 3.8 4.1 0 7.7-3.3 7.7-7.7 0-4.1-3.3-7.7-7.7-7.7-2.3 0-4.3 1-5.9 2.8-12 1-21.2 5.6-21.2 24.5 0 22.5 17.4 46 35 49.3v24.8c-7.4 2-12.8 8.7-12.8 16.6 0 9.5 7.7 17.1 17.1 17.1s17.1-7.7 17.1-17.1c0-7.9-5.4-14.6-12.8-16.6V89.5c17.5-3.3 34.9-27.1 34.9-49.3m-28.9 90.7c0 5.9-4.6 10.7-10.5 10.7s-10.5-4.9-10.5-10.7c0-5.9 4.6-10.7 10.5-10.7 5.7-.1 10.5 4.8 10.5 10.7m-10.4-6.7c3.6 0 6.4 2.8 6.4 6.4 0 3.6-2.8 6.4-6.4 6.4-3.6 0-6.4-2.8-6.4-6.4 0-3.3 2.8-6.4 6.4-6.4" />
    </svg>
</div>

CSS

body {
  background-color:gray;
}


div {
  width: 100px;

}

JavaScript

// SOURCES
// http://stackoverflow.com/questions/32645053/is-it-possible-to-make-svg-circle-fill-color-from-bottom-to-top-based-on-percent
// https://github.com/svg/svgo
// https://css-tricks.com/animating-svg-css/