Skip to content

Instantly share code, notes, and snippets.

@subzey

subzey/index.html

Last active August 25, 2022 09:37
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/d3fad949ff7db8a1fd88420748be0278 to your computer and use it in GitHub Desktop.
Save subzey/d3fad949ff7db8a1fd88420748be0278 to your computer and use it in GitHub Desktop.
Download ZIP
Compositor-only filters
Raw
index.html
<!doctype html>
<style>
html {
height: 100%;
}
body {
display: flex;
height: 100%;
width: 100%;
margin: 0;
align-items: center;
justify-content: center;
background: gray;
}
.example {
font-size: 30vw;
}
.monochrome {
animation: monochrome 2s linear alternate infinite;
}
.rainbow {
animation: rainbow 1.7s linear infinite;
}
@keyframes monochrome {
0%, 100% {
filter: invert(0) brightness(0) invert(0);
}
25%, 75% {
filter: invert(0) brightness(1) invert(0);
}
25.0001%, 74.9999% {
filter: invert(1) brightness(1) invert(1);
}
50% {
filter: invert(1) brightness(0) invert(1);
}
}
@keyframes rainbow {
0% {
filter: contrast(2) hue-rotate(0turn);
}
100% {
filter: contrast(2) hue-rotate(1turn);
}
}
</style>
<span class="example rainbow">🚎</span><span class="example monochrome">🍞</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment