designpaca/research/svg/04-sources.md

# 04. 조사 소스 목록

총 **183개**. `★` = 본문 전체를 직접 열람해 내용을 추출한 소스(21개), 그 외는 검색 결과 메타데이터·요약 수준에서 확인한 소스.

---

## A. 스펙 / 표준 문서

1. ★ https://www.w3.org/TR/filter-effects-1/ — Filter Effects Module Level 1. 필터 영역·서브영역 정의, 입력 키워드 6종, feBlend 모드 목록, CSS 단축 함수↔프리미티브 대응의 1차 출처.
2. ★ https://www.w3.org/TR/SVG11/filters.html — SVG 1.1 Filter Effects 챕터. 각 프리미티브의 초기값과 에러 처리 규칙의 원전.
3. https://drafts.fxtf.org/filter-effects-1/ — FXTF 에디터 초안(최신 편집본). `/filter-effects/` 경로는 404이므로 `-1` 붙은 쪽을 써야 한다.
4. https://www.w3.org/Graphics/SVG/1.1/filters.html — SVG 1.1 2003년판 필터 챕터. 서브영역 설명이 상세하다.
5. https://www.w3.org/TR/SVGFilter12/ — SVG Filters 1.2 Part 2. 채택되지 않았지만 feTile·서브영역 설명이 명확하다.
6. https://www.w3.org/TR/2000/CR-SVG-20000802/filters.html — SVG 1.0 CR. `lighting-color`가 애니메이터블임을 명시한 초기 문서.
7. https://lists.w3.org/Archives/Public/public-fxtf-archive/2017Nov/0003.html — filter가 fixed/absolute 자손의 컨테이닝 블록을 만들어야 한다는 워킹그룹 논의.
8. https://github.com/w3c/fxtf-drafts/issues/323 — FillPaint/StrokePaint의 올바른 동작이 무엇인지조차 합의되지 않았음을 보여주는 이슈. 실무에서 쓰면 안 되는 근거.
9. https://github.com/w3c/svgwg/issues/1142 — "liquid glass" UI를 위한 상호운용 가능한 backdrop displacement/refraction 정의 요청. 현재 이 기능이 비표준임을 보여준다.
10. https://github.com/w3c/csswg-drafts/issues/1273 — CSS에 turbulence/noise 이미지 함수를 넣자는 제안. 아직 SVG 필터가 유일한 절차적 노이즈 수단인 이유.
11. https://lists.w3.org/Archives/Public/www-svg/2007Feb/0053.html — 필터 서브영역 해석에 대한 초기 논의.
12. https://lists.w3.org/Archives/Public/www-style/2014Mar/0161.html — 필터 성능/구현에 관한 Adobe(Dirk Schulze)의 코멘트.
13. https://lists.w3.org/Archives/Public/www-svg/2010Aug/0000.html — feTurbulence seed 구현 문제 관련 메일.

## B. MDN 레퍼런스 (프리미티브별 정본)

14. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/filter — `<filter>`의 x/y/width/height 기본값(-10%/-10%/120%/120%), filterUnits/primitiveUnits.
15. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feTurbulence — type/baseFrequency/numOctaves/seed/stitchTiles 전체 속성과 linearRGB 기본값.
16. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feColorMatrix — 5×4 행렬 레이아웃, 항등 행렬, saturate/hueRotate/luminanceToAlpha 예제.
17. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComponentTransfer — identity/table/discrete/linear/gamma 5종의 정확한 공식과 기본값.
18. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDropShadow — dx=2/dy=2/stdDeviation=2 기본값, flood-color/flood-opacity.
19. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting — surfaceScale/specularConstant/specularExponent(1~128), 광원 3종 속성, feComposite arithmetic 합성 관례.
20. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur — stdDeviation의 number-optional-number, 큰 블러 시 필터 영역 확장 지침.
21. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feImage — href/preserveAspectRatio/crossorigin, SVG 소스는 래스터화된다는 점.
22. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feBlend — in/in2 의미와 CSS 블렌드 모드 지원.
23. ★ https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feMorphology — erode/dilate 동작과 CSS 적용 예제.
24. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDisplacementMap — 변위 공식 `P'(x,y) ← P(x + scale×(XC−0.5), y + scale×(YC−0.5))`.
25. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting — 난반사 조명, surfaceScale/diffuseConstant.
26. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters — 필터 기본값이 linearRGB이고 다른 색 연산은 sRGB라는 불일치의 정본.
27. https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-filters — 같은 속성의 CSS 프로퍼티 버전.
28. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/edgeMode — edgeMode 값 3종(duplicate/wrap/none)과 기본값 none.
29. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/flood-color — flood-color가 CSS 프로퍼티이자 애니메이터블임을 명시.
30. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/flood-opacity — flood-opacity 기본값과 애니메이션 가능 여부.
31. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/k3 — feComposite arithmetic의 k 계수 설명.
32. https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/k2 — 위와 같음.
33. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter — backdrop-filter 정의와 지원 현황.
34. https://developer.mozilla.org/en-US/docs/Web/CSS/filter — CSS filter 프로퍼티, url() 참조 포함.
35. https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur — CSS blur()가 stdDeviation과 어떻게 대응하는지.
36. https://developer.mozilla.org/en-US/docs/Web/API/SVGFETurbulenceElement/seed — seed의 DOM 인터페이스, 절삭 규칙.
37. https://developer.mozilla.org/en-US/docs/Web/API/SVGFETurbulenceElement/numOctaves — numOctaves DOM 속성.
38. https://developer.mozilla.org/en-US/docs/Web/API/SVGFESpecularLightingElement/surfaceScale — surfaceScale DOM 속성.
39. https://developer.mozilla.org/en-US/docs/Web/API/SVGFEConvolveMatrixElement/edgeMode — feConvolveMatrix의 edgeMode 기본값(duplicate).
40. https://github.com/mdn/content/blob/main/files/en-us/web/svg/reference/element/feturbulence/index.md — MDN feTurbulence 문서 원본 마크다운.
41. https://github.com/mdn/browser-compat-data/issues/24110 — backdrop-filter의 SVG 필터 지원이 Firefox/Safari에 없다는 호환성 데이터 이슈.
42. https://github.com/mdn/browser-compat-data/issues/18810 — Safari의 feTurbulence 지원 데이터 정정 이슈.
43. https://caniuse.com/?search=feTurbulence — feTurbulence 브라우저 지원표.

## C. Sara Soueidan / Codrops SVG 필터 시리즈 (교과서)

44. ★ https://tympanus.net/codrops/2019/01/15/svg-filters-101/ — 필터 영역 기본값, in/in2/result 배선, SourceGraphic/SourceAlpha, 드롭섀도 체인 예제. 입문의 정본.
45. ★ https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/ — feMorphology 아웃라인/녹아웃 텍스트 전체 코드. stroke 대비 장점 설명.
46. ★ https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/ — 듀오톤 완전 코드, hex→tableValues 변환, sRGB 명시 필요성.
47. ★ https://tympanus.net/codrops/2019/02/19/svg-filter-effects-creating-texture-with-feturbulence/ — baseFrequency 실전 범위(0.02~0.2), numOctaves 한계, 종이 질감 feDiffuseLighting 코드.
48. https://tympanus.net/codrops/2019/02/12/svg-filter-effects-conforming-text-to-surface-texture-with-fedisplacementmap/ — 텍스처 표면에 텍스트를 밀착시키는 변위맵 기법.
49. https://tympanus.net/codrops/2019/02/26/svg-filter-effects-moving-forward/ — 시리즈 마무리. 추가 리소스·실험 모음.
50. https://www.sarasoueidan.com/blog/svg-filters-series/ — 시리즈 전체 인덱스.
51. https://tympanus.net/codrops/author/sarasoueidan/ — 저자 아카이브.
52. https://www.youtube.com/watch?v=kfOhlU_iRVU — "SVG Filters: The Crash Course" (An Event Apart). 영상 강의판.
53. https://hookedoncode.com/2019/07/svg-filters-a-crash-course-by-sara-soueidan/ — 위 강연 요약 노트.
54. https://tympanus.net/codrops/2015/03/10/creative-gooey-effects/ — Gooey 효과의 고전 아티클. blur+alpha contrast 원리.
55. https://sudonull.com/post/717-Effects-of-SVG-filters-Part-2-Outline-text-with-feMorphology — 위 45번의 러시아어 번역판.
56. https://webdesigntips.blog/more-website-design-news/svg-filter-effects-duotone-images-with-fecomponenttransfer/ — 46번의 미러.
57. https://emptyq.net/a?ID=fe324b95-2175-46c0-9a09-31e5a0c748e1 — 45번의 미러.

