<!DOCTYPE html>
<html>
<head>
<title>Falling SVG Logos - Matter.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pathseg@1.2.1/pathseg.min.js"></script>
</head>
<body>
<div id="matter-container" style="width: 400px; height: 600px;"></div>
<script>
// Module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Common = Matter.Common,
Svg = Matter.Svg,
Vertices = Matter.Vertices;
// Create an engine
var engine = Engine.create();
var world = engine.world;
// Get the container element
var container = document.getElementById('matter-container');
// Create a renderer
var render = Render.create({
element: container,
engine: engine,
options: {
width: 1200,
height: 1500,
wireframes: false, // Set to false to see the rendered colors/textures
background: '#ffffff' // Change as desired
}
});
// Run the renderer
Render.run(render);
// Create runner
var runner = Runner.create();
Runner.run(runner, engine);
// Add walls
Composite.add(world, [
Bodies.rectangle(600, 1500, 1200, 50, { isStatic: true }), // Ground
Bodies.rectangle(1200, 750, 50, 1500, { isStatic: true }), // Right wall
Bodies.rectangle(0, 750, 50, 1500, { isStatic: true }), // Left wall
Bodies.rectangle(600, 0, 1200, 50, { isStatic: true }) // Top wall (optional, can be removed to have logos fall from above)
]);
// An array of your SVG logo URLs
var svgUrls = [
'https://www.svgrepo.com/show/303173/nike-3-logo.svg',
'https://www.svgrepo.com/show/303173/nike-3-logo.svg',
'https://www.svgrepo.com/show/303173/nike-3-logo.svg'
// Add more logo URLs here
];
// Function to load and add an SVG as a physics body
function loadSvg(url) {
fetch(url)
.then(response => response.text())
.then(raw => {
const parser = new DOMParser();
const svgDoc = parser.parseFromString(raw, 'image/svg+xml');
const path = svgDoc.querySelector('path');
if (path) {
var vertices = Svg.pathToVertices(path, 30); // The second argument is the sampling distance
// Decompose the vertices into convex parts
var decomposed = Vertices.decomp(vertices);
var svgBody = Bodies.fromVertices(
Common.random(100, 1100), // Random x position
Common.random(-300, -50), // Start above the canvas
decomposed,
{
friction: 0.3,
restitution: 0.6, // Bounciness
render: {
fillStyle: Common.choose(['#F1C40F', '#E67E22', '#E74C3C', '#1ABC9C', '#2ECC71', '#3498DB']), // Random fill color
strokeStyle: '#ffffff',
lineWidth: 1
}
}
);
Composite.add(world, svgBody);
}
})
.catch(console.error.bind(console));
}
// Load each SVG logo
svgUrls.forEach(loadSvg);
// Add a mouse control
var mouse = Matter.Mouse.create(render.canvas),
mouseConstraint = Matter.MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
Composite.add(world, mouseConstraint);
// Keep the mouse in sync with rendering
render.mouse = mouse;
</script>
</body>
</html>