I am using matter.js for the hero section of my website and would like to make it responsive when resizing the screen. Currently the screen simply overlaps the elements or they fully disappear when it gets smaller.

The working code with the problem can be seen here: https://2d-shape-interaction.webflow.io/

This is the code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
function initSimulation() {
      var Engine = Matter.Engine,
        Render = Matter.Render,
        Events = Matter.Events,
        MouseConstraint = Matter.MouseConstraint,
        Mouse = Matter.Mouse,
        World = Matter.World,
        Bodies = Matter.Bodies;

      var engine = Engine.create(),
        world = engine.world;
      var containerElement = document.querySelector(".tag-canvas");
      var containerWidth = containerElement.clientWidth + 2;
      var containerHeight = containerElement.clientHeight + 2;

      var render = Render.create({
        element: containerElement,
        engine: engine,
        options: {
          width: containerWidth,
          height: containerHeight,
          pixelRatio: 2,
          background: "transparent",
          border: "none",
          wireframes: false
        }
      });

      var ground = Bodies.rectangle(containerWidth / 2 + 160,
        containerHeight + 80,
        containerWidth + 320,
        160,
        { render: { fillStyle: "#000000" }, isStatic: true }
      );
      var wallLeft = Bodies.rectangle(
        -80,
        containerHeight / 2,
        160,
        containerHeight,
        { isStatic: true }
      );
      var wallRight = Bodies.rectangle(
        containerWidth + 80,
        containerHeight / 2,
        160,
        1200,
        { isStatic: true }
      );
      var roof = Bodies.rectangle(
        containerWidth / 2 + 160,
        -80,
        containerWidth + 320,
        160,
        { isStatic: true }
      );
      
      var border = 1;
      var radius = 20;

      var tagLogo = Bodies.circle(containerWidth / 2 + 150, 450, 56, {
        render: {
          sprite: {
            texture:
              "https://www.svgrepo.com/show/505217/circle.svg",
            xScale: 0.2,
            yScale: 0.2
         }
        }
      });
      // ...other svg

      World.add(engine.world, [
        ground,
        wallLeft,
        wallRight,
        roof,
        tagLogo
      ]);

      var mouse = Mouse.create(render.canvas),
        mouseConstraint = MouseConstraint.create(engine, {
          mouse: mouse,
          constraint: {
            stiffness: 0.2,
            render: {
              visible: false
            }
          }
        });

      World.add(world, mouseConstraint);

      render.mouse = mouse;

      mouse.element.removeEventListener("mousewheel", mouse.mousewheel);
      mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel);

      let click = false;

      document.addEventListener("mousedown", () => (click = true));
      document.addEventListener("mousemove", () => (click = false));
      document.addEventListener("mouseup", () =>
        console.log(click ? "click" : "drag")
      );

      Events.on(mouseConstraint, "mouseup", function (event) {
        var mouseConstraint = event.source;
        var bodies = engine.world.bodies;
        if (!mouseConstraint.bodyB) {
          for (i = 0; i < bodies.length; i++) {
            var body = bodies[i];
            if (click === true) {
              if (
                Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position)
              ) {
                var bodyUrl = body.url;
                console.log("Body.Url >> " + bodyUrl);
                if (bodyUrl != undefined) {
                  window.open(bodyUrl, "_blank");
                  console.log("Hyperlink was opened");
                }
                break;
              }
            }
          }
        }
      });

      Engine.run(engine);

      Render.run(render);
    }

    var containerElement = document.querySelector(".tag-canvas");

    var observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          initSimulation();
          observer.disconnect();
        }
      });
    }, {});

    observer.observe(containerElement);