<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DVD Video</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#screen {
width: 100%;
height: 100%;
position: relative;
}
#dvd-logo {
position: absolute;
width: 187.75px;
height: 84.5px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
}
</style>
</head>
<body>
<div id="screen">
<div id="dvd-logo">
<svg width="187.5" height="84.5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<g class="layer">
<g id="svg_5">
<path d="m128.98,10.18l18.19,0s22.01,-1.13 21.45,10.16c-0.87,17.47 -27.65,16.23 -27.65,16.23l5.22,-22.72l-18.2,0l-7.62,32.87l18.06,0s18.04,0.81 32.87,-6.35c15.8,-7.61 15.94,-21.02 15.94,-21.02s0.57,-8.46 -7.76,-13.4c-9.28,-5.51 -21.44,-5.93 -21.44,-5.93l-39.79,0l-23.56,30.62l-9.88,-30.62l-68.56,0l-2.54,10.16l18.2,0s22.01,-1.13 21.44,10.16c-0.87,17.47 -27.65,16.23 -27.65,16.23l5.22,-22.72l-18.2,0l-7.62,32.87l18.06,0s18.04,0.81 32.88,-6.35c15.8,-7.61 15.94,-21.02 15.94,-21.02s-0.21,-3.85 -0.71,-5.5c-0.42,-1.41 -0.99,-3.67 -0.99,-3.67l0.85,0l16.79,47.12l41.06,-47.12zm-128.82,59.82c0,-7.01 39.55,-12.7 88.32,-12.7c48.78,0 88.32,5.69 88.32,12.7s-39.54,12.7 -88.32,12.7c-48.77,0 -88.32,-5.69 -88.32,-12.7zm167.69,9.8l-3.63,0l0,0.61l1.44,0l0,3.98l0.76,0l0,-3.98l1.43,0l0,-0.61l0,0zm5.99,0l-1.16,0l-1.35,3.49l-1.37,-3.49l-1.17,0l0,4.59l0.76,0l0,-3.83l0.02,0l1.51,3.83l0.47,0l1.51,-3.83l0.02,0l0,3.83l0.76,0l0,-4.59z" id="svg_3"/>
<path id="text" fill="#000" d="m39.44,63.76l-5.22,0l7.76,13.18l3.73,0l7.88,-13.18l-5.21,0l-4.49,8.01l-4.45,-8.01zm22.4,13.18l4.8,0l0,-13.18l-4.8,0l0,13.18zm14.98,0l6.81,0c5.11,0 9.37,-2.88 9.37,-6.59c0,-3.71 -4.23,-6.6 -9.37,-6.6l-6.81,0l0,13.19zm4.8,-10.28l1.13,0c3.08,0 5.26,1.33 5.26,3.69c0,2.57 -2.45,3.69 -5.31,3.69l-1.08,0l0,-7.38zm31.17,0l0,-2.9l-10.51,0l0,13.18l10.51,0l0,-2.9l-5.71,0l0,-2.27l5.41,0l0,-2.91l-5.41,0l0,-2.2l5.71,0zm19.28,-3.34c-5.31,0 -10.21,2.8 -10.21,6.78c0,4.27 4.29,7.28 10.21,7.28c5.93,0 10.21,-3.01 10.21,-7.28c0,-3.98 -4.89,-6.78 -10.21,-6.78zm0,3.32c2.86,0 5.22,1.66 5.22,3.48c0,2.28 -2.36,3.94 -5.22,3.94c-2.86,0 -5.21,-1.66 -5.21,-3.94c0,-1.82 2.35,-3.48 5.21,-3.48z" fill="#fff" id="svg_4"/>
</g>
</g>
</svg>
</div>
</div>
<script>
const screen = document.getElementById('screen');
const logo = document.getElementById('dvd-logo');
const logoPaths = document.querySelectorAll('path');
let x = Math.random() * (screen.clientWidth - logo.clientWidth);
let y = Math.random() * (screen.clientHeight - logo.clientHeight);
const speeds = [
{ dx: 1.2, dy: 1.2 },
{ dx: 2.0, dy: 2.0 },
{ dx: 2.2, dy: 2.2 }
];
let currentSpeedIndex = 1;
let dx = speeds[currentSpeedIndex].dx / 2;
let dy = speeds[currentSpeedIndex].dy / 2;
function changeColor() {
const r = Math.floor(Math.random() * 156) + 100;
const g = Math.floor(Math.random() * 156) + 100;
const b = Math.floor(Math.random() * 156) + 100;
const color = `rgb(${r}, ${g}, ${b})`;
logoPaths.forEach(path => {
if (path.id !== 'text') {
path.setAttribute('fill', color);
}
});
}
function changeSpeed() {
let newSpeedIndex;
do {
newSpeedIndex = Math.floor(Math.random() * speeds.length);
} while (newSpeedIndex === currentSpeedIndex);
currentSpeedIndex = newSpeedIndex;
const dirX = dx > 0 ? 1 : -1;
const dirY = dy > 0 ? 1 : -1;
dx = speeds[currentSpeedIndex].dx * dirX;
dy = speeds[currentSpeedIndex].dy * dirY;
}
changeColor();
let bounceCount = 0;
function animate() {
x += dx;
y += dy;
let collision = false;
if (x <= 0 || x + logo.clientWidth >= screen.clientWidth) {
dx = -dx;
collision = true;
}
if (y <= 0 || y + logo.clientHeight >= screen.clientHeight) {
dy = -dy;
collision = true;
}
if (collision) {
changeColor();
bounceCount++;
if (bounceCount >= 3 + Math.floor(Math.random() * 3)) {
changeSpeed();
bounceCount = 0;
}
}
logo.style.left = x + 'px';
logo.style.top = y + 'px';
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', function() {
if (x + logo.clientWidth > screen.clientWidth) {
x = screen.clientWidth - logo.clientWidth;
}
if (y + logo.clientHeight > screen.clientHeight) {
y = screen.clientHeight - logo.clientHeight;
}
});
</script>
</body>
</html>