Web Development by Solarise

The Solarise.dev Blog


Blog archive Robin Metcalfe 3rd August 2015

Since the motif of my website is a simple circle, I thought it would be interesting to try and expand upon that idea to create a fluid, dynamic background based on the theme of pop-art

See the Pen Popcircles by Robin Metcalfe (@solarisedesign) on CodePen.

See the Pen Popcircles by Robin Metcalfe (@solarisedesign) on CodePen.

Browser and system compatibility

This demo may currently run sluggishly on some browsers and hardware configurations.

Technical notes

The code contains a variable to adjust the radius of each circle. This isn’t currently configurable via the control panel, as it requires re-initialising the circle matrix internally – not a particularly complex operation, but this hasn’t yet been implemented.

However, you can experiment by adjusting the code to change the value of the default maxRadius setting.

If set to something low (e.g. 3-10) then you’ll potentially see a performance hit.

This appears to be purely down to the very large number of circles required per frame, especially when you add in movement and colour-shifts, the need for a constant and smooth animation places some restrictions on what’s possible.

I attempted to build a solution implementing webgl rendering techniques, but I found the visual result to be less satisfactory than when rendering the same scene in 2D

Further development notes

I believe there are some significant performance gains still to be made though. Some of these will involve interpolation of movement, and approximations of positioning/movement/colour in order to reduce the number of redraws carried out by the rendering engine. At the moment, the code redraws the circles on every frame, which is extremely taxing on the hardware, relatively speaking. I suspect there’s a more efficient way of rendering the circles too.

Author Image

About the author

Robin is the dedicated developer behind Solarise.dev. With years of experience in web development, he's committed to delivering high-quality solutions and ensuring websites run smoothly. Always eager to learn and adapt to the ever-changing digital landscape, Robin believes in the power of collaboration and sharing knowledge. Outside of coding, he enjoys diving into tech news and exploring new tools in the industry.

If you'd like to get in touch to discuss a project, or if you'd just like to ask a question, fill in the form below.

Get in touch

Send me a message and I'll get back to you as soon as possible. Ask me about anything - web development, project proposals or just say hi!

Please enable JavaScript in your browser to complete this form.

Solarise.dev Services

Maintenance Retainers

Min 3 hours per month, no contract

Project Planning

Get in touch to discuss your project details


Face-to-face chats. Solve your problems!