A Pen by Kurt MacDonald.

index.html

<div id="snapshots-diagram" class="add_vm_callout hidden">
  <div class="svg-wrap">
    <svg version="1.1" id="Vertical" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <g class="now">
      <rect x="37.854" y="1" fill="none" width="24.5" height="8.75"/>
      <text transform="matrix(1 0 0 1 43.7565 5.4248)" fill="#605D56" font-family="Lato" font-size="6">Now</text>
    </g>
    <g class="hourly">
      <g class="left">
        <rect x="0.604" y="20.125" fill="none" width="24.5" height="8.75"/>
        <text transform="matrix(1 0 0 1 1.0836 24.5498)" fill="#605D56" font-family="Lato" font-size="6">12 hours</text>
      </g>
      <g class="right">
        <rect x="74.896" y="20.125" fill="none" width="24.5" height="8.75"/>
        <text transform="matrix(1 0 0 1 74.8958 24.5498)" fill="#605D56" font-family="Lato" font-size="6">Hourly</text>
      </g>
    </g>
    <g class="daily">
      <g class="left">
        <rect x="0.604" y="50" fill="none" width="24.5" height="8.75"/>
        <text transform="matrix(1 0 0 1 7.61 54.4248)" fill="#605D56" font-family="Lato" font-size="6">7 days</text>
      </g>
      <g class="right">
        <rect x="74.896" y="50" fill="none" width="24.5" height="8.75"/>
        <text transform="matrix(1 0 0 1 74.8958 54.4248)" fill="#605D56" font-family="Lato" font-size="6">Daily</text>
      </g>
    </g>
    <g class="weekly">
      <g class="left">
        <rect x="0.604" y="80" fill="none" width="24.5" height="8.75"/>
        <text transform="matrix(1 0 0 1 2.9987 84.4248)" fill="#605D56" font-family="Lato" font-size="6">4 weeks</text>
      </g>
      <g class="right">
        <rect x="74.896" y="80" fill="none" width="24.5" height="8.75"/>
        <text transform="matrix(1 0 0 1 74.8958 84.4248)" fill="#605D56" font-family="Lato" font-size="6">Weekly</text>
      </g>
    </g>
    <g class="hours">
      <path class="snapshot-object" fill="#006699" d="M71.854,12.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75v0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75v0C72.604,12.164,72.268,12.5,71.854,12.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,14.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75v0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75v0C72.604,14.164,72.268,14.5,71.854,14.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,16.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75v0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75v0C72.604,16.164,72.268,16.5,71.854,16.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,18.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,18.164,72.268,18.5,71.854,18.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,20.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,20.164,72.268,20.5,71.854,20.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,22.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,22.164,72.268,22.5,71.854,22.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,24.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,24.164,72.268,24.5,71.854,24.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,26.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,26.164,72.268,26.5,71.854,26.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,28.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,28.164,72.268,28.5,71.854,28.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,30.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,30.164,72.268,30.5,71.854,30.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,32.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,32.164,72.268,32.5,71.854,32.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,34.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,34.164,72.268,34.5,71.854,34.5z"/>
    </g>
    <g class="days">
      <path class="snapshot-object" fill="#006699" d="M71.854,41.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,41.164,72.268,41.5,71.854,41.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,45.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,45.164,72.268,45.5,71.854,45.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,49.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,49.164,72.268,49.5,71.854,49.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,53.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,53.164,72.268,53.5,71.854,53.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,57.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,57.164,72.268,57.5,71.854,57.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,61.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,61.164,72.268,61.5,71.854,61.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,65.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,65.164,72.268,65.5,71.854,65.5z"/>
    </g>
    <g class="weeks">
      <path class="snapshot-object" fill="#006699" d="M71.854,74.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,74.164,72.268,74.5,71.854,74.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,80.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,80.164,72.268,80.5,71.854,80.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,86.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,86.164,72.268,86.5,71.854,86.5z"/>
      <path class="snapshot-object" fill="#006699" d="M71.854,92.5h-43.5c-0.414,0-0.75-0.336-0.75-0.75l0,0c0-0.414,0.336-0.75,0.75-0.75h43.5
        c0.414,0,0.75,0.336,0.75,0.75l0,0C72.604,92.164,72.268,92.5,71.854,92.5z"/>
    </g>
    <g class="dividers">
      <g>
        <g>
            <line fill="none" stroke="#93BBDF" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="1,1" x1="23.676" y1="8" x2="76.533" y2="8"/>
          <g>
            <circle fill="#93BBDF" cx="23.732" cy="8" r="1.128"/>
          </g>
          <g>
            <circle fill="#93BBDF" cx="76.476" cy="8" r="1.128"/>
          </g>
        </g>
      </g>
      <g>
        <g>
            <line fill="none" stroke="#93BBDF" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="1,1" x1="23.676" y1="98" x2="76.533" y2="98"/>
          <g>
            <circle fill="#93BBDF" cx="23.732" cy="98" r="1.128"/>
          </g>
          <g>
            <circle fill="#93BBDF" cx="76.476" cy="98" r="1.128"/>
          </g>
        </g>
      </g>
      <g>
        <g>
            <line fill="none" stroke="#93BBDF" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="1,1" x1="23.676" y1="68" x2="76.533" y2="68"/>
          <g>
            <circle fill="#93BBDF" cx="23.732" cy="68" r="1.128"/>
          </g>
          <g>
            <circle fill="#93BBDF" cx="76.476" cy="68" r="1.128"/>
          </g>
        </g>
      </g>
      <g>
        <g>
            <line fill="none" stroke="#93BBDF" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="1,1" x1="23.676" y1="38" x2="76.533" y2="38"/>
          <g>
            <circle fill="#93BBDF" cx="23.732" cy="38" r="1.128"/>
          </g>
          <g>
            <circle fill="#93BBDF" cx="76.476" cy="38" r="1.128"/>
          </g>
        </g>
      </g>
    </g>
    </svg>
  </div>
