SVG로 만드는 멋진 것들

(fuma-nama.vercel.app)

3P by GN⁺ 3일전 | ★ favorite | 댓글 2개

SVG는 웹에서 벡터 그래픽을 표현하는 강력한 도구임
애니메이션을 통해 SVG 요소를 더욱 매력적으로 만들 수 있음
마스크를 사용하여 SVG 요소의 특정 부분을 강조하거나 숨길 수 있음
서버 사이드 렌더링을 통해 클라이언트 측 자바스크립트 없이 TOC를 구현할 수 있음
CSS와 SVG를 결합하여 인터랙티브한 요소를 만들 수 있음

SVG 애니메이션

SVG는 벡터 그래픽을 웹에서 표현하는 데 사용됨
JSX(React)로 작성된 예제 코드가 포함되어 있음
line 또는 path를 사용하여 선을 만들고, 이를 마스크로 사용하여 애니메이션을 추가할 수 있음
@keyframes를 사용하여 애니메이션을 정의하고, transform 속성을 통해 요소의 위치를 변경할 수 있음
Figma나 다른 SVG 편집기에서 디자인된 부분을 활용하여 애니메이션 블록을 마스크로 처리할 수 있음

Clerk 스타일 목차

Clerk 스타일의 목차를 Fumadocs에서 구현함
서버에서 목차를 렌더링하여 클라이언트 측 자바스크립트 없이 SSR과 호환되도록 함
절대 위치를 사용하여 요소의 정확한 위치를 알 수 없는 서버 환경에서 목차를 렌더링함
thumb라는 애니메이션된 부분을 추가하여 활성화된 항목을 강조함
클라이언트에서 렌더링된 위치 정보를 활용하여 SVG를 사용해 "마스크 맵"을 구성함
mask-image 속성을 사용하여 애니메이션된 div 블록을 마스크하여 목차의 강조된 부분을 렌더링함

Clerk의 영감을 받아 문서 사이트의 목차를 더욱 흥미롭게 구현함.

▲

ndrgrd 2일전 [-]

멋있긴 한데 그냥 현재 항목 하나만 확실하게 강조하는 게 더 눈에 잘 띄네요.

답변달기

▲

GN⁺ 3일전 [-]

Hacker News 의견

Sarah Drasner의 "SVG Can Do That?" 발표는 8년이 지났음에도 여전히 많은 사람들에게 놀라움을 줌. CSS는 그 이후로 많이 발전했지만, SVG 자체는 확신이 덜함. 어쨌든 강력히 추천됨
- 슬라이드: slides.com/sdrasner/svg-can-do-that
- 비디오: youtu.be/ADXX4fmWHbo?si=6YPZkopyEDc8PSte
SVG 파일로 할 수 있는 재미있는 것 중 하나는 인라인 DTD에서 엔티티를 사용하여 파일의 여러 곳에서 공유할 수 있는 상수를 정의하는 것임. David Ellsworth의 "Squares in Squares" 페이지에서 좋은 예를 볼 수 있음
- 주요 브라우저는 이와 관련된 문제가 없지만, Inkscape 같은 일부 도구는 DTD를 파싱하거나 엔티티를 확장하지 않음
- kingbird.myphotos.cc/packing/squares_in_squares.html
복잡한 애니메이션 SVG는 재미있지만 SMIL의 복잡함과 Safari가 부동 소수점 앞에 0이 없어서 문제가 생기는 등의 문제로 인해 어려움이 있음
Nanda Syahrasyad의 "A Deep Dive Into SVG Path Commands"는 SVG 경로가 어떻게 구성되는지를 이해하는 데 매우 유용함. 거의 2년 전 자료이지만 SVG가 할 수 있는 모든 것과 그 방법에 대해 눈을 뜨게 해줌
- nan.fyi/svg-paths
JS를 창의적으로 사용하여 SVG를 동적으로 생성하고 있는 사람이라면, 저에게 DM을 보내길 바람
React로 구축된 프로젝트에서 SVG를 사용한 재미있는 작업을 했음. 정지된 일러스트레이션 시리즈와 애니메이션 요소가 있었고, 색상은 CMS로 제어됨
- 프론트엔드는 기본적으로 API를 호출하여 적절한 색상이 할당된 SVG 이미지를 반환받고, 애니메이션은 SVG 요소를 숨기고 보여주는 방식으로 수행됨
- 예시: https://uncrowd.uk/illustrations/friction/bright_yellow.svg">web.archive.org/web/20221020133516im_/https://uncrowd.uk/illustrations/friction/bright_yellow.svg
SVG+CSS는 매우 강력함. 내가 좋아하는 간단한 기능은 자바스크립트 없이 다크/라이트 모드를 존중하는 다이어그램을 만드는 것임. 예시 다이어그램: blog.davidv.dev/posts/ipvs-lb/
선의 밀도를 허용하는 SVG 확장이 있는지 궁금함. 나는 펜을 들어 올리고 내릴 수 있는 플로터를 가지고 있으며, SVG 파일에서 구동됨. 선을 그리는 동안 펜을 내릴 수 있다면 좋겠음
- 아, Evil Mad Scientist Labs의 Axidraw임. 훌륭한 장치이며 멋진 사람들임
멋진 게시물이며, 사이트 디자인도 멋짐. SVG가 존재한 지 오래되었지만 그 잠재력은 아직 다 발휘되지 않은 느낌임. HTML, CSS, JS를 기능적으로 캡슐화할 수 있는 다른 요소는 생각나지 않음. 기본적으로 완전히 다른 HTML 문서처럼 쉽게 사용할 수 있음
SVG는 매우 탐구되지 않고 사용되지 않은 영역처럼 느껴짐. 상상력에 따라 많은 것을 할 수 있음. 그러나 많은 것을 "하드코어"하게 해야 할 수도 있으므로, 사용 사례에 따라 다름

답변달기