JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" ref="svg">
    <path v-for="(path, index) in paths" :d="path.d" :fill="hover == index ? hoverColor : path.fill" />
  </svg>

  <ul class="controls">
    <li v-for="(path, index) in paths">
      <h4>Path {{index}}</h4>
      <div>
        <span v-for="color in colors" class="color" :style="{'background-color': color}" @click="path.fill = color" @mouseover="hoverColor = color; hover = index" @mouseout="hover = null"></span>
      </div>
    </li>
  </ul>
</div>

CSS

svg {
  width: 400px;
  height: 400px;
  display: inline-block;
}

.controls {
  display: inline-block;
}

span.color {
  display: inline-block;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

path {
  transition: .2s all;
}

JavaScript

var PATHS = ['M25 48H0V0h25v48zM2 46h21V2H2v44z', 'M48 48H23V17.8h25V48zm-23-2h21V19.8H25V46zM4.7 5.3h2V12h-2zM4.7 15.4h2v6.8h-2zM4.7 25.5h2v6.8h-2zM4.7 35.6h2v6.7h-2zM18 5.3h2V12h-2zM18 15.4h2v6.8h-2zM18 25.5h2v6.8h-2zM11.5 5.3h2V12h-2zM11.5 15.4h2v6.8h-2zM11.5 25.5h2v6.8h-2z', 'M28 30h2v3.8h-2zM41 30h2v3.8h-2zM34.6 30h2v3.8h-2zM28 23h2v4h-2zM41 23h2v4h-2zM34.6 23h2v4h-2zM18 35.6h2v6.7h-2zM16.3 48H8.6V34.6h7.7V48zm-5.7-2h3.7v-9.4h-3.7V46zM42.7 48H28.4V35.4h14.3V48zm-12.3-2h10.3v-8.6H30.4V46z']

new Vue({
  el: '#app',
  data: {
    paths: [],
    colors: ['black', '#1abc9c', '#2ecc71', '#3498db', '#9b59b6', '#34495e'],
    hover: null,
    hoverColor: null
  },
  created: function() {
    this.paths = PATHS.map(function(d) {
      return {
        d: d,
        fill: 'black',
      };
    });
  }
});