For a long time I've been trying to recreate pieces of art that I've enjoyed with code. Due to various reasons (life, work, mental health, general ennui, etc. etc.) I put off these little experiments. But not today!
In a nutshell, I really loved the visuals for Aleksandir's track "Dreams". I really wanted to figure out how I could represent this in code so I set out to solve this.
The way I saw it was in layers: the scrolling text layer, and the displacement map layer. By the way, I didn't have the terminology "displacement map" at my disposal when I started this. It took a good chunk of time googling "text distortion effects" or "watery text effect" to get that locked in.
The scrolling text was relatively simple. I placed two divs chock full of H1 tags in, one on top of the other, and then animated them in the Y axis via CSS. I tweaked the numbers so that the animation was seamless(ish). See below:
Notes: Optimal viewing for this Pen and subsequent Pens is on a desktop, but if you're viewing on a mobile device try changing the zoom from 1.0x to 0.5x or 0.25x.
See the Pen CodePen Home Aleksandir - DREAMS - Text Scroll by Corey (@nightvisionsandwich) on CodePen.
Cool. GG. EZ.
But then I attempted to solve for the second layer...not so EZ. Not so EZ at all.
I began by trying to find out what tools could even produce those effects. It just seemed like everyone wanted me to make this in Photoshop or After Effects! Which, I mean, for good reason. Those tools are centered around building the visual components of an art piece. But it isn't called creative coding for nothing so I kept looking. I landed on trying to figure out how to manipulate SVGs after seeing a couple examples;
Like this underwater text SVG animations:
See the Pen Underwater SVG Text by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.
And this example of animated SVG waves using feDisplacementMap:
See the Pen Animated SVG waves with feDisplacementMap #3 by Gabi (@enxaneta) on CodePen.
Big thanks to the creator of the latter for doing the legwork and documenting why it works. Some clever magic had to be done with turning the SVG into a data URI so that was dope.
Here is as far as I could get with it by tweaking some settings and adding the DREAMS text. For all intents and purposes it sure looks nice, but this thing eats memory like cookie monster in a bakery. So, CAUTION: if left on for too long, it could crash your browser. You've been warned...:
See the Pen Aleksandir - DREAMS - Animated SVG waves with feDisplacementMap - by Corey (@nightvisionsandwich) on CodePen.
Also, this solution applies the filter to the SVG's text elements directly, rather than acting as a fun house window for the text behind it. So, not ideal. I may revisit this sometime in the future but for now I think I'll move on to other projects until I get some feedback or better ideas for solutions.
Keep making art.