Why I look at CodePen (and places like it)
Most of the design tools available online today offer some option for you to share your work (to help or to impress others). Sites like CodePen, GitHub, and (increasingly) GSAP allow users/account holders to actively showcase their work. They are worth a visit, even when you’re not actively looking for something specific. This article is not about “here’s a cool thing I found” whilst on those sites, it’s about how you can use them to find inspirational ideas and apply them to your own design/sites.
A lot of web design inspiration content points you toward finished sites or ‘picture book’ templates. Those are fine for overall layout and content ideas, but they show you the result, not the mechanism.
CodePen is different: every Pen is, by definition, showing its working. You’re not just seeing the output, you’re seeing the actual HTML, CSS and JS that produces it, editable in real time. That’s a fundamentally different kind of inspiration — akin to appreciating the engineering as well as the structure itself.
Taking inspiration from CodePen in the BMCS build
There are two Pens that provided inspiration for the site rebuild. I bookmarked both, months ago, with no fixed idea of how or if I would use them. They were animated effects that I liked – one straightforward, the other technically complex.
They have now become my two feature backgrounds. The main background uses “The Bouncing Blobs” whilst the “Black Hole” forms the fixed background of the category and tag archives. Both have relevance – the Blobs representing clouds in the moonlit sky, the Black Hole representing the resting place of my content!
How I implemented the Pens
As I mentioned earlier, you can view the source code for a Pen. As a WordPress user you can’t just drop the code in somewhere and hope it works especially if you are using a page builder like Elementor with its multi-level dom structure. So my approach to adapting these two Pens (& the same will apply to any future ones I may adapt) went as follows:
- Copying & recreating the Pen in Visual Studio. This means you can test it works in your own environment/browser and it gives you the opportunity to play around with code and change the design to suit your own requirement.
- Copying the revised code to an html widget in Elementor (with custom css) and testing within a container. Ordinarily, once it is working, I could leave it be, job done.
- In this case, however, I wanted to apply the effects as a fixed background to be used throughout the site. There were a couple of ways to do this, but I chose to add the html and js to my child theme functions file which also meant I could control on which pages the background was output.
The end result you can see for yourself on any page, where you will also notice, where relevant, the colour changes to reflect the category.
Where “inspired by” ends and “copied from” begins
This is also worth being open about, because it’s a real line and not everyone treats it seriously. My general rule of thumb for a design element: if I understand why every part of the code does what it does, and I can change enough of it to fit my own site’s structure, colours, and constraints, it’s “inspired by”. If it is just swapping colours and leaving the rest untouched, it’s “copied from”, and even though technically permitted, I’d rather try to create my own version.
That said, there was coordinate maths in the black hole script — translating angles into x/y positions, as I have now found out — that is beyond my technical capability to have written myself. There are times I will have to accept that. Whilst I’d like to think I’ve adapted it sufficiently, I’m grateful for the technical expertise of the person that created and shared it in the first place.
Public Pens are automatically MIT licensed, one of the most permissive open-source terms there is: free to use, modify, and build on, with one condition — the original copyright notice has to stay attached to the code itself. So that’s exactly what I did, sharing attribution as a comment in the source (my functions file) rather than stripping it out.
Beyond the Blobs and the Black Hole
What I find really useful, more than any single Pen, is looking at how other people solve small visual problems — a hover effect, a background animation, a transition or scroll effect. It is a really worthwhile habit to bookmark those techniques especially ones you don’t have use for immediately. Just like the black hole, you never know when they might come in handy.
One final point relating to Pens being a source of inspiration. Having implemented my version of the Bouncing Blobs, I have since become aware I could actually create a very similar effect using CSS animations, so no JS required. A Pen does not always have to provide the solution, it could just be the source that guides you.