## D. CSS-Tricks / Smashing / Frontend Masters

58. ★ https://css-tricks.com/gooey-effect/ — Gooey 필터 정본 코드. `values="... 18 -7"`의 의미, feBlend vs feComposite atop 선택, Safari 주의.
59. ★ https://css-tricks.com/grainy-gradients/ — 노이즈 SVG를 배경으로 깔고 contrast/brightness로 극단화하는 기법.
60. ★ https://css-tricks.com/creating-patterns-with-svg-filters/ — feTurbulence + discrete/table로 별하늘·나무결·달마시안·위장무늬 패턴 생성. "복잡한 패턴은 이미지로 구워 쓰라"는 성능 권고.
61. https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/ — feColorMatrix 기반 듀오톤(대안 접근).
62. https://css-tricks.com/almanac/properties/f/filter/ — CSS filter 프로퍼티 알마낙.
63. https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/ — prefers-reduced-motion 사용법.
64. ★ https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/ — 변위 필터 심층 해설. 절대 변위맵 만들기, feImage 참조 방식별 브라우저 지원표, SMIL/anime.js 애니메이션, WebKit 제약. **가장 정보 밀도가 높은 단일 소스.**
65. https://www.smashingmagazine.com/2022/05/magical-svg-techniques/ — SVG 전반 기법 모음(Amelia Wattenberger의 "telescope" 비유 인용).
66. https://www.smashingmagazine.com/2026/01/unstacking-css-stacking-contexts/ — filter/backdrop-filter가 스태킹 컨텍스트와 컨테이닝 블록을 만드는 문제 정리.
67. https://frontendmasters.com/blog/grainy-gradients/ — 그레이니 그라디언트 후속 정리.
68. https://frontendmasters.com/blog/non-square-image-blur-extensions/ — feGaussianBlur edgeMode의 브라우저 지원(Safari 전용) 실측.

## E. Liquid Glass / 굴절 유리

69. ★ https://kube.io/blog/liquid-glass-css-svg/ — Snell 법칙 기반 변위맵 생성의 수학적 근거. R=x/G=y 인코딩(중립 128), scale 매핑, `color-interpolation-filters="sRGB"` 필수 이유, Chromium 전용 제약.
70. ★ https://blog.logrocket.com/how-create-liquid-glass-effects-css-and-svg/ — feImage 변위맵 + specular 레이어 + backdrop-filter의 완전한 React 구현. 크기별 맵을 따로 만들라는 실무 제약.
71. https://github.com/nikdelvin/liquid-glass — CSS+SVG만으로 iOS 26 Liquid Glass를 재현한 컴포넌트 모음.
72. https://github.com/deepika-builds/liquid-glass — SVG 변위 기반 굴절, 무의존성 단일 파일 구현.
73. https://www.cssscript.com/liquid-glass-ui/ — 순수 CSS+SVG 필터 Liquid Glass UI 튜토리얼.
74. https://medium.com/ekino-france/liquid-glass-in-css-and-svg-839985fcb88d — feImage PNG 변위맵 + feGaussianBlur + feDisplacementMap 조합 해설.
75. https://freefrontend.com/css-liquid-glass/ — Liquid Glass 스니펫 모음(레퍼런스 탐색용).
76. https://freefrontend.com/code/liquid-glass-effect-2026-02-05/ — 최신 Liquid Glass 데모.
77. https://connect.mozilla.org/t5/ideas/support-svg-filters-in-backdrop-filter-for-advanced-glass/idi-p/98453 — Firefox에 backdrop-filter SVG 필터 지원을 요청하는 공식 아이디어 스레드(2025).
78. https://codepen.io/iamvdo/pen/VLOGdw — SVG 필터로 backdrop-filter를 흉내내는 고전 데모.
79. https://www.svggenie.com/blog/advanced-svg-filters-glassmorphism-glitch — 글래스모피즘과 글리치 효과 조합.

