SVG Egg Animation

by mamounothman

HTML

<div id="stage">
    <div class="egg-holder">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 104.7 144.3" enable-background="new 0 0 104.7 144.3" xml:space="preserve">
            
            <defs>
                <linearGradient id="orangeGradient"
                                x1="0%" y1="0%"
                                x2="0%" y2="100%"
                                spreadMethod="pad">
                    <stop offset="0%"   stop-color="#ff9800" stop-opacity="1"/>
                    <stop offset="100%" stop-color="#e65100" stop-opacity="1"/>
                </linearGradient>
          </defs>
            
            <g id="egg-grey">
                <path fill="#FFFFFF" stroke="#212121" stroke-width="10" stroke-miterlimit="10" d="M99.3,92.2c0,25.7-20.8,46.5-46.5,46.5 S6.3,117.8,6.3,92.2S27.2,5.7,52.8,5.7S99.3,66.5,99.3,92.2z"/>
            </g>
            <g id="egg-orange">
                <path fill="none" stroke="url(#orangeGradient)" stroke-width="10" stroke-miterlimit="10" d="M99.3,92.2c0,25.7-20.8,46.5-46.5,46.5 S6.3,117.8,6.3,92.2S27.2,5.7,52.8,5.7S99.3,66.5,99.3,92.2z"/>
            </g>
        </svg>
        <div class="timer">
            <p></p>
        </div>
    </div>
</div>

CSS

#stage {
    position: relative;
    max-width: 300px;
}

.egg-holder {
    margin: 0 auto;
    position: relative;
}

.timer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 100;
}

.timer p {
    margin: 0;
    font-size: 40px
}

JavaScript

var path = document.querySelector('#egg-orange path');
var length = path.getTotalLength();
var percent = length/100;
var desiredPercent = 70;
var currentPercent = percent * (100 - desiredPercent); // 30%
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
  'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = currentPercent;

(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});

        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;

        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);

            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals)+'%');

                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }

                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;

                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
         ...