Neur0toxine revised this gist . 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 . 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 . 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