xhackjp1/index.html

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    function drawIchimatsu(patern1, patern2) {
      for (let i = 0; i < 10; i++) {
        for (let j = 0; j < 10; j++) {
          setTimeout(() => drawRect(i, j, patern1, patern2), 40 * (i+j));
        }
      }
    }
    function drawRect(i, j, patern1, patern2) {
      ctx.fillStyle = ((i + j) % 2 == 0) ? patern1 : patern2;
      ctx.fillRect(20 * i, 20 * j, 20, 20);
    }
    setInterval(() => { drawIchimatsu("#cd12ab", "#ee1288") }, 1000);
    setInterval(() => { drawIchimatsu("#dc338f", "#cc336e") }, 1500);
  </script>
</body>

</html>

## 鬼滅の.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="canvas" width="480" height="480"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const PANEL_SIZE = 30
    const REPEAT_COUNT = 480 / PANEL_SIZE
    const INTERVAL = 20

    function drawIchimatsu(patern1, patern2) {
      for (let i = 0; i < REPEAT_COUNT; i++) {
        for (let j = 0; j < REPEAT_COUNT; j++) {
          setTimeout(() => drawRect(i, j, patern1, patern2), INTERVAL * (i+j));
        }
      }
    }

    function drawRect(i, j, patern1, patern2) {
      ctx.fillStyle = ((i + j) % 2 == 0) ? patern1 : patern2;
      ctx.fillRect(PANEL_SIZE * i, PANEL_SIZE * j, PANEL_SIZE, PANEL_SIZE);
    }

    setInterval(() => { drawIchimatsu("RGB(79, 172, 135)", "RGB(41, 37, 34)") }, 1000);
    setInterval(() => { drawIchimatsu("RGB(41, 37, 34)", "RGB(79, 172, 135)") }, 4250);
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<script>
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');
	function drawIchimatsu(patern1, patern2) {
	for (let i = 0; i < 10; i++) {
	for (let j = 0; j < 10; j++) {
	setTimeout(() => drawRect(i, j, patern1, patern2), 40 * (i+j));
	}
	}
	}
	function drawRect(i, j, patern1, patern2) {
	ctx.fillStyle = ((i + j) % 2 == 0) ? patern1 : patern2;
	ctx.fillRect(20 * i, 20 * j, 20, 20);
	}
	setInterval(() => { drawIchimatsu("#cd12ab", "#ee1288") }, 1000);
	setInterval(() => { drawIchimatsu("#dc338f", "#cc336e") }, 1500);
	</script>
	</body>

	</html>