JSFiddle - React, Tailwind, and code Playground

by demee

HTML

<div id="canvas"></div>

CSS

#canvas {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}

JavaScript

Raphael.fn.triangle = function(x, y, a, b){
    var path = ['M', x + a, y, 'L', x, y, 'L', x, y - b, 'Z'].join(' ');
    return this.path(path);
};
    
   
var paper = Raphael('canvas');

var x = 10, 
    y = 350, 
    a = 400, 
    b = 300, 
    paths = [], 
    step = 25; 

paper.triangle(x, y, a, b);

for(var i = y; i > y - b; i -= step){
    var w = (i - y + b) * a/b;
    paths.push({x: x, y: i, xx: x + w, yy: i});
}

for(var j = 0; j < paths.length; j+=2){   
   if(typeof paths[j + 1] === 'undefined') break; 
    var path = ['M', paths[j].x, paths[j].y, 'L', paths[j].xx, paths[j].yy, 
                'L', paths[j + 1].xx, paths[j + 1].yy, 'L', paths[j + 1].x, paths[j + 1].y, 
                'Z']; 
    var l = paper.path(path);
    l.attr({fill: '#666', opacity: 0.5});          
}

paths = []; 

for(var i = x; i < x + a; i += step){
    var w = (i - x - a) * b/a;
    paths.push({x: i, y: y, xx: i, yy: y + w});
}

for(var j = 0; j < paths.length; j+=2){    
    if(typeof paths[j + 1] === 'undefined') break; 
    var path = ['M', paths[j].x, paths[j].y, 'L', paths[j].xx, paths[j].yy, 
                'L', paths[j + 1].xx, paths[j + 1].yy, 'L', paths[j + 1].x, paths[j + 1].y, 
                'Z']; 
    var l = paper.path(path);
    l.attr({fill: '#666', opacity: 0.5});          
}