diff --git a/index.html b/index.html
index 862522b..a11cf67 100644
--- a/index.html
+++ b/index.html
@@ -971,47 +971,32 @@
 					<div class="syntax">.fit-[bp]-[contain|cover|fill|scale|none]</div>
 					<div class="demo-card flex-r gap-3 flex-wrap">
 						<div class="flex-c align-items-center gap-2">
-							<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px">
-								<svg viewBox="0 0 100 60" class="fit-contain" style="width:100%;height:100%">
-									<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-primary)" opacity="0.5"/>
-									<circle cx="50" cy="30" r="12" fill="var(--theme-primary)"/>
-								</svg>
+							<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
+								<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-contain">
 							</div>
 							<span class="fs-1 fg-muted">.fit-contain</span>
 						</div>
 						<div class="flex-c align-items-center gap-2">
-							<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px">
-								<svg viewBox="0 0 100 60" class="fit-cover" style="width:100%;height:100%">
-									<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-accent)" opacity="0.5"/>
-									<circle cx="50" cy="30" r="12" fill="var(--theme-accent)"/>
-								</svg>
+							<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
+								<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-cover">
 							</div>
 							<span class="fs-1 fg-muted">.fit-cover</span>
 						</div>
 						<div class="flex-c align-items-center gap-2">
-							<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px">
-								<svg viewBox="0 0 100 60" class="fit-fill" style="width:100%;height:100%">
-									<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-info)" opacity="0.5"/>
-									<circle cx="50" cy="30" r="12" fill="var(--theme-info)"/>
-								</svg>
+							<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
+								<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-fill">
 							</div>
 							<span class="fs-1 fg-muted">.fit-fill</span>
 						</div>
 						<div class="flex-c align-items-center gap-2">
-							<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px">
-								<svg viewBox="0 0 100 60" class="fit-scale" style="width:100%;height:100%">
-									<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-success)" opacity="0.5"/>
-									<circle cx="50" cy="30" r="12" fill="var(--theme-success)"/>
-								</svg>
+							<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
+								<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-scale">
 							</div>
 							<span class="fs-1 fg-muted">.fit-scale</span>
 						</div>
 						<div class="flex-c align-items-center gap-2">
-							<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px">
-								<svg viewBox="0 0 100 60" class="fit-none" style="width:100%;height:100%">
-									<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-warn)" opacity="0.5"/>
-									<circle cx="50" cy="30" r="12" fill="var(--theme-warn)"/>
-								</svg>
+							<div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
+								<img src="./wave.webp" alt="wave" class="w-100 h-100 fit-none">
 							</div>
 							<span class="fs-1 fg-muted">.fit-none</span>
 						</div>