Skip to content

Instantly share code, notes, and snippets.

@comficker

comficker/duck-pixel-art.html

Created October 16, 2023 12:51
Show Gist options
  • Save comficker/764541ea8f615a891d8be92a30e27248 to your computer and use it in GitHub Desktop.
Save comficker/764541ea8f615a891d8be92a30e27248 to your computer and use it in GitHub Desktop.
Download ZIP
Duck pixel art - demo: https://www.simplepixelart.com
Raw
duck-pixel-art.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta name="theme-color" content="#fafafa">
<link rel="manifest" href="site.webmanifest">
</head>
<body style=" padding: 0; margin: 0;">
<div style="width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;">
<div>
<canvas id="canvas" width="512" height="512" style="width: 512px; height: 512px"></canvas>
</div>
</div>
<script>
const size = 16
const colors = [
"#c6bfbe",
"#040309",
"#e0e6e9",
"#9d919d",
"#b0813f",
"#cf7f33",
"#adb6b1",
"#1d1f29"
]
const data = {
"2_3": 1,
"2_4": 1,
"2_5": 1,
"2_6": 1,
"2_8": 1,
"2_9": 1,
"3_3": 1,
"3_4": 3,
"3_5": 1,
"3_6": 4,
"3_7": 1,
"3_8": 6,
"3_9": 0,
"4_2": 1,
"4_3": 3,
"4_4": 1,
"4_5": 1,
"4_6": 4,
"4_7": 2,
"4_8": 2,
"4_9": 2,
"5_1": 1,
"5_2": 2,
"5_3": 1,
"5_4": 1,
"5_5": 1,
"5_6": 5,
"5_7": 2,
"5_8": 2,
"5_9": 2,
"6_1": 1,
"6_2": 2,
"6_3": 1,
"6_4": 0,
"6_5": 0,
"6_6": 4,
"6_7": 2,
"6_8": 2,
"6_9": 2,
"7_1": 1,
"7_2": 2,
"7_3": 1,
"7_4": 1,
"7_5": 1,
"7_6": 2,
"7_7": 2,
"7_8": 2,
"7_9": 2,
"8_1": 1,
"8_2": 2,
"8_3": 1,
"8_4": 3,
"8_5": 1,
"8_6": 2,
"8_7": 2,
"8_8": 2,
"8_9": 2,
"9_1": 1,
"9_2": 2,
"9_3": 3,
"9_4": 1,
"9_5": 1,
"9_6": 2,
"9_7": 2,
"9_8": 0,
"9_9": 0,
"10_2": 1,
"10_3": 1,
"10_4": 1,
"10_5": 2,
"10_6": 2,
"10_7": 0,
"10_8": 2,
"10_9": 2,
"11_3": 1,
"11_4": 1,
"11_5": 1,
"11_6": 1,
"11_7": 2,
"11_8": 2,
"11_9": 2,
"12_7": 1,
"12_8": 2,
"12_9": 2,
"13_8": 1,
"13_9": 1,
"2_10": 1,
"2_11": 1,
"3_10": 0,
"3_11": 0,
"3_12": 1,
"4_10": 0,
"4_11": 0,
"4_12": 7,
"5_10": 2,
"5_11": 0,
"5_12": 0,
"5_13": 1,
"5_14": 1,
"6_10": 2,
"6_11": 0,
"6_12": 0,
"6_13": 4,
"6_14": 4,
"7_10": 2,
"7_11": 0,
"7_12": 0,
"7_13": 1,
"7_14": 1,
"8_10": 2,
"8_11": 0,
"8_12": 0,
"8_13": 1,
"8_14": 3,
"9_10": 0,
"9_11": 0,
"9_12": 0,
"9_13": 1,
"9_14": 1,
"10_10": 0,
"10_11": 0,
"10_12": 0,
"10_13": 4,
"10_14": 4,
"11_10": 2,
"11_11": 0,
"11_12": 7,
"11_13": 1,
"11_14": 1,
"12_10": 2,
"12_11": 0,
"12_12": 1,
"13_10": 1,
"13_11": 0,
"13_12": 1,
"14_10": 1,
"14_11": 1
}
const canvas = document.getElementById("canvas");
const baseSize = Math.round(canvas.width / size)
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#F0F0F0";
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (const key in data) {
const [x, y] = key.split("_")
ctx.fillStyle = colors[data[key]];
ctx.fillRect(+x * baseSize, +y * baseSize, baseSize, baseSize);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment