인쇄에서 농도를 크고 작은 점의 밀도로 표현하던 방식을 흉내 낸 도트 패턴. 팝아트·인쇄물 느낌을 줍니다.
디자인 아틀라스<div class="wrap"><div class="photo"></div><div class="dots"></div></div>.wrap{position:relative;width:min(300px,85%);aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.photo{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#fff,#666 60%,#111 100%)}
.dots{position:absolute;inset:0;mix-blend-mode:multiply;
background-image:radial-gradient(circle,#0b0b0f 42%,transparent 43%);background-size:9px 9px;
animation:zoom 5s ease-in-out infinite}
@keyframes zoom{0%,100%{background-size:9px 9px}50%{background-size:13px 13px}}원래는 인쇄기가 연속 색조(사진)를 표현할 수 없어서, 짙은 부분은 큰 점으로 옅은 부분은 작은 점으로 찍어 눈이 섞어 보게 만든 기법입니다(1880년대 신문 인쇄 기술).
웹에서는 repeating-radial-gradient 를 격자로 반복해 근사합니다. 더 정확히 하려면 SVG 패턴과 feComponentTransfer 로 이미지의 밝기를 점 크기에 실제로 매핑해야 합니다.
팝아트·코믹 스타일 일러스트, 인쇄물 리프린트 무드에 씁니다. 작은 텍스트 위에 깔면 가독성이 크게 떨어집니다.