Matter.js / SVG.js issue with Safari 'ReferenceError: Can't find variable: draw'

Question

I'm working on a site that uses matter.js in a particular section to add some floating shapes to the background of the div. One of the shapes is a semicircle, which I used svg.js to create the shape. It's working perfectly on all browsers apart from Safari, which throws the console error 'ReferenceError: Can't find variable: draw'.

I've made a js fiddle for it but it's the first one I've made and it's not working there, so I've done something wrong. You can see all of the code though. Like I said, it's working perfectly on everything apart from Safari.

const balloonContainer = document.getElementById("balloon-container");

if (typeof SVG === 'undefined') {
  const script = document.createElement('script');
  script.src = '/js/svg.min.js';
  script.onload = () => console.log('SVG.js has been loaded');
  script.onerror = () => console.log('SVG.js has not been loaded');
  document.head.appendChild(script);
} else {
  console.log('SVG.js has been loaded');
}

let
  blue = "#3AC1FF";
green = "#00F2B3";
purple = "#8B6EFF";
gold = "#FFB814";

// Constants
const Engine = Matter.Engine;
const World = Matter.World;
const Bodies = Matter.Bodies;
const engine = Engine.create({
  gravity: {
    x: 0,
    y: -0.01
  }
}); // Set negative gravity

// Initialize SVG.js
let draw = null;

function initializeAndCheckBalloonContainer() {
  if (balloonContainer.classList.contains('run-shapes')) {
    if (!draw) {
      draw = SVG().addTo(balloonContainer).size("100%", "100%").addClass('shapes-cont');
    }
    createOffCanvasBalloon();
  } else {
    if (draw) {
      gsap.to(draw.node, {
        opacity: 0,
        duration: 1,
        onComplete: function() {
          draw.clear();
          draw.remove();
          draw = null;
        }
      });
    }
  }
}

function createOffCanvasBalloon() {

  const shapes = ['circle', 'semicircle', 'rectangle'];
  const randomShape = shapes[Math.floor(Math.random() * shapes.length)];

  let balloon = null;
  let balloonBody;

  const fillColors = [green, gold, blue, purple];
  const randomFillColor = fillColors[Math.floor(Math.random() * fillColors.length)];

  switch (randomShape) {
    case 'circle':
      balloon = draw.circle(100).fill(randomFillColor); // Adjust the size and color of the circle here
      break;
    case 'semicircle':
      balloon = draw.path('M0,60 A60,60 0 1,0 120,60 Z').fill(randomFillColor); // Adjust the semicircle size and color here
      break;
    case 'rectangle':
      balloon = draw.rect(120, 70).fill(randomFillColor); // Adjust the size and color of the rectangle here
      break;

    default:
      break;
  }

  if (balloon) { // Check if balloon is not null before rotating it
    const x = (Math.random() * window.innerWidth) * 3;
    const docHeight = Math.max(
      document.body.scrollHeight,
      document.body.offsetHeight,
      document.documentElement.clientHeight,
      document.documentElement.scrollHeight,
      document.documentElement.offsetHeight
    );
    const y = (docHeight + balloon.height()) / 7;
    balloon.move(x, y);
    balloonBody = Bodies.circle(x + balloon.width() / 2, y + balloon.height() / 2, 15, {
      frictionAir: 0.001,
      restitution: 1,
      isStatic: false,
      render: {
        visible: false,
      },
    });
  }

  World.add(engine.world, [balloonBody]);
  const updateBalloonPosition = () => {
    const position = balloonBody.position;
    balloon.move(position.x - balloon.width() / 2, position.y - balloon.height() / 2);
  };

  setInterval(updateBalloonPosition, 16); // Update every frame (approximately 60 FPS)
}
Matter.Runner.run(engine);

setInterval(initializeAndCheckBalloonContainer, 3000);

setInterval(() => {
  if (draw) {
    createOffCanvasBalloon();
  }
}, 300);

section {
  min-height: 100vh;
}

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>

<section class="strand-section run-shapes" id="balloon-container"></section>