Responsive Polygon Animation with JavaScript and HTML5 Canvas
Looking to add a visually engaging, dynamic background to your website? This responsive polygon animation created using JavaScript and HTML5 Canvas offers a stunning, interactive effect that adapts to any screen size while maintaining optimal performance.
In this blog post, we’ll walk you through the step-by-step process of building this mesmerizing polygonal animation that features smooth motion, gradient color transitions, and seamless responsiveness. Whether you're a web developer, UI/UX designer, or creative coder, this animation can enhance your website’s aesthetics and user engagement.
Why Use This Polygon Animation?
This animation isn't just visually appealing—it’s also lightweight, efficient, and adaptable. Here’s why you should consider implementing it:
✅ Fully Responsive – The canvas automatically resizes based on the screen dimensions.
✅ Optimized for Performance – Uses requestAnimationFrame for smooth animations without performance lags.
✅ Dynamic Effects – The polygons rotate and expand over time, creating an eye-catching motion effect.
✅ Gradient Coloring – The edges of the polygons feature a vibrant, glowing gradient stroke.
✅ Adaptive Line Width – Ensures the animation remains clear and proportional across different screen sizes.
This animation is ideal for:
? Website Backgrounds – Make your landing page or homepage visually appealing.
? Game Interfaces – Create futuristic, interactive visual effects.
? Dashboards & UI Elements – Enhance presentations and analytics pages with animated visuals.
? Blog Headers & Hero Sections – Engage users with creative animations on scroll or page load.
How This Animation Works
1. Setting Up the Canvas
We create a
2. Generating the Polygon Shapes
The animation draws multiple polygonal shapes using mathematical functions (sin and cos) to determine the coordinates of each vertex. These shapes continuously change size and rotate smoothly, creating a futuristic effect.
3. Applying Gradient Coloring
A linear gradient is applied to the stroke of the polygons, transitioning through multiple vibrant colors like cyan, blue, purple, and red. This gives the animation a neon-like glow, making it visually striking.
4. Rotating and Scaling for a Dynamic Effect
The animation gradually increases and decreases the number of polygon points (n), creating an expanding and shrinking effect. Additionally, a rotation angle is applied to continuously spin the polygons.
5. Optimizing Performance with requestAnimationFrame
Instead of using setInterval, which can lead to performance issues, we use requestAnimationFrame(). This ensures smooth frame rates and reduces CPU load, making the animation more efficient.
SEO Benefits of Using Interactive Animations
Including lightweight, engaging animations like this on your website can:
? Increase User Engagement – Interactive elements keep users on your page longer.
? Improve Bounce Rate – Users are more likely to stay when visuals are appealing.
? Enhance Brand Perception – A well-designed website reflects professionalism and creativity.
? Support Modern Web Trends – Interactive backgrounds are becoming a standard for UI/UX design.
By implementing this animation, you enhance both visual appeal and user experience, which can contribute to better SEO rankings over time.
HTML Code
<html>
<head>
<style>
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<script>
</script>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background-color: #1b1b1b;
}
canvas {
display: block;
}
JavaScript Code
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var n = 0;
var increasing = true;
var rotationAngle = 0;
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// Initial canvas setup
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
function poly() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
var xCoord = [];
var yCoord = [];
var size = Math.min(canvas.width, canvas.height) / 2; // Dynamic size adjustment
for (let k = 0; k <= n; k++) {
var angle = k * (2 * Math.PI / n) + rotationAngle;
xCoord.push(size * Math.sin(angle) + canvas.width / 2);
yCoord.push(size * Math.cos(angle) + canvas.height / 2);
}
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
var colors = ["cyan", "blue", "purple", "deeppink", "red", "orangered", "orange", "yellow", "#0f0", "#00ff88", "cyan"];
colors.forEach((color, index) => gradient.addColorStop(index / (colors.length - 1), color));
ctx.strokeStyle = gradient;
ctx.lineWidth = Math.max(0.5, canvas.width / 500); // Adaptive line width
for (let i = 0; i < xCoord.length; i++) {
for (let j = 0; j < xCoord.length; j++) {
ctx.beginPath();
ctx.moveTo(xCoord[i], yCoord[i]);
ctx.lineTo(xCoord[j], yCoord[j]);
ctx.stroke();
}
}
if (n < 3) increasing = true;
if (n > 24) increasing = false;
if (increasing) n += (n + 4) / 200;
else n -= (n + 4) / 200;
rotationAngle += 0.005;
requestAnimationFrame(poly); // Smooth animation
}
poly(); // Start animation
PHP Code
NO Need