Pencode Blob Effect - How to embed?

Hello,

I’m designing a very simple site and in the homepage I’d like to add this pencode blob effect. I know nothing about coding, so I’m struggling a lot to understand how I should proceed…

This is the effect: https://codepen.io/shubniggurath/pen/EmMzpp

Thanks in advance,
Francesco

It can be done, but even for an experienced coder, it requires a bit of redesign work.

There are two main challenges you’ll find with utilizing CodePen effects in a website;

PREPROCESSORS

The layout, style, and script often make heavy use of preprocessors like HAML, SASS, and Babel. These languages have to be compiled to standard HTML, CSS, and JS in order for them to work in browsers.

For you that means doing that compilation, and then working with the compiled assets. Normally this is fine, but sometimes it’s problematic, e.g. because the HTML generated might be dynamic. So by creating a “static” view, you effectively have a snapshot, and the resulting code will only work for a very narrow scenario, if at all.

THE CODE IS UNBOXED

In a pen, designers have a blank page, and they’ll use the whole thing like an artist would use a canvas.

In a real website, you probably want other things on that page too, so you usually need to redesign the effect so that it can be positioned as an element in a specific part of your page. That redesign can be substantial, because it may mean resizing the effect, and exposing settings so that you can e.g. change colors as needed.

You can solve both, but realistically you will probably need to find someone who will rebuild it for you as an reusable widget.