## F. 노이즈 / 그레인 / 텍스처

80. https://www.freecodecamp.org/news/grainy-css-backgrounds-using-svg-filters/ — SVG 필터로 그레이니 배경 만들기 단계별 가이드.
81. https://daniel.do/article/making-noisy-svgs — 노이즈 SVG 제작 실전.
82. https://ibelick.com/blog/create-grainy-backgrounds-with-css — CSS만으로 그레인 배경 만들기.
83. https://gist.github.com/skeptrunedev/e1f0cf00641fb26bbd0acf937f57c6a5 — 필름 그레인 SVG+HTML 스니펫.
84. https://www.fffuel.co/nnnoise/ — 온라인 SVG 노이즈 텍스처 생성기. 파라미터 감 잡는 데 유용.
85. https://imagetosvg.com/how-to/svg-feturbulence-filter-primitive — feTurbulence 절차적 노이즈 가이드.
86. https://dev.to/hexshift/creating-organic-textures-with-svg-filter-distortions-1moj — 변위 기반 유기적 텍스처.
87. https://codepen.io/Chokcoco/pen/OJWLXPY — feTurbulence + feDiffuseLighting 거친 종이 질감 CodePen.
88. https://oreillymedia.github.io/Using_SVG/extras/ch16-feTurbulence.html — "Using SVG" 책의 feTurbulence 파형 만들기 챕터.
89. https://www.oreilly.com/library/view/designing-svg-web/0735711666/0735711666_ch07lev1sec3.html — SVG 필터 범위 개괄(고전 서적).

## G. 색상 / 듀오톤 / 색수차

90. ★ https://utilitybend.com/blog/revisiting-svg-filters-my-forgotten-powerhouse-for-duotones-noise-and-other-effects/ — 듀오톤/노이즈/방향성 모션블러(`stdDeviation="15 0"`) 실용 코드 모음. 필터 컨테이너 접근성 패턴.
91. ★ https://johndjameson.com/posts/chromatic-aberration-with-svg-filters — 색수차 완전 코드. 채널별 feColorMatrix + feOffset + feGaussianBlur + screen 블렌드.
92. https://johndjameson.com/posts/understanding-fecolormatrix-svg-filters — feColorMatrix 행렬 읽는 법 입문.
93. https://github.com/yoksel/svg-gradient-map — 듀오톤/트라이톤 필터 생성 도구 소스.
94. https://yoksel.github.io/svg-gradient-map/ — 위 도구 라이브 버전. 이미지 업로드 → 코드 복사.
95. https://yoksel.github.io/svg-filters/ — 필터 체인을 GUI로 조립하는 플레이그라운드. 프리셋 다수.
96. https://yoksel.github.io/svg-filters-02-2018/ — yoksel의 SVG 필터 강연 슬라이드(러시아어).
97. https://jmperezperez.com/blog/duotone-using-css-blend-modes/ — CSS 블렌드 모드 기반 듀오톤(SVG 대안, 정확도는 낮음).
98. https://codepen.io/lentilz/pen/mPOKdG/ — 듀오톤 SVG 필터 CodePen.
99. https://stuffandnonsense.co.uk/blog/svg-filters-for-emmas-website — 실제 사이트에 SVG 필터를 적용한 사례 연구.

