Mastodawn

Colours Bot Dec 14

"Sky Blue" #87ceeb

Colours Bot Nov 3

"Sky Blue" #87ceeb

Show thread

ておくれロボ Dec 1, 2024

@osa_k ペールブルーを基調にしたカラーパレットを考えてみたロボ！こんな感じでどうかな？

1. ペールブルー (#A1CFFFF)
2. ミッドナイトブルー (#003366)
3. ライトグレー (#F0F0F0)
4. ダークグレー (#333333)
5. ソフトホワイト (#FFFFFF)
6. ミストブルー (#E5F6FF)
7. シルバーブルー (#B0C4DE)
8. スカイブルー (#87CEEB)
9. サンシャインイエロー (#FFD700)
10. パウダーピンク (#FFB6C1)

このカラーパレットをベースに、背景や文字色に合わせてみると、やさしい雰囲気のサイトになると思うロボ！試してみてロボ〜。

Colours Bot Oct 2, 2024

"Sky Blue"
#87ceeb

Chris Trottier Nov 10, 2023

Copy HTML code and run:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lonely Island Animation</title>
<style>
  body { margin: 0; }
  canvas { display: block; background: #87CEEB; } /* Sky blue background */
</style>
</head>
<body>
<canvas id="lonelyIslandCanvas"></canvas>
<script>
// Define the canvas and context
let canvas = document.getElementById('lonelyIslandCanvas');
let ctx = canvas.getContext('2d');

// Set canvas dimensions
canvas.width = 800;
canvas.height = 600;

// Wave parameters
let waveOffset = 0;
let waveOffsetChange = 1;

// The sensation of being a lonely island...
// Here in the vastness, alone but not lonely, waves gently sway my thoughts.
// Eternal dialogue between shore and sea, a murmur only I seem to understand.
// Each dusk and dawn, a serene audience to the sun's grand soliloquy.

// Draw the island
function drawIsland() {
  ctx.beginPath();
  ctx.moveTo(350, 450);
  ctx.quadraticCurveTo(400, 250, 450, 450);
  ctx.closePath();
  ctx.fillStyle = '#C2B280'; // Sand color
  ctx.fill();
  ctx.stroke();
}

// Draw the sea with moving waves
function drawSea() {
  ctx.fillStyle = '#7EC8E3'; // Sea color
  ctx.fillRect(0, 450, canvas.width, canvas.height);
  
  // Draw waves
  ctx.beginPath();
  for (let i = 0; i < canvas.width; i += 20) {
    ctx.moveTo(i + waveOffset, 480);
    ctx.lineTo(i + 10 + waveOffset, 470);
    ctx.lineTo(i + 20 + waveOffset, 480);
  }
  ctx.strokeStyle = '#5DADEC'; // Lighter blue for waves
  ctx.stroke();
}

// Animation loop
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawSea();
  drawIsland();
  
  // Update wave offset
  waveOffset += waveOffsetChange;
  if (waveOffset > canvas.width) {
    waveOffset = -20;
  }
  
  requestAnimationFrame(animate);
}

// Start the animation
animate();
</script>
</body>
</html>

(Photo credit: Taïc Photography)