이미지를 아주 낮은 해상도로 줄였다가 다시 확대해, 네모난 색 블록만 남기는 모자이크 효과.
디자인 아틀라스<canvas id="px" width="16" height="10"></canvas>#px{width:min(260px,80%);aspect-ratio:16/10;border-radius:8px;
image-rendering:pixelated;image-rendering:-moz-crisp-edges}const px = document.getElementById('px');
const ctx = px.getContext('2d');
let n = 6, dir = 1;
function draw(res) {
px.width = res;
px.height = Math.max(2, Math.round(res * 0.625));
const g = ctx.createLinearGradient(0, 0, px.width, px.height);
g.addColorStop(0, '#5b5bf7'); g.addColorStop(.5, '#ff5c8a'); g.addColorStop(1, '#ffb648');
ctx.fillStyle = g; ctx.fillRect(0, 0, px.width, px.height);
ctx.fillStyle = '#18c29c';
ctx.beginPath(); ctx.arc(px.width * 0.6, px.height * 0.4, px.width * 0.18, 0, Math.PI * 2); ctx.fill();
}
function loop() {
n += dir * 0.15;
if (n > 28) dir = -1;
if (n < 4) dir = 1;
draw(Math.round(n));
requestAnimationFrame(loop);
}
loop();원리는 단순합니다 — 이미지를 아주 작은 크기(예: 16×10px)로 그린 뒤 CSS 로 원래 크기까지 늘리면서 image-rendering: pixelated 를 줘서 브라우저의 기본 보간(스무딩)을 끕니다. 그러면 확대된 낱개 픽셀이 네모 블록으로 그대로 보입니다.
캔버스에 drawImage 로 작게 그린 뒤 그 캔버스를 CSS 로 확대하는 방식이 사진에 흔히 쓰입니다. 모자이크 강도는 축소 해상도로 조절합니다 — 해상도가 낮을수록 블록이 커집니다.
민감 정보 가리기(모자이크), 레트로 게임 그래픽, 로딩 중 저해상도 프리뷰(LQIP)에 씁니다. 정보 은닉이 목적이면 블록을 충분히 크게 설정하세요 — 약하면 원본을 추정할 수 있습니다.