JSFiddle - React, Tailwind, and code Playground

by Jimmy Chandra

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg id="surface" width="400" height="400"></svg>

JavaScript

(function(undefined) {
    var 
        toSvgRect = function(pr, pg) {
            var newY1 = pg.height - pr.y1 - 1;
            var newY2 = pg.height - pr.y2 - 1;
            
            var y1 = Math.min(newY1, newY2);
            var y2 = Math.max(newY1, newY2);
            var h = y2 - y1 + 1;
            
            return { x1: pr.x1, y1: y1, width: pr.x2-pr.x1 + 1, height: h };
        },
        flipY = function(r, pg) {            
            if (_.isArray(r)) {
                return _.map(r, function(v,k) {
                    var 
                        ph = pg.height,
                        nY1 = ph - v.y1,
                        nY2 = ph - v.y2,
                        y1 = Math.min(nY1, nY2),
                        y2 = Math.max(nY1, nY2);
                    
                    return { x1: v.x1, y1: y1, x2: v.x2, y2: y2 };
                });
            }
            
            return undefined;
        },
        paper = Snap('#surface'),
        page = { width: parseInt(paper.attr('width'), 10), height: parseInt(paper.attr('height'), 10) },
        rects = [
            { x1:   0, y1:   0, x2:  50, y2:  50 },
            { x1: 350, y1: 350, x2: 400, y2: 400 },
            { x1:   0, y1: 350, x2:  50, y2: 400 },
            { x1: 350, y1:   0, x2: 400, y2:  50 }
        ],
        sr,i,l;
    
    console.log(page);
        
    
    paper.clear();    
    paper
        .rect(0, 0, page.width, page.height)
        .attr({
            'fill': 'rgba(0,0,0,1)',
            'stroke': 'transparent'
        });
    
    rects = flipY(rects, page);
    
    for (i = 0, l = rects.length; i < l; i++) {    
        sr = rects[i];
        paper.rect(sr.x1, sr.y1, sr.x2 - sr.x1 + 1, sr.y2 - sr.y1 + 1)
        .attr('fill-rule', 'evenodd')
        .attr({'fill': 'rgba(127,127,127,1)', 'stroke': 'transparent'});
    }
    
    
    paper.path("M190,205 L225,275 L140,230 L235,230 L150,275 Z")
    .attr({'stroke': '#999944', 'fill-rule':'evenodd',...