JSFiddle - React, Tailwind, and code Playground

by hrsetyono

HTML

<button id="button">Rotate 90deg</button>
<div id="canvas"></div>

CSS

tspan {
  font-size: 16px;
}

JavaScript

var countries = [
  "United States", "Canada", "Mexico", "England"
];

// CONSTANT --------------------
var CANVAS = document.getElementById("canvas");
var CANVAS_SIZE = 600;
var CIRCLE_SIZE = 300;

// PAPER --------------
var paper = Raphael(CANVAS, CANVAS_SIZE, CANVAS_SIZE);

// CREATE PATH -------------------
var radius = CIRCLE_SIZE / 2;
var canvasCenter = CANVAS_SIZE / 2;

var startingPath = "M " + (radius + canvasCenter) + "," + canvasCenter;
var arcPath = "a" + radius + ", " + radius + ", 0 1,0 0,0.001 z";

var path = paper.path(startingPath + " " + arcPath);
path.attr("stroke", "#ddd");

// DRAW THE TEXT ------------------
var drawText = function(country, index) {
  var pathLength = path.getTotalLength();
  var pointLength = (pathLength / countries.length) * index;
  var point = path.getPointAtLength(pointLength);
   
  var text = paper.text(point.x, point.y, country);
    
  // Rotate the text while keeping it readable
  var degree = Raphael.angle(canvasCenter, canvasCenter, point.x, point.y);
  if(degree > 271 || degree < 75) {
    text.transform("r" + degree)
      .attr("text-anchor", "end");
  } else {
    text.transform("r" + (degree - 180) )
      .attr("text-anchor", "start");
  }
}

// LOOP and SAVE TO SET ---------------
paper.setStart();
for(var i = 0; i < countries.length; i++) {
  drawText(countries[i], i);
}
var set = paper.setFinish();

// How to make the set rotate?
var degree = 0;
function rotateSet() {
  degree = degree + 90;
  var x = CANVAS_SIZE / 2;
  var y = x;
  
  set.forEach(function(e) {
    var textDegree = Math.round( Raphael.angle(e.attr("x"), e.attr("y"), x, y) );

    if(e.attr("text-anchor") === "end") {
      textDegree = textDegree - 180;
    }

    e.animate({
      transform: ["r", degree, x, y, "r", textDegree, e.attr("x"), e.attr("y")]
    }, 500);
  });
}

document.getElementById("button").addEventListener("click", function() {
  rotateSet();
}, false);