JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<div id="paper"></div>

JavaScript

var paper = Raphael('paper', 500, 500);

// CLICK ON EACH SHAPE TO SEE THE SETTING USED
// IN CONSOLE.LOG

// stroke-dasharray
var strokeDasharray = ["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."];

for (var i = 0; i < strokeDasharray.length; i++) {
    function loop1(dash) {
        var circle = paper.circle(60+i*35,60,50);
        circle.attr({'stroke-dasharray': dash, fill: '#ffffff'});
        circle.click(function() {
          console.log( 'stroke-dasharray: ', dash );
        });
    }
    loop1(strokeDasharray[i]);
};


// stroke-linejoin

var lineJoin = ["bevel", "round", "miter"];

for (var i = 0; i < lineJoin.length; i++) {
    function loop2(join) {
        var path = paper.path('M'+(10+i*105)+' 190,'+(90+i*105)+' 160,'+(90+i*105)+' 220');
        path.attr({'stroke-linejoin': join, 'stroke-width': 20 });
        path.click(function() {
          console.log( 'stroke-linejoin: ', join );
        });
    }
    loop2(lineJoin[i]);
};



// stroke-mitrelimit

// lower number = stricter limit that applies to less sharp angles
// Note cross-browser differences e.g. between Firefox & Chrome

var mitreLimits = [[40,6],[40,7], [50,3],[50,4], [60,2.5],[60,3]];

for (var i = 0; i < mitreLimits.length; i++) {
    function loop3(limit) {
        var path = paper.path('M'+(30+i*65)+' 320,'+(limit[0]+i*65)+' 290,'+(limit[0]+i*65)+' 350');
        path.attr({'stroke-linejoin': 'miter','stroke-width': 20, 'stroke-miterlimit': limit[1] });
        path.click(function() {
          console.log( 'stroke-miterlimit: ', limit[1], 'with x distance of ',limit[0]  );
        });
    }

    loop3(mitreLimits[i]);
};


// stroke-linecap


// note the middle shape's lines are extended

var lineCap = ["butt", "square", "round"];
for (var i = 0; i < lineCap.length; i++) {
    function loop4(cap) {
        var path = paper.path('M'+(10+i*105)+' 420,'+(90+i*105)+' 390,'+(90+i*105)+' 450');
        var path2 = paper.path('M'+(10+i*105)+' 420,'+(90+i*105)+'...