---
type: bookmarks
tags: ['svg', 'svg-filter', 'offset-path', 'icon']
status: release
ctime: 2022-04-09
mtime: 2026-10-06
---
import QuoteLink from '@components/QuoteLink.astro'
SVG
---
- [Adding Shadows to SVG Icons With CSS and SVG Filters | CSS-Tricks](https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/)[^177-1]
- [How to Animate a SVG with border-image | CSS-Tricks](https://css-tricks.com/how-to-animate-a-svg-with-border-image/)[^177-2]
- [Text Along a Path on the Web Using SVG textPath ← Alligator.io](https://alligator.io/svg/textpath/)[^177-3]
- [Morphing SVG With react-spring | CSS-Tricks](https://css-tricks.com/morphing-svg-with-react-spring/)[^177-4]
- [Accessible SVGs: Perfect Patterns For Screen Reader Users — Smashing Magazine](https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/)[^177-5]
- [SVG Favicons in Action | CSS-Tricks](https://css-tricks.com/svg-favicons-in-action/)[^177-6]
- [A Practical Guide To SVG And Design Tools — Smashing Magazine](https://www.smashingmagazine.com/2019/05/svg-design-tools-practical-guide/)[^177-7]
- [Fun with stroke-dasharray](https://yuanchuan.dev/fun-with-stroke-dasharray)
아이콘
- https://fotis.xyz/posts/introducing-svg-use/
- https://www.jacobparis.com/content/svg-icons
- https://sly-cli.fly.dev/
필터 — `feTurbulence` [Perlin noise](https://en.wikipedia.org/wiki/Perlin_noise)[^177-8][^177-9]를 사용하여 구름이나 대리석과 같은 인공 질감을 합성. `feDisplacementMap` in2의 이미지 픽셀 값을 사용하여 in의 이미지를 공간적으로 대체합니다.
- [SVG Filter Effects: Creating Texture with `` - Codrops](https://tympanus.net/codrops/2019/02/19/svg-filter-effects-creating-texture-with-feturbulence/)
- [Drawing Realistic Clouds with SVG and CSS | CSS-Tricks](https://css-tricks.com/drawing-realistic-clouds-with-svg-and-css/)
- [The Art Of SVG Filters And Why It Is Awesome](https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/)
- [A Deep Dive Into The Wonderful World Of SVG Displacement Filtering — Smashing Magazine](https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/)
- [SVG Filter Effects: Conforming Text to Surface Texture with `` - Codrops](https://tympanus.net/codrops/2019/02/12/svg-filter-effects-conforming-text-to-surface-texture-with-fedisplacementmap/)
`offset-path` — 값을 지정해서 `keyframes`로 애니메이션을 적용하는 방법과 예제들
- [offset-path | CSS-Tricks](https://css-tricks.com/almanac/properties/o/offset-path/)
- [offset-path - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path)[^177-10]
---
[^177-1]: ``를 이용하는 방법으로 좀 더 효과적인 스타일 작업이 가능하다는 걸 shadow 효과 예제로 정리한 글
[^177-2]: 애니메이션(`@keyframes`)이 결합된 svg를 `border-image`로 사용해서 만든 UI
[^177-3]: `textPath`를 사용해서 텍스트 흐름을 변형하는 방법
[^177-4]: `path` 속성값을 제어해서 모핑효과 주는 방법
[^177-5]: a11y
[^177-6]: favicon 이미지를 svg로 사용했을때 장점
[^177-7]: 디자인툴에서 output되는 svg코드 중심으로 설명
[^177-8]: [Perlin Noise: A Procedural Generation Algorithm](https://rtouti.github.io/graphics/perlin-noise-algorithm)
[^177-9]: [펄린 노이즈 (개념 이해하기) | 심화 JS: 내추럴 시뮬레이션 | Khan Academy](https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations/programming-noise/a/perlin-noise)
[^177-10]: element가 따라갈 모션 경로를 지정하고 상위 컨테이너 또는 SVG 좌표 시스템 내에서 요소의 위치를 정의