Revision of DVD Video

Neur0toxine revised this gist 8 months ago. Go to revision

1 file changed, 2 insertions, 1 deletion

index.html

			@@ -15,6 +15,7 @@
15	15		display: flex;
16	16		justify-content: center;
17	17		align-items: center;
	18	+	cursor: none;
18	19		}
19	20
20	21		#screen {
			@@ -41,7 +42,7 @@
41	42		<g class="layer">
42	43		<g id="svg_5">
43	44		<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"/>
44		-	<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"/>
	45	+	<path id="text" fill="rgba(0,0,0,1)" 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"/>
45	46		</g>
46	47		</g>
47	48		</svg>

Neur0toxine revised this gist 8 months ago. Go to revision

1 file changed, 5 deletions

index.html

			@@ -32,11 +32,6 @@
32	32		align-items: center;
33	33		user-select: none;
34	34		}
35		-
36		-	/* svg {
37		-	width: 291.18px;
38		-	height: 136.31px;
39		-	} */
40	35		</style>
41	36		</head>
42	37		<body>

Neur0toxine revised this gist 8 months ago. Go to revision

1 file changed, 150 insertions

index.html(file created)

		@@ -0,0 +1,150 @@
1	+	<!DOCTYPE html>
2	+	<html lang="en">
3	+	<head>
4	+	<meta charset="UTF-8">
5	+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	+	<title>DVD Video</title>
7	+	<style>
8	+	body {
9	+	margin: 0;
10	+	padding: 0;
11	+	background-color: #000;
12	+	overflow: hidden;
13	+	width: 100vw;
14	+	height: 100vh;
15	+	display: flex;
16	+	justify-content: center;
17	+	align-items: center;
18	+	}
19	+
20	+	#screen {
21	+	width: 100%;
22	+	height: 100%;
23	+	position: relative;
24	+	}
25	+
26	+	#dvd-logo {
27	+	position: absolute;
28	+	width: 187.75px;
29	+	height: 84.5px;
30	+	display: flex;
31	+	justify-content: center;
32	+	align-items: center;
33	+	user-select: none;
34	+	}
35	+
36	+	/* svg {
37	+	width: 291.18px;
38	+	height: 136.31px;
39	+	} */
40	+	</style>
41	+	</head>
42	+	<body>
43	+	<div id="screen">
44	+	<div id="dvd-logo">
45	+	<svg width="187.5" height="84.5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
46	+	<g class="layer">
47	+	<g id="svg_5">
48	+	<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"/>
49	+	<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"/>
50	+	</g>
51	+	</g>
52	+	</svg>
53	+	</div>
54	+	</div>
55	+
56	+	<script>
57	+	const screen = document.getElementById('screen');
58	+	const logo = document.getElementById('dvd-logo');
59	+	const logoPaths = document.querySelectorAll('path');
60	+
61	+	let x = Math.random() * (screen.clientWidth - logo.clientWidth);
62	+	let y = Math.random() * (screen.clientHeight - logo.clientHeight);
63	+
64	+	const speeds = [
65	+	{ dx: 1.2, dy: 1.2 },
66	+	{ dx: 2.0, dy: 2.0 },
67	+	{ dx: 2.2, dy: 2.2 }
68	+	];
69	+
70	+	let currentSpeedIndex = 1;
71	+	let dx = speeds[currentSpeedIndex].dx / 2;
72	+	let dy = speeds[currentSpeedIndex].dy / 2;
73	+
74	+	function changeColor() {
75	+	const r = Math.floor(Math.random() * 156) + 100;
76	+	const g = Math.floor(Math.random() * 156) + 100;
77	+	const b = Math.floor(Math.random() * 156) + 100;
78	+	const color = `rgb(${r}, ${g}, ${b})`;
79	+
80	+	logoPaths.forEach(path => {
81	+	if (path.id !== 'text') {
82	+	path.setAttribute('fill', color);
83	+	}
84	+	});
85	+	}
86	+
87	+	function changeSpeed() {
88	+	let newSpeedIndex;
89	+	do {
90	+	newSpeedIndex = Math.floor(Math.random() * speeds.length);
91	+	} while (newSpeedIndex === currentSpeedIndex);
92	+
93	+	currentSpeedIndex = newSpeedIndex;
94	+
95	+	const dirX = dx > 0 ? 1 : -1;
96	+	const dirY = dy > 0 ? 1 : -1;
97	+
98	+	dx = speeds[currentSpeedIndex].dx * dirX;
99	+	dy = speeds[currentSpeedIndex].dy * dirY;
100	+	}
101	+
102	+	changeColor();
103	+
104	+	let bounceCount = 0;
105	+
106	+	function animate() {
107	+	x += dx;
108	+	y += dy;
109	+
110	+	let collision = false;
111	+
112	+	if (x <= 0 \|\| x + logo.clientWidth >= screen.clientWidth) {
113	+	dx = -dx;
114	+	collision = true;
115	+	}
116	+
117	+	if (y <= 0 \|\| y + logo.clientHeight >= screen.clientHeight) {
118	+	dy = -dy;
119	+	collision = true;
120	+	}
121	+
122	+	if (collision) {
123	+	changeColor();
124	+	bounceCount++;
125	+
126	+	if (bounceCount >= 3 + Math.floor(Math.random() * 3)) {
127	+	changeSpeed();
128	+	bounceCount = 0;
129	+	}
130	+	}
131	+
132	+	logo.style.left = x + 'px';
133	+	logo.style.top = y + 'px';
134	+
135	+	requestAnimationFrame(animate);
136	+	}
137	+
138	+	animate();
139	+
140	+	window.addEventListener('resize', function() {
141	+	if (x + logo.clientWidth > screen.clientWidth) {
142	+	x = screen.clientWidth - logo.clientWidth;
143	+	}
144	+	if (y + logo.clientHeight > screen.clientHeight) {
145	+	y = screen.clientHeight - logo.clientHeight;
146	+	}
147	+	});
148	+	</script>
149	+	</body>
150	+	</html>

Newer Older