<button class="start-whole">Whole Bicycle</button>
<button class="start-partial">Partial Bicycle</button>
<button class="erase-whole">Erase Bicycle</button>
<svg width="2304" height="1792" viewBox="0 0 2304 1792" xmlns="http://www.w3.org/2000/svg"><path id="icon" stroke="brown" fill="none" stroke-width="10" d="M762 1152h-314q-40 0-57.5-35t6.5-67l188-251q-65-31-137-31-132 0-226 94t-94 226 94 226 226 94q115 0 203-72.5t111-183.5zm-186-128h186q-18-85-75-148zm480 0l288-384h-480l-99 132q105 103 126 252h165zm1120 64q0-132-94-226t-226-94q-60 0-121 24l174 260q15 23 10 49t-27 40q-15 11-36 11-35 0-53-29l-174-260q-93 95-93 225 0 132 94 226t226 94 226-94 94-226zm128 0q0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-97 39.5-183.5t109.5-149.5l-65-98-353 469q-18 26-51 26h-197q-23 164-149 274t-294 110q-185 0-316.5-131.5t-131.5-316.5 131.5-316.5 316.5-131.5q114 0 215 55l137-183h-224q-26 0-45-19t-19-45 19-45 45-19h384v128h435l-85-128h-222q-26 0-45-19t-19-45 19-45 45-19h256q33 0 53 28l267 400q91-44 192-44 185 0 316.5 131.5t131.5 316.5z"/></svg>

<!-- https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/bicycle.svg -->
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
}

svg {
  display: block;
  width: 100%;
  height: 350px;
}

button {
  background: wheat;
  border: 1px solid black;
  font-family: 'Lato';
  border-radius: 5px;
  padding: 8px;
  margin: 20px 0;
  outline: none;
  cursor: pointer;
}
var heading = document.querySelector("h1");
var startWhole = document.querySelector(".start-whole");
var startPartial = document.querySelector(".start-partial");
var eraseWhole = document.querySelector(".erase-whole");

var wholeAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 0%" },
  { draw: "0% 100%" },
  { duration: 10000}
);

var partialAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 5%" },
  { draw: "95% 100%" },
  { duration: 10000}
);

var eraseAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 100%" },
  { draw: "0% 0%" },
  { duration: 5000}
);

startWhole.addEventListener(
  "click",
  function() {
    wholeAnimation.start();
  },
  false
);

startPartial.addEventListener(
  "click",
  function() {
    partialAnimation.start();
  },
  false
);

eraseWhole.addEventListener(
  "click",
  function() {
    eraseAnimation.start();
  },
  false
);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300,900

External JavaScript

  1. https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js
  2. https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js