SVG를 사용하여 캔버스에서 만들 수 없었던 그림자 효과를 구현하려 했으나, Safari에서 CSS 그림자가 작동하지 않아 SVG 네이티브 필터를 사용해야 했음. 다른 브라우저와 보이는 모습이 달라서 Safari를 감지하고 CSS 버전을 비활성화하는 자바스크립트를 사용함.
"재귀적 음양"에 대한 배경은 해당 블로그에 설명되어 있으며, 텍스처를 가지고 놀아볼 계획이지만 Safari에서 다르게 보이는 것이 좌절감을 줌. SVG 해석에 대한 표준화가 이루어질지 궁금함.
SVG로 특정 일러스트레이션 스타일을 재현하는 것이 쉽지 않아서 답답함을 느낌. 이 스타일을 "dithering"이라고 하며, CSS-Tricks의 "Grainy Gradients" 페이지에서 같은 기술을 설명함. CSS를 사용하여 전체 이미지에 적용하는 대안도 있음.
SVG를 사용하여 복잡한 컨퍼런스 포스터를 만들었지만, 브라우저와 프로그램마다 다르게 렌더링됨. SVG를 포함/링크하여 임베드할 수 있지만, 다른 SVG를 포함하면 작동하지 않음. 브라우저가 "보안" 문제로 임베드/링크된 이미지를 표시하지 않을 때가 있음. 복잡한 SVG를 PDF로 변환하는 것은 일관성 없이 메모리 부족 문제를 일으킴. SVG를 PDF로 변환하는 각 도구마다 결과가 다름. Inkscape와 같은 도구는 때때로 포함된 SVG를 래스터 그래픽으로 처리함.
필름 사진작가들이 필름의 결을 없애려 애썼지만, 디지털 사진작가들은 그것을 다시 추가하려는 경향이 있음. 디지털의 깔끔함 속에서 이러한 예시들이 매력적으로 느껴짐.
Inkscape가 다양한 필터 효과를 통해 이러한 노이즈를 추가할 수 있으며, Plain SVG로 내보내면 feTurbulence의 사용을 코드에서 확인할 수 있음. 또한, Affinity Designer 2가 노이즈를 어떻게 처리하는지 비교해봄. 내보낸 SVG에는 base64 jpeg 이미지로 노이즈가 포함됨.
"ApeFest" 웹사이트는 CSS 애니메이션(실제로는 JS로 이동)을 사용하여 "무작위로" 움직이는 타일형 PNG 오버레이를 사용하여 동적인 노이즈를 생성함. 기술적으로 단순하지만 효과적임.
SVG 필터의 외관이 엔진과 스케일링 요소에 따라 크게 달라지기 때문에, 미묘한 부분에서만 사용하며, 정밀도가 중요하지 않은 경우에만 사용함. feDisplacementMap과 같은 필터는 안티앨리어싱을 파괴하여 사용하고 싶은 상황의 절반을 망침.
페이지 배경으로 사용하지 말 것을 권장함. 이전에 시도했을 때 다양한 기기에서 이상한 버그가 발생하고, 큰 사이트의 경우 페이지가 완전히 멈추거나 SVG가 일정 크기 이상에서 렌더링이 중단됨.
Perlin Noise와 그 후속인 Fractal Noise는 사실감을 더하거나 "유기적" 느낌을 주는 데 매우 효과적임. 예를 들어, "알라딘(1992)"에서 동굴에서 탈출하는 장면에 효과적으로 사용됨.
확대/축소 수준에 독립적인 방식으로 효과를 만드는 방법에 대한 관심이 있음. 또한, 무작위성을 추가하는 것과 관련하여, 주어진 크기에서 하나의 올바른 렌더 결과를 정의할 수 있는 시드(seed)를 설정하는 방법이 있는지 궁금함.
Hacker News 의견
SVG를 사용하여 캔버스에서 만들 수 없었던 그림자 효과를 구현하려 했으나, Safari에서 CSS 그림자가 작동하지 않아 SVG 네이티브 필터를 사용해야 했음. 다른 브라우저와 보이는 모습이 달라서 Safari를 감지하고 CSS 버전을 비활성화하는 자바스크립트를 사용함.
"재귀적 음양"에 대한 배경은 해당 블로그에 설명되어 있으며, 텍스처를 가지고 놀아볼 계획이지만 Safari에서 다르게 보이는 것이 좌절감을 줌. SVG 해석에 대한 표준화가 이루어질지 궁금함.
SVG로 특정 일러스트레이션 스타일을 재현하는 것이 쉽지 않아서 답답함을 느낌. 이 스타일을 "dithering"이라고 하며, CSS-Tricks의 "Grainy Gradients" 페이지에서 같은 기술을 설명함. CSS를 사용하여 전체 이미지에 적용하는 대안도 있음.
SVG를 사용하여 복잡한 컨퍼런스 포스터를 만들었지만, 브라우저와 프로그램마다 다르게 렌더링됨. SVG를 포함/링크하여 임베드할 수 있지만, 다른 SVG를 포함하면 작동하지 않음. 브라우저가 "보안" 문제로 임베드/링크된 이미지를 표시하지 않을 때가 있음. 복잡한 SVG를 PDF로 변환하는 것은 일관성 없이 메모리 부족 문제를 일으킴. SVG를 PDF로 변환하는 각 도구마다 결과가 다름. Inkscape와 같은 도구는 때때로 포함된 SVG를 래스터 그래픽으로 처리함.
필름 사진작가들이 필름의 결을 없애려 애썼지만, 디지털 사진작가들은 그것을 다시 추가하려는 경향이 있음. 디지털의 깔끔함 속에서 이러한 예시들이 매력적으로 느껴짐.
Inkscape가 다양한 필터 효과를 통해 이러한 노이즈를 추가할 수 있으며, Plain SVG로 내보내면 feTurbulence의 사용을 코드에서 확인할 수 있음. 또한, Affinity Designer 2가 노이즈를 어떻게 처리하는지 비교해봄. 내보낸 SVG에는 base64 jpeg 이미지로 노이즈가 포함됨.
"ApeFest" 웹사이트는 CSS 애니메이션(실제로는 JS로 이동)을 사용하여 "무작위로" 움직이는 타일형 PNG 오버레이를 사용하여 동적인 노이즈를 생성함. 기술적으로 단순하지만 효과적임.
SVG 필터의 외관이 엔진과 스케일링 요소에 따라 크게 달라지기 때문에, 미묘한 부분에서만 사용하며, 정밀도가 중요하지 않은 경우에만 사용함. feDisplacementMap과 같은 필터는 안티앨리어싱을 파괴하여 사용하고 싶은 상황의 절반을 망침.
페이지 배경으로 사용하지 말 것을 권장함. 이전에 시도했을 때 다양한 기기에서 이상한 버그가 발생하고, 큰 사이트의 경우 페이지가 완전히 멈추거나 SVG가 일정 크기 이상에서 렌더링이 중단됨.
Perlin Noise와 그 후속인 Fractal Noise는 사실감을 더하거나 "유기적" 느낌을 주는 데 매우 효과적임. 예를 들어, "알라딘(1992)"에서 동굴에서 탈출하는 장면에 효과적으로 사용됨.
확대/축소 수준에 독립적인 방식으로 효과를 만드는 방법에 대한 관심이 있음. 또한, 무작위성을 추가하는 것과 관련하여, 주어진 크기에서 하나의 올바른 렌더 결과를 정의할 수 있는 시드(seed)를 설정하는 방법이 있는지 궁금함.