Skip to content

Instantly share code, notes, and snippets.

@subzey

subzey/index.html

Last active April 8, 2019 19:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save subzey/37a3b8af9a5b113edff527b525426b18 to your computer and use it in GitHub Desktop.
Save subzey/37a3b8af9a5b113edff527b525426b18 to your computer and use it in GitHub Desktop.
Download ZIP
glitchy logo
Raw
index.html
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
font: 16pt sans-serif;
text-align: center;
}
</style>
</head>
<body>
<img id="img">
<p>We're dropping the Internet Explorer support.</p>
<script>
fetch('logo.jpg').then(r => r.arrayBuffer()).then(ab => {
const image = document.querySelector('#img');
const originalImageURL = URL.createObjectURL(new Blob([ab], { type: 'image/jpeg' }));
image.src = originalImageURL;
let uia;
let state = -1;
let imageURL;
setInterval(function glitch() {
state = (state + 1) % 60;
if (state === 0) {
image.src = originalImageURL;
uia = new Uint8Array(ab).slice();
}
if (state < 30) {
return;
}
const ptr = Math.floor(Math.random() * Math.random() * (uia.length - 256)) + 256;
const shift = Math.floor(Math.random() * 8);
uia[ptr] ^= (1 << shift);
if (imageURL) {
URL.revokeObjectURL(imageURL);
}
imageURL = URL.createObjectURL(new Blob([uia], { type: 'image/jpeg' }));
image.src = imageURL;
}, 70);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment