From e4226bfb36b7229f57a4e2b0ff44ae1c754d977b Mon Sep 17 00:00:00 2001 From: Martial Simon Date: Tue, 20 Aug 2024 17:13:43 +0200 Subject: update --- fonts/CousineNerdFont-Regular.ttf | Bin 0 -> 2205336 bytes img/skullzing.gif | Bin 0 -> 12727 bytes index.html | 29 ++++++++++++--- style.css | 73 +++++++++++++++++++++++++++++++++++++- 4 files changed, 97 insertions(+), 5 deletions(-) create mode 100644 fonts/CousineNerdFont-Regular.ttf create mode 100644 img/skullzing.gif diff --git a/fonts/CousineNerdFont-Regular.ttf b/fonts/CousineNerdFont-Regular.ttf new file mode 100644 index 0000000..5ba4b51 Binary files /dev/null and b/fonts/CousineNerdFont-Regular.ttf differ diff --git a/img/skullzing.gif b/img/skullzing.gif new file mode 100644 index 0000000..b2052d6 Binary files /dev/null and b/img/skullzing.gif differ diff --git a/index.html b/index.html index 26a2baf..ae42dad 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,35 @@ +

What if I told you you could draw with + + ?

MIDI Art, and other forms of audio GFX

MIDI art, and other forms of audio GFX

MIDI notes pixel art

Waveform art

Oscilloscope shenanigans

MIDI ???

So there's this thing called MIDI, which stands for Musical Instrument Digital Interface. I won't get into any technical details, you just need to know that it's a way to make sound with a computer. You can usually write musical pieces with specific softwares called DAWs.

MIDI art ???

When composing, the notes are displayed on a grid, which can be seen as a canvas. From there on, we can start making pixel art ! The best part is, you can customize each note with a certain sound and create a very unique sounding pixel art.

DEMO !!!!

~ Oscilloscopes and stuff ~

Waveform art

Audio visualizers

Graphs

Circles

Windows Media Player

- + + diff --git a/style.css b/style.css index 951a020..5685341 100644 --- a/style.css +++ b/style.css @@ -4,5 +4,76 @@ body { } h1 { - filter: drop-shadow(0.4em 0.4em 0 #a794ff); + text-shadow: 0.2em -0.4em #00ed60, 0.4em 0.4em #a794ff; +} + +#Introduction { + font-style: italic; + text-align: end; +} + +svg { + margin: auto 0; +} + +.wavy path { + animation-name: hop; + animation-duration: 1.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +path#id_1 { + animation-delay: 0.3s; +} +path#id_2 { + animation-delay: 0.6s; +} +path#id_3 { + animation-delay: 0.9s; +} +path#id_4 { + animation-delay: 1.2s; +} +path#id_5 { + animation-delay: 1.5s; +} +path#id_6 { + animation-delay: 1.8s; +} +path#id_7 { + animation-delay: 2.1s; +} +path#id_8 { + animation-delay: 2.4s; +} +path#id_9 { + animation-delay: 2.7s; +} +path#id_10 { + animation-delay: 3s; +} +path#id_11 { + animation-delay: 3.3s; +} +path#id_12 { + animation-delay: 3.6s; +} + +@keyframes hop{ + 25% { + transform: translateY(0.5em); + } + + 50% { + transform: translateY(1em); + } + + 75% { + transform: translateY(0.5em); + } + + 100% { + transform: translateY(0); + } } -- cgit v1.2.3