JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='surface' height='600' width='600' />

CSS

#surface {
    width: 600px;
    height: 600px;
}

JavaScript

function art(options, canvas) {
    var surface = document.getElementById(canvas),
        context = surface.getContext("2d"),
        row,
        col,
        triangleDirection = 1,
        triangleSize = options.triangle.size,
        circleSize = options.circle.size,
        circleStep = Math.sqrt(3) * circleSize * 2,
        circleOffset = 0;

    function shouldDraw(chances) {
        return Math.random() < chances;
    }

    function drawTriangle(x, y, direction, size, ctx) {
        ctx.fillStyle = "rgb(75,128,166)";
        ctx.beginPath();
        ctx.moveTo(x, y - (direction * size));
        ctx.lineTo(x - (direction * size), y + (direction * size));
        ctx.lineTo(x + (direction * size), y + (direction * size));
        ctx.lineTo(x, y - (direction * size));
        ctx.fill();
        ctx.strokeStyle = 'rgb(75,128,166)';
        ctx.stroke();
    }

    function drawCircle(x, y, size, ctx) {
        //circles
        ctx.fillStyle = "rgba(35,121,67,0.8)";
        ctx.beginPath();
        ctx.arc(x, y, size, 0, 2 * Math.PI, false);
        ctx.fill();
    }

    //Draw Tiangles
    for (col = 1; col < (surface.width / triangleSize); col++) {
        for (row = 1; row < (surface.height / triangleSize); row++) {
            if (shouldDraw(options.triangle.density)) {
                drawTriangle(row * triangleSize, col * triangleSize * 2, triangleDirection, triangleSize, context);
            }
            //Swap direction
            triangleDirection = -1 * triangleDirection;
        }
    }
    //Draw Circles
    for (row = 1; row < (surface.height / circleSize) - 1; row++) {
        for (col = 1; col < (surface.width / circleStep) - 1; col++) {
            if (shouldDraw(options.circle.density)) {
                drawCircle((row * circleSize), (col * circleStep) + circleOffset, circleSize, context);
            }
        }
        //swap offset by row
        if (row % 2 === 0) {
            circleOffset = circleStep / 2;
        } else {
    ...