Skip to content

Instantly share code, notes, and snippets.

@pangpond

pangpond/fish.html

Created October 10, 2025 07:16
Show Gist options
  • Save pangpond/897e97e24063652d2793945eed4786dc to your computer and use it in GitHub Desktop.
Save pangpond/897e97e24063652d2793945eed4786dc to your computer and use it in GitHub Desktop.
Download ZIP
fish
Raw
fish.html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SVG Fish Graph (4–5 Colors)</title>
<style>
:root {
/* ปรับสีของแต่ละส่วนได้ที่นี่ */
--c1: #4fc3f7;
/* ส่วน 1 (หัว) */
--c2: #29b6f6;
/* ส่วน 2 */
--c3: #039be5;
/* ส่วน 3 */
--c4: #0288d1;
/* ส่วน 4 */
--c5: #01579b;
/* ส่วน 5 (หาง) */
--stroke: #0b3954;
--eye: #0b3954;
--label: rgba(255, 255, 255, .9);
}
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans Thai", sans-serif;
background: #f7fafc;
margin: 0;
padding: 24px;
color: #0b3954;
}
.wrap {
max-width: 900px;
margin: auto;
}
h1 {
font-size: clamp(20px, 3vw, 28px);
margin: 0 0 12px;
}
p {
margin: 0 0 14px;
opacity: .9
}
.panel {
background: #fff;
border-radius: 16px;
padding: 16px;
box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}
.controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 8px;
}
.controls label {
font-size: 14px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: #eef5fb;
font-size: 13px;
}
svg {
width: 100%;
height: auto;
display: block;
}
.fish {
transform-origin: 50% 50%;
animation: swim 4s ease-in-out infinite;
}
@keyframes swim {
0%,
100% {
transform: translateX(0px);
}
50% {
transform: translateX(6px);
}
}
/* ป้ายชื่อ (labels) */
.labels text {
font-weight: 600;
fill: var(--label);
letter-spacing: .2px;
pointer-events: none;
}
.labels.hide text {
display: none;
}
/* ให้เส้นรอบนอกคมชัด */
.outline {
fill: none;
stroke: var(--stroke);
stroke-width: 4;
}
.legend {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
margin-top: 10px;
}
.legend .swatch {
height: 12px;
border-radius: 4px;
}
.legend small {
display: block;
opacity: .8;
margin-top: 6px;
font-size: 12px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>กราฟรูปปลาแบบ SVG (แบ่ง 4–5 สี)</h1>
<p>ตัวอย่างนี้ใช้ <strong>clipPath</strong> ตัดรูปร่างปลา แล้วเติม <em>rect</em> เป็นแถบสี 5 ส่วน (ปรับเป็น 4 ส่วนได้ง่าย ๆ) พร้อมป้ายชื่อกลางแต่ละส่วน และแอนิเมชันว่ายน้ำเบา ๆ</p>
<div class="panel">
<div class="controls">
<span class="chip">
<input id="toggle-labels" type="checkbox" checked>
<label for="toggle-labels">แสดงป้ายชื่อ</label>
</span>
<span class="chip">ปรับสีได้ใน <code>:root</code></span>
</div>
<!-- เริ่ม SVG -->
<svg viewBox="0 0 600 300" role="img" aria-labelledby="title desc">
<title id="title">Fish-Shaped Segment Graph</title>
<desc id="desc">Fish silhouette clipped over five colored vertical segments with labels and a subtle swim animation.</desc>
<!-- กำหนดรูปร่างปลาเป็น clipPath -->
<defs>
<clipPath id="fishClip" clipPathUnits="userSpaceOnUse">
<!-- รูปร่างปลา (ลำตัว + หาง) -->
<path id="fish-shape" d="M80,150
Q140,90 260,90
Q340,90 380,110
Q420,130 460,130
L540,90 520,150 540,210
L460,170
Q420,170 380,190
Q340,210 260,210
Q140,210 80,150 Z" />
</clipPath>
</defs>
<!-- แถบสี 5 ส่วน วางใต้ clipPath -->
<g class="fish" clip-path="url(#fishClip)">
<rect x="0%" y="0" width="20%" height="100%" fill="var(--c1)" />
<rect x="20%" y="0" width="20%" height="100%" fill="var(--c2)" />
<rect x="40%" y="0" width="20%" height="100%" fill="var(--c3)" />
<rect x="60%" y="0" width="20%" height="100%" fill="var(--c4)" />
<rect x="80%" y="0" width="20%" height="100%" fill="var(--c5)" />
</g>
<!-- เส้นรอบปลาให้คม -->
<use href="#fish-shape" class="outline" />
<!-- ตาปลา -->
<circle cx="120" cy="145" r="7" fill="var(--eye)" />
<!-- ป้ายชื่อ (สามารถแก้ข้อความได้) -->
<g class="labels" id="labels">
<text x="10%" y="155" text-anchor="middle" font-size="18">ส่วนที่ 1</text>
<text x="30%" y="155" text-anchor="middle" font-size="18">ส่วนที่ 2</text>
<text x="50%" y="155" text-anchor="middle" font-size="18">ส่วนที่ 3</text>
<text x="70%" y="155" text-anchor="middle" font-size="18">ส่วนที่ 4</text>
<text x="90%" y="155" text-anchor="middle" font-size="18">ส่วนที่ 5</text>
</g>
</svg>
<!-- คำอธิบายสั้น ๆ และ Legend -->
<div class="legend">
<div>
<div class="swatch" style="background:var(--c1)"></div>
<small>ส่วน 1</small>
</div>
<div>
<div class="swatch" style="background:var(--c2)"></div>
<small>ส่วน 2</small>
</div>
<div>
<div class="swatch" style="background:var(--c3)"></div>
<small>ส่วน 3</small>
</div>
<div>
<div class="swatch" style="background:var(--c4)"></div>
<small>ส่วน 4</small>
</div>
<div>
<div class="swatch" style="background:var(--c5)"></div>
<small>ส่วน 5</small>
</div>
</div>
</div>
<p style="margin-top:16px; font-size:14px; opacity:.85">
📌 เคล็ดลับ: ถ้าอยากให้เป็น 4 สี ให้ลบ <code>&lt;rect&gt;</code> อันสุดท้าย (หรือรวมเปอร์เซ็นต์ใหม่ เช่น 25% x 4) และแก้ป้ายชื่อให้ตรงกัน
</p>
</div>
<script>
// Toggle labels on/off
const chk = document.getElementById('toggle-labels');
const labels = document.getElementById('labels');
const update = () => labels.classList.toggle('hide', !chk.checked);
chk.addEventListener('change', update); update();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment