<canvas id="canvas-1" width="300" height="300"></canvas>
<canvas id="canvas-2" width="300" height="300"></canvas>

/* ================= canvas 1 ================= */
(function() {
  const shape = {
    path: new Path2D('M34.37,124.58c0,.68-.62,1.36-.94,2a7.91,7.91,0,0,1-2-1.21,129.46,129.46,0,0,1-24-39.76c-8-21.41-8.9-43.18-5.65-65.43C2.71,13.6,25.21,3.2,31.27,0c.5-.27,2.78,1.23,2.78,1.9Z'),
    width: 34.37,
    height: 126.62,
  };
  const radius = 123;

  const matrix = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
  const canvas = document.querySelector('#canvas-1');
  const ctx = canvas.getContext('2d');

  const path = new Path2D();
  path.addPath(shape.path, matrix.translate(-radius, -shape.height * 0.35));

  const result = new Path2D();
  for (let a = 0; a < 360; a += 60) {
    result.addPath(path, matrix.translate(canvas.width / 2, canvas.height / 2).rotate(a));
  }

  ctx.fillStyle = '#ffc32a';
  ctx.fill(result);
})();

/* ================= canvas 2 ================= */

function loadImg(src) {
  return new Promise(resolve => {
    const img = new Image();
    img.addEventListener('load', () => resolve(img));
    img.src = src;
  });
}

(async function() {
  const canvas = document.querySelector('#canvas-2');
  const ctx = canvas.getContext('2d');
  const img = await loadImg('https://dev.thesociety.site/wefwfwefwewfdss/vr.svg');
  const imgWidth = img.naturalWidth;
  const imgHeight = img.naturalHeight;
  const steps = 6;
  const angle = 360 / steps / 180 * Math.PI;
  const radius = 123;

  ctx.save();
  ctx.translate(canvas.width / 2, canvas.height / 2);

  for (let s = 0; s < steps; s++) {
    ctx.rotate(angle);
    ctx.drawImage(img, -radius, -imgHeight * 0.35);
  }
  ctx.restore();
})();