<!-- Learn how to power up your app with Vue.js: https://coding-artist.teachable.com/p/power-up-with-pure-css-images-and-vue-js-to-make-fun-apps -->
<div id="app">
<div class="infographic">
  <img class="poster" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/827672/Inforgraphic.png" />
  
  <svg class="blue-planet" viewBox="0 0 159 162" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Blue-Planet"><ellipse id="Blue-Outer-Circle" cx="79.44" cy="80.76" rx="79.44" ry="80.76" style="fill:#71cdf4;"/><ellipse id="Blue-Inner-Circle-Left" cx="59.04" cy="108.24" rx="17.04" ry="20.16" style="fill:#21bcef;"/><ellipse id="Blue-Inner-Circle-Top" cx="62.4" cy="47.76" rx="17.04" ry="20.16" style="fill:#21bcef;"/><ellipse id="Blue-Inner-Circle-Right" cx="116.88" cy="80.76" rx="17.04" ry="20.16" style="fill:#21bcef;"/></g></svg>
  
  <svg class="yellow-planet" viewBox="0 0 159 162" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Yellow-Planet"><ellipse v-on:click="updateFill" id="Yellow-Outer-Circle" cx="79.44" cy="80.76" rx="79.44" ry="80.76" v-bind:style="yellowOuterCircleFill"/><ellipse id="Yellow-Inner-Circle-Left" cx="59.04" cy="108.24" rx="17.04" ry="20.16" style="fill:#f9c21c;"/><ellipse id="Yellow-Inner-Circle-Top" cx="62.4" cy="47.76" rx="17.04" ry="20.16" style="fill:#f9c21c;"/><ellipse id="Yellow-Inner-Circle-Right" cx="116.88" cy="80.76" rx="17.04" ry="20.16" style="fill:#f9c21c;"/></g></svg>
  
  <svg class="red-planet" viewBox="0 0 159 162" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Red-Planet"><ellipse id="Red-Outer-Circle" cx="79.44" cy="80.76" rx="79.44" ry="80.76" style="fill:#eb4537;"/><ellipse id="Red-Inner-Circle-Left" cx="59.04" cy="108.24" rx="17.04" ry="20.16" style="fill:#db2417;"/><ellipse id="Red-Inner-Circle-Top" cx="62.4" cy="47.76" rx="17.04" ry="20.16" style="fill:#db2417;"/><ellipse id="Red-Inner-Circle-Right" cx="116.88" cy="80.76" rx="17.04" ry="20.16" style="fill:#db2417;"/></g></svg>
</div>
</div>
body{
  background: #FCFCFB;
}
.infographic{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  border: solid 6px black;
  height: 1000px;
  width: 400px;
}

.poster{
  position: absolute;
  height: 100%;
  width: 100%;
}

.blue-planet{
  position: absolute;
  z-index: 2;
  height: 20%;
  width: 20%;
  top: 13%;
  left: 15%;
  animation: gravity 7s infinite;
}

.yellow-planet{
  position: absolute;
  z-index: 2;
  height: 15%;
  width: 15%;
  top: 49%;
  left:5%;
  animation: gravity 5s infinite;
}

.red-planet{
  position: absolute;
  z-index: 2;
  height: 15%;
  width: 15%;
  top: 37%;
  left:12%;
  animation: gravity 5s infinite;
}

@keyframes gravity{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
View Compiled
var app = new Vue({
  el: "#app",
  data: {
    yellowOuterCircleFill: {
      fill: "#FACC39"
    }
  },
  methods: {
    updateFill: function () {
      this.yellowOuterCircleFill.fill = "white"
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js