<button class="rotate">Rotate</button>
<button class="scale">Scale</button>
<button class="translate">Translate</button>
<button class="skewx">Skew X</button>
<svg id="morph-example" xmlns="http://www.w3.org/2000/svg">
    <rect x="100" y="100" width="100" height="100" fill="blue"/>
    <circle r="50" cx="400" cy="150" fill="red"/>
</svg>

body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
  width: 560px;
}

#bookmark-a, #bookmark-b {
  display: none;
}

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

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 rotateButton = document.querySelector(".rotate");
var scaleButton = document.querySelector(".scale");
var translateButton = document.querySelector(".translate");
var skewxButton = document.querySelector(".skewx");

var rotation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { rotate: 360 } },
  { repeat: 1, yoyo: true }
);

var scaling = KUTE.allTo(
  "rect, circle",
  { svgTransform: { scale: 1.5 } },
  { repeat: 1, yoyo: true }
);

var translation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { translate: [100, -50] } },
  { repeat: 1, yoyo: true }
);

var skewing = KUTE.allTo(
  "rect, circle",
  { svgTransform: { skewX: 25 } },
  { repeat: 1, yoyo: true }
);


rotateButton.addEventListener(
  "click",
  function() {
    rotation.start();
  },
  false
);

scaleButton.addEventListener(
  "click",
  function() {
    scaling.start();
  },
  false
);

translateButton.addEventListener(
  "click",
  function() {
    translation.start();
  },
  false
);

skewxButton.addEventListener(
  "click",
  function() {
    skewing.start();
  },
  false
);