JSFiddle - React, Tailwind, and code Playground

HTML

<div id=canvas_container></div>

CSS

#canvas_container {
    height:100%;
    background-color:silver;
}

JavaScript

$.getScript("//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js", function(){
    
    var paper = new Raphael(document.getElementById('canvas_container'), '100%', '100%');
    $('<pattern id="mygrid" width="10" height="10" patternUnits="userSpaceOnUse">\
        <polygon points="5,0 10,10 0,10" stroke="black" />\
        </pattern>').appendTo('svg defs');

    var circle = paper.circle(60, 60, 50);
    circle.attr("fill","url(#mygrid)");
    
});