## H. 손그림 / 왜곡 / 글리치

100. ★ https://camillovisini.com/coding/simulating-hand-drawn-motion-with-svg-filters — feTurbulence+feDisplacementMap으로 손그림 모션. baseFrequency 오프셋을 100ms마다 순환시키는 방식.
101. ★ https://henry.codes/writing/how-to-distort-text-with-svg/ — 텍스트 왜곡. scale을 로그 스케일(1→2→10→50→200)로 탐색하라는 실용 팁, 텍스트 선택 가능성 유지.
102. https://kirgroup.net/blog/2025/07/21-SVG-Hand-Drawing-without-js.html — JS 없이 SMIL만으로 손그림 모션 구현.
103. https://heredragonsabound.blogspot.com/2020/02/creating-pencil-effect-in-svg.html — 연필 효과: 변위된 선을 여러 번 겹쳐 feBlend로 합치는 기법.
104. https://bengammon.co.uk/rough-css-borders-with-svg-filters/ — CSS 테두리를 러프하게 만드는 최소 구현.
105. https://medium.com/swlh/using-the-svg-feturbulence-filter-for-wave-effects-2b8cb2546ee6 — 파형 효과에 feTurbulence 활용.
106. https://codepen.io/smashingmag/pen/yLXOgoQ — Smashing 기사의 글리치 트랜지션 CodePen(feFlood 밴드 + 변위).
107. https://codepen.io/JWS-Animation/pen/jOwOpZr — feTurbulence 글리치 텍스트.
108. https://www.nickhart.co.uk/2021/04/18/animated-svg-cyberpunk-logo-with-filters/ — 사이버펑크 로고: 색수차 + 글리치 애니메이션 조합.
109. https://codepen.io/Sid701/pen/OJXKMXw — 물결 리플 필터.
110. https://codepen.io/enxaneta/post/svg-waves-with-fedisplacementmap — feDisplacementMap 파형 심화.
111. https://redstapler.co/realistic-water-effect-svg-turbulence-filter/ — 사실적인 물 효과 튜토리얼.
112. https://dev.to/matteo1222/explained-4a4b — feDisplacementMap 동작 원리 해설.
113. https://medium.com/@jaikumarsharma94130/building-a-special-invisible-svg-component-that-defines-wavy-filters-2a09e6050de6 — 재사용 가능한 wavy 필터 컴포넌트 설계.
114. https://www.youtube.com/watch?v=lisZT8JIeKk — Squigglevision 메뉴 호버 효과 영상 튜토리얼.
115. https://observablehq.com/@abbe98/svg-paths-using-filters-animated — 필터로 애니메이션되는 SVG 경로 실험.

## I. 리소그래프 / 인쇄

116. https://osmanyy.com/projects/risograph-css/ — Risograph.css. mix-blend-mode multiply 잉크 레이어 + feTurbulence 그레인 마스크 + 커스텀 프로퍼티 misregistration. **본 문서 레시피 16의 직접적 참고.**
117. https://codepen.io/chriskirknielsen/pen/rNmgXyV — SVG 기반 리소그래프 그라디언트.
118. https://chrislemke.github.io/website_designs/designs/Risograph.html — 리소그래프 웹 디자인 레퍼런스.
119. https://libguides.reed.edu/c.php?g=1339150&p=9870131 — Reed College 리소 인쇄 가이드. 실제 인쇄 특성(어긋남 범위, 잉크 팔레트) 근거.
120. https://studio-ity.com/riso/ — 리소 효과 온라인 시뮬레이터. 2~4색 레이어, 그레인, 하프톤 파라미터 참고.
121. https://www.grayscaleimage.org/posts/duotone-design-guide — 듀오톤 디자인 가이드(색 선택 관점).

## J. 조명 / 컨볼루션

