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.
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!