JSFiddle - React, Tailwind, and code Playground

by solex16

HTML

<svg viewBox="0 0 200 400" width="200" height="400">
    <defs>
      <pattern id="TrianglePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 10 10">
      <path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue"/>
    </pattern> 
  </defs>
  <path transform="translate(0,0)" d="M0,370 0,0 62,62 62,308 Z" fill="url(#TrianglePattern)" stroke="red" stroke-width="3" opacity="1"></path>
</svg>

<canvas class="myCanvas" id="myCanvas" style="border:1px solid black" width="200" height="400"></canvas>

JavaScript

var canvas = new fabric.Canvas('myCanvas');

var scale = 0.5;

var svg = '<svg viewBox="0 0 200 400" width="200" height="400">';

svg += '<defs><pattern id="TrianglePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" viewBox="0 0 10 10"><path d="M 0 0 L 7 0 L 3.5 7 z" fill="red" stroke="blue"/></pattern></defs>';

svg += '<path transform="scale('+scale+')" d="M0,370 0,0 62,62 62,308 Z" fill="url(#TrianglePattern)" stroke="red" stroke-width="3" opacity="1"></path></svg>';


fabric.loadSVGFromString(svg, function(objects, options) {
    var obj = fabric.util.groupSVGElements(objects, options);
    canvas.add(obj);
});