122. https://vanseodesign.com/web-design/svg-filter-primitives-fespecularlighting/ — feSpecularLighting 실전 튜토리얼.
123. https://vanseodesign.com/web-design/svg-filter-primitives-feconvolvematrix/ — feConvolveMatrix로 엠보스/베벨/샤픈 만들기.
124. https://vanseodesign.com/web-design/svg-filter-primitives-fecomposite/ — feComposite 연산자별 결과 비교.
125. https://apike.ca/prog_svg_filter_feComposite.html — feComposite arithmetic k1~k4 조합 시각 예제.
126. https://www.svgbasics.com/filters2.html — 조명 필터 기초 튜토리얼.
127. https://www.creativebloq.com/netmag/how-go-beyond-basics-svg-filters-71412280 — 조명·질감 조합 심화(net magazine).
128. https://docs.w3cub.com/svg/element/fespecularlighting — feSpecularLighting 레퍼런스 미러.
129. https://docs.w3cub.com/svg/element/femorphology — feMorphology 레퍼런스 미러.
130. https://docs.w3cub.com/svg/element/fecomposite.html — feComposite 레퍼런스 미러.
131. https://svgwrite.readthedocs.io/en/latest/classes/fe_specular_lighting.html — Python svgwrite 문서. 속성 기본값이 명시적으로 표로 정리돼 있어 참조하기 좋다.
132. https://svgwrite.readthedocs.io/en/latest/classes/fe_tile.html — feTile 속성 정리.
133. https://svgwrite.readthedocs.io/en/latest/classes/fe_morphology.html — feMorphology 속성 정리.
134. https://svgwrite.readthedocs.io/en/latest/classes/fe_composite.html — feComposite 속성 정리.
135. https://svgwrite.readthedocs.io/en/latest/classes/fe_turbulence.html — feTurbulence 속성 정리. seed 절삭 규칙 명시.

## K. 성능 / 버그 / 브라우저 이슈

136. ★ https://codepen.io/tigt/post/improving-svg-rendering-performance — Taylor Hunt의 SVG 렌더 성능 심층 분석. "SVG-on-SVG / SVG-in-CSS / CSS 단축" 3가지 경로, 엔진별 가속 불일치, "Safari는 CSS 단축 필터에서만 괜찮다"는 결론.
137. https://bugzilla.mozilla.org/show_bug.cgi?id=422371 — "SVG feTurbulence filter is far too slow". 15년 넘게 열려 있는 성능 버그.
138. https://bugzilla.mozilla.org/show_bug.cgi?id=862225 — seed 514에서 feTurbulence가 사각형을 만드는 버그. 스펙 참조 구현의 정수 나눗셈 문제로 확인됨.
139. https://bugs.launchpad.net/bugs/1406458 — 위와 같은 seed 버그의 Inkscape 리포트. 문제 seed 값 목록(514, 1977, 2337, 4777, 8032, 9615) 포함.
140. https://bz.apache.org/bugzilla/show_bug.cgi?id=36744 — Batik의 feTurbulence seed 구현 버그. 독립 구현들이 동일 문제를 공유함을 보여준다.
141. https://bugzilla.mozilla.org/show_bug.cgi?id=1441294 — feComposite arithmetic 사용 시 시각 아티팩트 버그.
142. https://bugzilla.mozilla.org/show_bug.cgi?id=1298137 — 하드웨어 가속을 켜면 대부분의 CSS/SVG 필터가 동작하지 않는 Firefox 버그.
143. https://bugzilla.mozilla.org/show_bug.cgi?id=1094305 — feGaussianBlur의 edgeMode="duplicate" 구현 요청(미구현 상태).
144. https://bugzilla.mozilla.org/show_bug.cgi?id=869496 — CSS/SVG 필터 GPU 가속 구현 트래킹.
145. https://www.chromium.org/developers/design-documents/image-filters/ — Chromium의 필터 구현 설계 문서(Blink/Skia 2중 구현).
146. https://developer.chrome.com/blog/hardware-accelerated-animations — 하드웨어 가속 애니메이션 대상 프로퍼티 현황(opacity/filter/transform).
147. https://gsap.com/community/forums/topic/33075-gsap-and-feturbulence-mobile-performance/ — 데스크톱은 멀쩡한데 모바일에서 feTurbulence가 죽는 실제 사례와 대응.
148. https://www.svgator.com/help/animation-and-interactivity/how-to-fix-svg-animation-lag-in-safari — Safari 필터 렌더 실패/랙 대응. 고해상도에서 큰 요소가 아예 안 그려지는 사례.
149. https://finance.biggo.com/news/202507211315_SVG_Filter_Performance_Issues — 손그림 애니메이션 효과의 CPU 포화 문제 보도.
150. https://imagetosvg.com/how-to/svg-filter-performance-tips — 필터 성능 팁 요약.
151. https://oreillymedia.github.io/Using_SVG/extras/ch19-performance.html — "Using SVG" 성능 계획 챕터.
152. https://iamsteve.me/blog/overcoming-a-couple-of-issues-with-svg-filter-effects — Safari에서 채도가 낮게 나오는 문제를 `color-interpolation-filters="sRGB"`로 해결한 실무 기록.
153. https://konadu.dev/backdrop-filter-breaks-position-fixed — backdrop-filter가 position:fixed를 깨뜨리는 이유와 회피법.
154. https://gist.github.com/vielhuber/e882f1f7c03f56d9bd70985fe4fe4a5d — blur/transform/will-change가 스태킹 컨텍스트를 만들어 생기는 포지셔닝 문제 모음.
155. https://takazudomodular.com/pj/zcss/docs/layout/positioning/containing-block-for-fixed/ — fixed 포지션의 컨테이닝 블록 규칙 정리.

