Cacher is the code snippet organizer for pro developers

<div id="app">
<svg viewbox="0 0 300 300" width="300" height="300">
  <circle r=50 cx=150 cy=150 @click="active = !active" :class="{'active': active}"></circle>
</svg>
</div>

new Vue({
  el: "#app",
  data: {
    active: false
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

circle{
  fill: #333;
  transition: all 0.4s cubic-bezier(.96,.04,.04,.96);
  stroke: rgb(119, 0, 255);
  stroke-width: 1px;
}
.active{
  fill: white;
  stroke-width: 50px;
}