Dynamic Shape Background with HTML, CSS, and JavaScript

Creating visually appealing backgrounds can enhance the user experience and make your website stand out. In this tutorial, we’ll explore how to create a dynamic shape background using HTML, CSS, and JavaScript. This effect features randomly placed, animated shapes that change colors over time, bringing an interactive feel to your site.

---

What You’ll Learn

✅ How to create and animate shapes using CSS 🎨
✅ How to use JavaScript to generate dynamic elements 🔄
✅ How to make shapes move smoothly across the screen 🚀
✅ How to change the colors of elements randomly 🌈
✅ How to create an engaging background effect for your website 🎯

---

1. Setting Up the HTML

We start with a simple HTML structure that doesn’t require predefined shapes. Instead, we dynamically generate them using JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Shape Background</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Shapes will be added dynamically using JavaScript -->
  <script src="script.js"></script>
</body>
</html>

---

2. Styling with CSS

We use CSS to style the background and animate the movement of the shapes.

body {
  margin: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a1a1a;
}

.shape {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #ff6347;
  border-radius: 50%;
  opacity: 0.8;
  animation: move-shape 5s infinite ease-in-out;
}

@keyframes move-shape {
  0% { transform: translate(0, 0); }
  50% { transform: translate(calc(100vw - 50px), calc(100vh - 50px)); }
  100% { transform: translate(0, 0); }
}

---

3. Generating Shapes with JavaScript

JavaScript is used to create and animate multiple shapes dynamically.

const shapeCount = 20;

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

for (let i = 0; i < shapeCount; i++) {
  const shape = document.createElement("div");
  shape.classList.add("shape");
  
  shape.style.top = `${Math.random() * 100}vh`;
  shape.style.left = `${Math.random() * 100}vw`;
  
  const size = Math.random() * 50 + 30;
  shape.style.width = `${size}px`;
  shape.style.height = `${size}px`;
  
  shape.style.backgroundColor = getRandomColor();
  
  document.body.appendChild(shape);
  
  setInterval(() => {
    shape.style.backgroundColor = getRandomColor();
  }, 2000);
}

---

Final Thoughts

By following this tutorial, you’ve learned how to create a dynamic background that adds motion and color to your website. This effect is ideal for creating engaging landing pages, portfolio designs, or simply enhancing the visual appeal of a webpage. Experiment with different shapes, colors, and animations to make it truly unique!

---

🎥 Watch the Tutorial Video:

📂 Code Repository:
GitHub – Dynamic Shape Background

If you found this tutorial helpful, don’t forget to like, comment, and subscribe to Madras Academy for more creative web development tutorials! 🚀