## L. 접근성 / 폴백

156. https://a11y-101.com/development/reduced-motion — prefers-reduced-motion 기본기.
157. https://blog.pope.tech/2025/12/08/design-accessible-animation-and-movement/ — 접근 가능한 애니메이션 설계 코드 예제.
158. https://github.com/mgifford/ACCESSIBILITY.md/blob/main/examples/SVG_ACCESSIBILITY_BEST_PRACTICES.md — SVG 접근성 베스트 프랙티스. `<img>`로 넣은 SVG에서는 prefers-reduced-motion이 평가되지 않는다는 중요한 지적.
159. https://tympanus.net/codrops/css_reference/supports/ — @supports 레퍼런스.
160. https://iamsteve.me/blog/feature-detection-with-css — CSS 기능 감지 실무.
161. https://dev.to/hexshift/real-world-use-cases-for-svg-filters-in-modern-web-development-52fm — SVG 필터의 실제 사용 사례와 점진적 향상 관점.

## M. 기타 참고

162. https://redev.rocks/articles/18-filters/ — SVG 필터 종합 정리(러시아어).
163. https://webplatform.github.io/docs/svg/tutorials/smarter_svg_filters/ — WebPlatform Docs의 필터 튜토리얼(아카이브).
164. https://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/filters2.htm — SVG Open 2010 필터 발표 자료. 실험적 조합이 많다.
165. https://en.wikipedia.org/wiki/SVG_filter_effects — 개요.
166. https://riptutorial.com/svg/topic/3262/filters — 필터 토픽 요약.
167. https://www.geeksforgeeks.org/html/svg-fecomposite-element/ — feComposite 요약.
168. https://www.geeksforgeeks.org/html/svg-fespecularlighting-element/ — feSpecularLighting 요약.
169. https://osbo.com/svg/elements/fespecularlighting/ — feSpecularLighting 속성표.
170. https://docs.aspose.com/svg/net/drawing-basics/filters-and-gradients/ — 필터+그라디언트 조합 예제 모음.
171. https://animationpatterns.art/animations/gooey-blob-construction/ — gooey 블롭 구성 단계별 분해.
172. https://animationpatterns.art/animations/gooey-blob-metaball-filter/ — metaball 필터 파라미터 비교.
173. https://doathingy.com/blog/csssvg-gooey-effect-demo — gooey 효과 동작 원리 데모.
174. https://freefrontend.com/javascript-gooey/ — gooey 효과 JS 구현 모음.
175. https://x.com/jh3yy/status/1754546575248953457 — jhey의 `filter: blur(20px) contrast(30)` CSS-only gooey 트릭.
176. https://blog.logrocket.com/complete-guide-using-css-filters-svgs/ — CSS 필터를 SVG에 적용하는 전반 가이드.
177. https://www.testmuai.com/learning-hub/css-backdrop-filter-browser-support/ — backdrop-filter 브라우저 지원·한계 정리.
178. https://www.w3tweaks.com/css/css-filter-backdrop-filter/ — filter/backdrop-filter 비주얼 가이드.
179. https://imagetosvg.com/how-to/svg-duotone-effect — 듀오톤 효과 단계별 가이드.
180. https://www.svg2png.org/blog/svg-filter-effects-guide — 블러·섀도·색 트릭 개괄(2026).
181. https://vectosolve.com/blog/svg-filter-effects-guide — 고급 비주얼 효과 가이드.
182. https://blog.openreplay.com/modern-svg-animation-techniques/ — 현대적 SVG 애니메이션 기법 개괄.
183. https://dev.to/andyfitz/essential-svg-tools-41k5 — SVG 작업 필수 도구 목록.

