JSFiddle - React, Tailwind, and code Playground

by timo2012

HTML

<!--
normalizePath() normalizes SVG path data (d-attribute) to the following subset of path commands: M,C,L,z. Arc (A-command) is converted to L:s, Q:s, C:s according to your choice (argument bezierDegree).
Original normalizePath() code is from:
http://jsfiddle.net/ybochatay/AtTND/3/ which works in IE9 and FF.
This fiddle provides support also in Chrome, Safari and IE.
-->
<b>Scroll down to see the SVG shapes!</b><br><br>
<div id="res"></div>
<svg width="400" height="400">
<path stroke="red" stroke-width="3" d="M30 30 S40 23 23 42 L23,42 C113.333,113.333 136.667,113.333 150,80 t40,50 T230,240 q20 20 54 20 s40 23 23 42 t20,30 a20,30 0,0,1 -50,-50 M250 230 A 45 90, 20, 1, 1, 275 275L 275 230 Z"/>
<path stroke="black" stroke-width="1" d="M30 30 S40 23 23 42 L23,42 C113.333,113.333 136.667,113.333 150,80 t40,50 T230,240 q20 20 54 20 s40 23 23 42 t20,30 a20,30 0,0,1 -50,-50 M250 230 A 45 90, 20, 1, 1, 275 275L 275 230 Z"/>
</svg>

CSS

path {
    fill:none;
    //stroke:blue;
    //stroke-width:5;   
}

JavaScript

// Helper function to determine if the original segment is removed when appended to other path
// IE9 and FF leaves original pathSegList intact, but
// Safari, Opera and Chrome removes segment
function original_is_removed()
{
var path1 = document.createElementNS('http://www.w3.org/2000/svg','path');
var path2 = document.createElementNS('http://www.w3.org/2000/svg','path');
var seg1 = path1.createSVGPathSegMovetoAbs(10,10);
path1.pathSegList.appendItem(seg1);
var before_numberOfItems = path1.pathSegList.numberOfItems;
path2.pathSegList.appendItem(seg1);
var after_numberOfItems = path1.pathSegList.numberOfItems;
return (before_numberOfItems !== after_numberOfItems);
}

// Helper function to clone segments in browsers where the original segment is removed when appended to other path
function clone_seg(seg)
{
    var path = document.createElementNS("http://www.w3.org/2000/svg",'path'),
    letter = seg.pathSegTypeAsLetter;
    var letter_lowercase=letter.toLowerCase(),
    letter_uppercase=letter.toUpperCase(),
    method = 'createSVGPathSeg';

    switch (letter_lowercase)
    {
        case 'z' : method+='ClosePath'; break;
        case 'm' : method+='Moveto'; break;
        case 'l' : method+='Lineto'; break;
        case 'c' : method+='CurvetoCubic'; break;
        case 'q' : method+='CurvetoQuadratic'; break;
        case 'a' : method+='Arc'; break;
        case 'h' : method+='LinetoHorizontal'; break;
        case 'v' : method+='LinetoVertical'; break;
        case 's' : method+='CurvetoCubicSmooth'; break;
        case 't' : method+='CurvetoQuadraticSmooth'; break;
    }
           
    if (letter_lowercase!=="z")
    {
        if (letter_uppercase === letter) method+='Abs';
        else method+='Rel';
    }
  var args = [];

  switch (letter_lowercase)
  { 
      case 'm' : args.push(seg.x,seg.y); break;
      case 'h' : args.push(seg.x); break;
      case 'v' : args.push(seg.y); break;
      case 'l' : args.push(seg.x,seg.y); break;
      case 'c' :...