<div class="container">
  
<script src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.14.2/matter.min.js'></script><script  src="./script.js"></script>

<div id="canvas"></div>

<script>
var canvas = document.getElementById('canvas');
    var Engine = Matter.Engine,
    Render = Matter.Render,
    Events = Matter.Events,
    MouseConstraint = Matter.MouseConstraint,
    Mouse = Matter.Mouse,
    World = Matter.World,
    Bodies = Matter.Bodies;

// create an engine
var engine = Engine.create(),
    world = engine.world;

engine.world.gravity.y = 1;
engine.world.gravity.x = 0;

// create a renderer
var render = Render.create({
    element: canvas,
    engine: engine,
    options: {
      width: window.innerWidth,
      height: window.innerHeight,
      pixelRatio: 2,
      background: 'transparent',
      wireframes: false,
    }
});


// create bounds
var ground = Bodies.rectangle(
  (window.innerWidth / 2) + 160, window.innerHeight + 80, window.innerWidth + 320, 160,{render: { fillStyle: '#F6F3EF'}, isStatic: true });
var wallLeft = Bodies.rectangle( -80, window.innerHeight / 2, 160,   window.innerHeight, { isStatic: true });
var wallRight = Bodies.rectangle(window.innerWidth + 80, window.innerHeight / 2, 160, 1200, { isStatic: true })
var roof = Bodies.rectangle(
  (window.innerWidth / 2) + 160, -80, window.innerWidth + 320, 160, { isStatic: true })

// object colors & variables
var arts = "#000"
var videos = "#B3E8F3"
var abouts = '#4D4D4D'

var border = 2
var radius = 20

// create objects

// art & design
var illustration = Bodies.rectangle(20, 20, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-321-1.png', xScale: 0.25, yScale: 0.25 }}})

var art = Bodies.rectangle(150, 40, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-322-1.png', xScale: 0.25, yScale: 0.25 }}})

var threeD = Bodies.rectangle(20, 10, 144, 144, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-336-1.png', xScale: 0.3, yScale: 0.3 }}})

var graphic = Bodies.rectangle(30, 40, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-327-1.png', xScale: 0.25, yScale: 0.25 }}})

var photo = Bodies.rectangle(200, 80, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-323-1.png', xScale: 0.25, yScale: 0.25 }}})

// video
var documentary = Bodies.rectangle(20, 40, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-338-1.png', xScale: 0.25, yScale: 0.25 }}})

var animation = Bodies.rectangle(1100, 20, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-328-1.png', xScale: 0.25, yScale: 0.25 }}})

var vintage = Bodies.rectangle(200, 30, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-331-1.png', xScale: 0.25, yScale: 0.25 }}})

var short = Bodies.rectangle(300, 5, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-325-1.png', xScale: 0.25, yScale: 0.25 }}})

//misc
var website = Bodies.rectangle(300, 15, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-333-1.png', xScale: 0.25, yScale: 0.25 }}})

var article = Bodies.rectangle(500, 18, 80, 80, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-330-1.png', xScale: 0.16, yScale: 0.16 }}})

var music = Bodies.rectangle(500, 5, 80, 80, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-339-1.png', xScale: 0.16, yScale: 0.16 }}})

var star = Bodies.rectangle(1200, 3, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-340-1.png', xScale: 0.25, yScale: 0.25 }}})
//about

var about = Bodies.rectangle(930, 10, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-341-1.png', xScale: 0.25, yScale: 0.25 }}})

var artichoke = Bodies.rectangle(930, 12, 65, 65, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-334-1.png', xScale: 0.135, yScale: 0.135 }}})


var random = Bodies.rectangle(930, 400, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-332-1.png', xScale: 0.25, yScale: 0.25 }}})

var matilda = Bodies.rectangle(930, 400, 120, 120, {chamfer: {radius: radius}, render: { sprite: { texture: 'https://l-dog.ru/wp-content/uploads/2023/05/Frame-326-1.png', xScale: 0.25, yScale: 0.25 }}})


// Original Shape
// var illustration = Bodies.rectangle(70, 500, 133, 40, {render: { fillStyle: arts}, chamfer: {radius: 20}})


// add all of the bodies to the world
World.add(engine.world, [
  ground, wallLeft, wallRight, roof, illustration, art, threeD, graphic, photo, documentary, animation, vintage, short, website, article, music, star, about, artichoke, random, matilda
]);

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

World.add(world, mouseConstraint);

// keep the mouse in sync with rendering
render.mouse = mouse;

// Allow page scrolling in matter.js window
mouse.element.removeEventListener("mousewheel", mouse.mousewheel);
mouse.element.removeEventListener("DOMMouseScroll", mouse.mousewheel);

// Detect clicks vs. drags
let click = false;

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

// Create a On-Mouseup Event-Handler
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];
      // Check if clicked or dragged
      if (click === true) {
      if (Matter.Bounds.contains(body.bounds, mouseConstraint.mouse.position)) {
          var bodyUrl = body.url;
          console.log("Body.Url >> " + bodyUrl);
          // Hyperlinking feature
          if (bodyUrl != undefined) {
            //window.location.href = bodyUrl;
            window.open(bodyUrl, '_blank');
            console.log("Hyperlink was opened");
          }
          break;
        }
      }
    }
  }
});

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);
</script>

  body{
  height:430px;
  background:#F6F3EF
}
.container{
  background:#F6F3EF;
  height:430px;
  width:100%;
  position:fixed;
  top:-20px;
}