---

## 검증 방법 기록

본 문서 세트의 코드는 다음 절차로 검증했다.

- **환경**: Playwright Chromium 151.0.0.0 (Windows 11), devicePixelRatio 1, 로컬 HTTP 서버(`python -m http.server`)
- **방법**: 데모 페이지 8개(`test1`~`test8.html`)를 작성해 렌더링 후 스크린샷으로 육안 확인
- **검증된 항목(레시피)**: Gooey(feBlend/atop 양쪽), 그레인 오버레이, 그레이니 그라디언트, 듀오톤, 색수차, squiggle, feMorphology 아웃라인·녹아웃, 종이 질감, feSpecularLighting 광택, 잉크 번짐, Liquid Glass v1/v2, RGB 분리 렌즈, 프로스티드 글래스, 포스터화, 디더, feTile 패턴, 리소그래프, 물결 텍스트(SMIL), 네온 체인 feDropShadow, flood-color SMIL 애니메이션, 러프 엣지, 스티커, 스포트라이트(screen/multiply + JS 광원 이동), 글리치 밴드, feConvolveMatrix 엠보스/샤픈, 필터 영역 클리핑 비교
- **추가 실측**: `CSS.supports('backdrop-filter','url(#x)')` → `true`(따라서 기능 감지로 부적합); `display:none` SVG 내부 필터도 Chromium에서는 동작; 존재하지 않는 필터 참조 시 필터만 무시되고 요소는 렌더됨(CSS·SVG 어트리뷰트 양쪽); `saturate(0)`이 linearRGB에서 `#808080`, sRGB에서 `#4a4a4a`로 갈림; blur 헤일로의 색공간별 차이; `primitiveUnits="objectBoundingBox"` 스케일링(90px 박스 × 0.05 ≈ 4.5px); feDisplacementMap 채널 기본값(A)과 R/G 명시의 결과 차이; feConvolveMatrix 커널 합(0 vs 1)과 bias의 상호작용; `navigator.hardwareConcurrency`/`deviceMemory` 반환값
- **미검증으로 남은 항목**: `SVGSVGElement.pauseAnimations()` 기반 SMIL 제어, UA 기반 backdrop-filter 프로브, **Firefox/Safari/모바일 실기기에서의 모든 동작**(브라우저 미보유). 문서 내 브라우저별 이슈는 벤더 버그 트래커·MDN 호환 데이터·1차 아티클의 보고에 근거한 것이며 직접 재현하지 않았다.