<!-- 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"
}
}
})
This Pen doesn't use any external CSS resources.