JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<svg id="mysvg"></svg>

JavaScript

// 'pts' is a 3x2 array ([3][2]) for the three triangle points
// 'step' is the approximate step distance between lines
function makeTriangle(pts, step) {
    var  ax = pts[0][0];
    var  ay = pts[0][1];
    var  bx = pts[1][0];
    var  by = pts[1][1];
    var  cx = pts[2][0];
    var  cy = pts[2][1];
 
    // Get AC line length
    var  a_dx = cx - ax,
         a_dy = cy - ay;
    var  ac_len = Math.sqrt(a_dx * a_dx + a_dy * a_dy);
    // Get BC line length
    var  b_dx = cx - bx,
         b_dy = cy - by;
    bc_len = Math.sqrt(b_dx * b_dx + b_dy * b_dy);
    
    // Whichever line is shortest will determine the number of steps
    var  len = (ac_len < bc_len) ? ac_len : bc_len;
        
    // ac step amounts
    a_dx = step * a_dx / len;
    a_dy = step * a_dy / len;
    
    // bc step amounts
    b_dx = step * b_dx / len;
    b_dy = step * b_dy / len;
    
    var  poly = [];
     // first two points
    poly.push(ax);
    poly.push(ay);
    poly.push(bx);
    poly.push(by);
    while (len > step) {
        // step along the ac and bc lines
        ax += a_dx;
        ay += a_dy;
        bx += b_dx;
        by += b_dy;
        // add the line going from the bc line to the ac line
        poly.push(bx);
        poly.push(by);
        poly.push(ax);
        poly.push(ay);
        len -= step;
        if (len < step) break;
        // step again
        ax += a_dx;
        ay += a_dy;
        bx += b_dx;
        by += b_dy;
        // add line going back again
        poly.push(ax);
        poly.push(ay);
        poly.push(bx);
        poly.push(by);
        len -= step;
    }
    poly.push(cx);
    poly.push(cy);

    // Now we have all our points, build the SVG element
    var  svg = document.getElementById("mysvg");

    var  tri = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
    tri.setAttribute("fill", "none");
    tri.setAttribute("stroke", "black");
    tri.setAttribute("stroke-width", 4);
    tri.setAttribute("points",...