JSFiddle - React, Tailwind, and code Playground

by jaimem

HTML

<div id='mapa'></div>

JavaScript

var departamentos = {
  m1: 'M278,466c0,0,10-7.5,10.5-17c0,0,5-16.5,9.5-16.5c0,0,7.5,4.5,11.5,0c0,0,11.5-12,10.5-16.5c0,0,5-3,6.5-2.5S337,410,323,405c0,0-4.5,3-6,0c0,0-3-5.5-7-3.5c0,0-2.5-0.5,1-4c0,0,2-4.5-10.5-4c0,0-6.5,2.5-12-4c0,0-8-3-10.5,12c0,0,0,0.5-11,6.5c0,0-2.5,1.5-5,7c0,0-9.5,3.755-8,12.627c0,0-7.5,7.873-2.5,13.873c0,0,9,5,7.5,10c0,0-3.438,2.5-9.219,2c0,0-9.781,0.5,9.219,6.5L278,466z',
  m2: ' M277.5,466l19,8.5h11c0,0,11.5-16,17-8.5c0,0,12,6,10.5,8.5c0,0,2,1,12.5,0 c0,0,0-25,11.5-22.5c0,0-1-12.745,0-24.373l6-11.127l-6.5-7.5c0,0-9-3.5-12,0s-1.5-3.5-5.5,7.5c0,0,3-2.745,3,11.127 c0,0-1-2.127-7,2.873c0,0,4.457,1-6.271-0.5c0,0-2.271-2.5,0-9.5V411c0,0-4.729,3.591-9.479,4.295c0,0-13.25,2.705-16.25,18.205 c0,0-2.5,2-7-0.5c0,0-5,0.5-10,15L277.5,466z',
  m3: 'M345,410c0,0,5-8,0-13.5c0,0-9-3.49-7.5-7.245c0,0-1-5.755,2.5-11.255 c0,0-15.5-4.5-29-6c0,0-16.5,12-20,11.5c0,0-10,2.5,4,10c0,0,15-2.5,15,1.5c0,0,1,0.5-1.5,5c0,0,3.5,2.5,6,2.5s-2.5,0-2.5,0 s2.262-1.865,5.381,3.067c0,0,3.619,0.933,6.619-0.567c0,0,5.5-2.5,5.5,6c0,0-0.043,19,1.229,19s-1.271,0-1.271,0s2.271,2,8.157,0 l5.886-3.5c0,0,0-15-2.5-10C341,416.5,341,411,345,410z',
  m4: "M367.5,393.5c0,0,1-13.5-2.5-11c0,0-17,1.5-25.5-4c0,0-2.412,5.906-2.608,9.809 c-0.065,1.301,0.115,2.379,0.714,2.941c2.394,2.25,5.838,3.25,9.616,7.25c0,0,0.278,7.5-1.722,10.5c0,0,12-3.5,13.5,0 C359,409,363,393.5,367.5,393.5z",
  m5: 'M360,404c0,0,3.5-7.5,7-11.5c0,0,2-10.5-1-10.5l20.5-3.5v6.5c0,0,1.5,1.5-6,8.75 c0,0-1.5,6.75,0.5,10.25H360z', 
  m6: 'M311,370.5c0,0,31.5,8.5,45.5,12.5c0,0,28.245-4,30.123-5s2.877-14.5-4.623-11 s-5,2.344-12-0.578s-11-1.922-10-7.922l-10.517-9c0,0-10.225-0.5-12.604,6c0,0-15.879-5-15.629,8.5L311,370.5z',
  m7: 'M376,369.5l5.5-3.254c0,0-2.378-8.746-8.189-7.746L360,358.42c0,0-2,0.571,5,7.825 L376,369.5z'
};


var mapa = Raphael("mapa", 1200, 1000);

for(var departamento in departamentos){
  mapa.path(departamentos[departamento])
      .attr({ 
              fill: '#91ACFF',
              stroke: "#566CAF",
          ...