쇼오프 새터데이: 이름으로부터 결정론적으로 생성된 173개의 손그림 스타일 SVG 아이콘

나는 연필로 그린 것처럼 보이지만 일반적인 아이콘 세트처럼 작동하는 아이콘을 원했습니다. 즉, 24 그리드 기반이고, currentColor를 사용하며, 트리-쉐이킹(tree-shakable)이 가능하고, 서버와 브라우저에서 동일하게 동작해야 합니다. 따라서 이들 중 어느 것도 손으로 그린 것이 아닙니다. 각 아이콘은 24 그리드 상의 몇 가지 드래프팅 기본 요소(선(line), 폴리라인(polyline), 사각형(rect), 원(circle), 호(arc) 등)로 구성되어 있으며, 작은 엔진이 이를 자유롭게 그립니다: 선은 끝을 지나치고, 사각형 모서리는 교차하며, 원은 360°를 돌아가면서 바깥으로 드리프트하여 펜이 닫히는 곳에서 겹쳐지고, 각 스트로크마다 고유한 압력이 적용됩니다. 무작위성은 아이콘 이름에 의해 시드(seed)되므로, 모든 빌드는 동일한 경로를 그립니다. 이는 하이드레이션 불일치(hydration mismatches)나 추가적인 런타임 비용이 없다는 것을 의미하며, 패키지는 완성된 경로만 전송합니다. 어려운 부분은 작은 크기였습니다: 모든 흔들림(wobble)이 제한되어 (24px에서 선이 1픽셀보다 적게 휘어짐), 따라서 16~24px에서는 일반적인 라인 세트로 읽히고, 연필 느낌은 약 32px 이상에서 나타납니다. 둘러보고 복사하기: https://matita.dev 엔진 작동 방식: https://dev.to/matita/hand-drawn-icons-that-draw-the-same-every-time-2p0h 코드 (MIT): https://github.com/matita-dev/icons React, 순수 SVG 문자열, 스크립트 태그 또는 원시 .svg 파일로 사용 가능합니다. 피드백 환영하며, 특히 누락된 아이콘이나 실제 UI에서 어떻게 보이는지에 대한 의견을 부탁드립니다. /u/brightlyColossal 님이 제출했습니다. [링크] [댓글]