This project creates an animated Truchet-style grid pattern using HTML, JavaScript, and SVG elements. The pattern consists of circles arranged in a grid, with each circle's borders connecting seamlessly with adjacent circles. Additionally, the grid has an automatic rotation effect, where a random selection of circles rotates every second.
- Responsive SVG Grid: The grid adapts to the screen size and fills it dynamically.
- Truchet Pattern Design: Each SVG circle connects with neighboring circles to create a visually pleasing pattern.
- Random Rotation Animation: 50 randomly selected SVG elements rotate by 90 degrees every second, creating a continuously changing design.
- Interactive Click Rotation: Users can click on any circle in the grid to rotate it by 90 degrees.