Scribd
Upload
12 views2 pages

Page1 HTML

This document is an HTML file that creates a colorful grid animation using chakra colors on a canvas element. It initializes a grid of squares that transition between chakra colors in a smooth animation. The script uses JavaScript to control the drawing and animation of the grid, providing a visually appealing effect.

Uploaded by

lukebushkuhl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views2 pages

Page1 HTML

This document is an HTML file that creates a colorful grid animation using chakra colors on a canvas element. It initializes a grid of squares that transition between chakra colors in a smooth animation. The script uses JavaScript to control the drawing and animation of the grid, providing a visually appealing effect.

Uploaded by

lukebushkuhl
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chakra Colorful Grid - Wave Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="gridCanvas" width="320" height="320"></canvas>
<script>
const canvas = [Link]('gridCanvas');
const ctx = [Link]('2d');

const numRows = 16;


const numCols = 16;
const squareSize = [Link] / numRows;

// Chakra colors
const chakraColors = [
'#FF0000', // Red (Root Chakra)
'#FFA500', // Orange (Sacral Chakra)
'#FFFF00', // Yellow (Solar Plexus Chakra)
'#008000', // Green (Heart Chakra)
'#0000FF', // Blue (Throat Chakra)
'#4B0082', // Indigo (Third Eye Chakra)
'#EE82EE' // Violet (Crown Chakra)
];

// Constants for animation control


const fadeSpeed = 0.01; // Speed of color transition

// Initialize grid colors with random chakra values


let gridColors = [];

function initializeGrid() {
for (let i = 0; i < numRows; i++) {
gridColors[i] = [];
for (let j = 0; j < numCols; j++) {
gridColors[i][j] = {
colorIndex: [Link]([Link]() *
[Link]),
gradientPosition: 0
};
}
}
}
function drawGrid() {
for (let i = 0; i < numRows; i++) {
for (let j = 0; j < numCols; j++) {
const x = i * squareSize;
const y = j * squareSize;

const diagonalIndex = (i + j) % [Link];


const color1 = chakraColors[diagonalIndex];
const color2 = chakraColors[(diagonalIndex + 1) %
[Link]];

const { gradientPosition } = gridColors[i][j];

// Calculate gradient colors


const gradient = [Link](x, y, x + squareSize,
y + squareSize);
[Link](gradientPosition, color1);
[Link](1 - gradientPosition, color2);

// Draw square
[Link] = gradient;
[Link](x, y, squareSize, squareSize);

// Update gradient position for smooth transition


gridColors[i][j].gradientPosition += fadeSpeed;
if (gridColors[i][j].gradientPosition >= 1) {
// Move to the next color in chakraColors array
gridColors[i][j].gradientPosition = 0;
gridColors[i][j].colorIndex = (gridColors[i][j].colorIndex
+ 1) % [Link];
}
}
}
}

function animateGrid() {
[Link](0, 0, [Link], [Link]);
drawGrid();
requestAnimationFrame(animateGrid);
}

initializeGrid(); // Initialize grid with random chakra colors


animateGrid(); // Start animation loop
</script>
</body>
</html>

You might also like