JSFiddle - React, Tailwind, and code Playground

by timo2012

HTML

<script>

// Please change the following parameters and test
var list = "st";
// All possible: "mlcqahvst"
// not work: qs, ts, as
// work: qt, cs, ms, hs, vs, ls, tc, th, tl, tv, qa, ta

var count_of_segs=2;
var start_of_path="M 0 0";
var mycase = "upper"; // "lower", "upper" or "mixed";

</script>
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>-->
<div id="cont">
<b>Testbed of Raphael.path2curve()</b><br>
To create random path below please press ENTER on input or click the picture. Hold ENTER down to repeat.
The blue and red path should be always exactly on top of each other. If not, then Raphael has a bug.
<input id="inp" type="text" style="width:400px;" value="Hold down ENTER here to change picture"><br>
<svg width="400" height="200" style="background-color:#DDDD99;">
    <path id="original_path" d="M0 0" style="fill:none;stroke:blue;stroke-width:2px;stroke-opacity:1.0"/>
    <path id="normalized_path" d="M0 0" style="fill:none;stroke:red;stroke-width:2px;stroke-opacity:0.5"/> 
</svg>
<div id="path_text"></div>
</div>

<script>
window.onload = function() {

    $("svg").click(show_fitted_path);
    $("#inp").keypress(function(e) {
        if (e.which == 13) {
            e.preventDefault();
        }
        show_fitted_path();
    });
    show_fitted_path();
}
    
function show_fitted_path()
{
  var d;
  d=create_path_string();
  //console.log(d);
  $("#original_path").attr("d",d);
  var bb=$("#original_path")[0].getBBox();
  if ( (bb.x<0 || bb.x>400 || bb.y<0 || bb.y>200) || (bb.x+bb.width>400 || bb.y+bb.height>200))
  {
    // too big => make again
    show_fitted_path();  
  }
  else
  {
    var arr=Raphael.path2curve(d);
    var normalized_path = arr.toString().replace(/,/g," ");
    $("#normalized_path").attr("d",normalized_path);
    
    var normalized_path_print = $("#normalized_path").attr("d");
    normalized_path_print = beautify(normalized_path_print,'\n');
    
    var beautified_d = "<font...

CSS

path {shape-rendering:crispEdges}
textarea {width:800px;height:300px;color:red;white-space:pre-wrap;}
#cont {padding:8px;}

JavaScript

// ┌────────────────────────────────────────────────────────────────────┐ \\
// │ Raphaël 2.1.0 - JavaScript Vector Library                          │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright © 2008-2012 Dmitry Baranovskiy (http://raphaeljs.com)    │ \\
// │ Copyright © 2008-2012 Sencha Labs (http://sencha.com)              │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Licensed under the MIT (http://raphaeljs.com/license.html) license.│ \\
// └────────────────────────────────────────────────────────────────────┘ \\
// ┌──────────────────────────────────────────────────────────────────────────────────────┐ \\
// │ Eve 0.3.4 - JavaScript Events Library                                                │ \\
// ├──────────────────────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright (c) 2008-2011 Dmitry Baranovskiy (http://dmitry.baranovskiy.com/)          │ \\
// │ Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. │ \\
// └──────────────────────────────────────────────────────────────────────────────────────┘ \\
(function(glob) {
    var version = "0.3.4",
        has = "hasOwnProperty",
        separator = /[\.\/]/,
        wildcard = "*",
        fun = function() {},
        numsort = function(a, b) {
            return a - b;
        },
        current_event, stop, events = {
            n: {}
        },

        eve = function(name, scope) {
            var e = events,
                oldstop = stop,
                args = Array.prototype.slice.call(arguments, 2),
                listeners = eve.listeners(name),
                z = 0,
                f = false,
                l, indexed = [],
                queue = {},
                out = [],
                ce = current_event,
                errors = [];
            current_event = name;
            stop = 0;
            for (var i = 0, ii =...