Sort paths in circle

by Grzegorz Matyszewski

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<h1>Sort paths in circle</h1>
<svg viewBox="0 0 200 200" width="200px" height="200px">
  <circle cx="100" cy="100" r="90" stroke="#ff0000" fill="none" stroke-width="10" stroke-dasharray="1,4"/>
</svg>

<svg id="circle"width="200px" height="200px" viewBox="0 0 200 200">
    <rect width="200" height="200"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M0,100h10.2"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M0,103.5l10.2-0.3"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M0,96.5l10.2,0.3"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M0.2,107l10.2-0.7"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M0.2,93l10.2,0.7"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M0.5,110.4l10.1-1.1"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M0.5,89.6l10.1,1.1"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M1,113.9l10.1-1.4"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M1,86.1l10.1,1.4"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M1.5,117.4l10-1.8"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M1.5,82.6l10,1.8"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M10.1,143.8l9.2-4.4"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M10.1,56.2l9.2,4.4"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M100,0v10.2"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M100,200v-10.2"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M103.5,0l-0.3,10.2"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M103.5,200l-0.3-10.2"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1" d="M107,0.2l-0.7,10.2"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="1"...

CSS

#result { font-family: monospace; margin-top: 20px; }

TypeScript

function getX(path) {
  const x = $(path).attr('d').slice(1).split(',')[0];
	return x;
}

function getY(path) {
  const y = $(path).attr('d').slice(1).replace(/([a-z ])/gi, ',').split(',')[1];
  console.log({ d: $(path).attr('d'), y: y });
	return y;
}

function angle(cx, cy, ex, ey) {
  var dy = ey - cy;
  var dx = ex - cx;
  var theta = Math.atan2(dy, dx); // range (-PI, PI]
  theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
  //if (theta < 0) theta = 360 + theta; // range [0, 360)
  return theta;
}

function getAngle(path) {
	return angle(getX(path), getY(path), 100, 100);
}

const sorted = $('#circle path').toArray().sort((pathA, pathB) => {
    return getAngle(pathA) - getAngle(pathB);
});


const result = sorted.map((path) => {
    return '<path fill="#01a982" d="' + $(path).attr('d') + '" />';
}).join("\n");

/* $('#result').text(result); */


TweenMax.staggerFromTo($('#sorted path'), 0.6, {
	  scale: 0,
  }, {
    scale: 1,
    repeat: -1,
    yoyo: true,
  }, 0.05);