</div>

script.js

// Click on the diagram to restart the animation.
$('#snapshots-diagram').on('click', function(e) {
  e.preventDefault;

  var $snapshotsDiagram = $('#snapshots-diagram'),
      $svgWrap = $('#snapshots-diagram .svg-wrap'),
      $clone = $svgWrap.clone().removeClass('animate');

  $svgWrap.remove();
  $snapshotsDiagram.append($clone);

  // Need to query for .svg-wrap again because the old reference was removed.
  $('#snapshots-diagram .svg-wrap').addClass('animate');

});

Snapshots-Animation.markdown

Snapshots Animation

Animated SVG to illustrate the consecutive nature of the snapshots schedule for a backup system.

A Pen by Kurt MacDonald on CodePen.

License.

style.less

#snapshots-diagram {
  width: 350px;
  height: 400px;
  .title {
    font-size: 14px;
    margin-bottom: 0;
  }
  .svg-wrap {
    height: 0;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    padding-top: 100%;
    position: relative;
  }
  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .animate {
    .hourly {
      .right {
        opacity: 0;
        animation: appearance 10s 0s ease 1 forwards;
      }
      .left {
        opacity: 0;
        animation: appearance 8s 2s ease 1 forwards;
      }
    }

    .hours {
      .snapshot-object {
        opacity: 0;
        animation: entrance 10s 0s ease 1 forwards;
      }
      :nth-child(2) {
        animation-duration: 9.9s;
        animation-delay: 0.1s;
      }
      :nth-child(3) {
        animation-duration: 9.8s;
        animation-delay: 0.2s;
      }
      :nth-child(4) {
        animation-duration: 9.7s;
        animation-delay: 0.3s;
      }
      :nth-child(5) {
        animation-duration: 9.6s;
        animation-delay: 0.4s;
      }
      :nth-child(6) {
        animation-duration: 9.5s;
        animation-delay: 0.5s;
      }
      :nth-child(7) {
        animation-duration: 9.4s;
        animation-delay: 0.6s;
      }
      :nth-child(8) {
        animation-duration: 9.3s;
        animation-delay: 0.7s;
      }
      :nth-child(9) {
        animation-duration: 9.2s;
        animation-delay: 0.8s;
      }
      :nth-child(10) {
        animation-duration: 9.1s;
        animation-delay: 0.9s;
      }
      :nth-child(11) {
        animation-duration: 9.0s;
        animation-delay: 1.0s;
      }
      :nth-child(12) {
        animation-duration: 8.9s;
        animation-delay: 1.1s;
      }
    }

    .daily {
      .right {
        opacity: 0;
        animation: appearance 7s 3s ease 1 forwards;
      }
      .left {
        opacity: 0;
        animation: appearance 5.75s 4.25s ease 1 forwards;
      }
    }

    .days {
      .snapshot-object {
        opacity: 0;
        animation: entrance 7s 3s ease 1 forwards;
      }
      :nth-child(2) {
        animation-duration: 6.9s;
        animation-delay: 3.1s;
      }
      :nth-child(3) {
        animation-duration: 6.8s;
        animation-delay: 3.2s;
      }
      :nth-child(4) {
        animation-duration: 6.7s;
        animation-delay: 3.3s;
      }
      :nth-child(5) {
        animation-duration: 6.6s;
        animation-delay: 3.4s;
      }
      :nth-child(6) {
        animation-duration: 6.5s;
        animation-delay: 3.5s;
      }
      :nth-child(7) {
        animation-duration: 6.4s;
        animation-delay: 3.6s;
      }
    }

    .weekly {
      .right {
        opacity: 0;
        animation: appearance 5s 5s ease 1 forwards;
      }
      .left {
        opacity: 0;
        animation: appearance 4s 6s ease 1 forwards;
      }
    }

    .weeks {
      .snapshot-object {
        opacity: 0;
        animation: entrance 5s 5s ease 1 forwards;
      }
      :nth-child(2) {
        animation-duration: 4.9s;
        animation-delay: 5.1s;
      }
      :nth-child(3) {
        animation-duration: 4.8s;
        animation-delay: 5.2s;
      }
      :nth-child(4) {
        animation-duration: 4.7s;
        animation-delay: 5.3s;
      }
    }
  }
}

@keyframes appearance {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes entrance {
  0% {
    opacity: 1;
    transform: translateX(-200px);
  }
  20% {
    opacity: 1;
    transform: translateX(0px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}