웹솔루션개발 26년 노하우! 해피CGI의 모든것

■ 라이센스MIT 라이센스■ 상세 설명theSVG는 GitHub, Figma, Google 등 다양한 브랜드 아이콘을 SVG 형태로 제공하는 아이콘 라이브러리이다.해당 라이브러리는 npm 패키지 형태로도 제공되지만, 일반 웹사이트에서는 별도의 설치 없이도 쉽게 사용할 수 있다는 것이 가장 큰 장점이다. 기본적으로 다음과 같은 방식으로 활용할 수 있다. CDN 방식이미지 URL을 통해 아이콘을 바로 불러와 사용할 수 있다.HTML에 태그만으로 적용 가능하여 가장 간편하다. SVG 직접 삽입사이트에서 SVG 코드를 복사하여 HTML에 직접 삽입하는 방식이다.외부 의존성이 없어 안정적이며 디자인 커스터마이징에 유리하다. npm 패키지 방식React, Vue 등 프론트엔드 프로젝트에서 import 형태로 사용..

CSS와 SVG를 활용하여 구현한 텍스트 프레임 애니메이션 예제입니다.SVG의 textPath를 사용해 텍스트가 지정된 경로를 따라 자연스럽게 흐르도록 제작되었습니다.별도의 자바스크립트 없이 CSS 애니메이션만으로 부드러운 회전 효과를 구현한 것이 특징입니다.테두리 영역을 따라 반복적으로 움직이는 텍스트가 감각적인 디자인 요소를 연출합니다.웹사이트 메인 비주얼, 이벤트 배너, 프로모션 영역 등에 응용하기 좋은 소스입니다.HTML 구조 http://www.w3.org/2000/svg" aria-labelledby="t"> width="200" height="200" preserveAspectRatio="xMidYMid slice" clip-path="url(#b..

CSS-Doodle과 SVG를 이용해 정적인 기하학 패턴을 구현한 코드입니다.SVG로 정의된 원형 도형을 패턴으로 등록하고, 이를 반복 배치하여 고전적인 타일 느낌을 만듭니다.HTML과 CSS만으로 패턴 배경을 제작할 수 있다는 점을 보여주는 실습용 예제입니다.웹 배경, 디자인 레퍼런스, 패턴 실험 등 다양한 용도로 활용할 수 있습니다. HTML 구조https://esm.sh/css-doodle"> CSS 소스html, body { margin: 0;} css-doodle:not(:defined) { display: none;}

Pure SVG Loader Animation은 SVG 태그만으로 구현된 로딩 애니메이션으로, CSS나 JavaScript 없이도 동작하며 가볍고 해상도에 독립적입니다.CSS로도 스타일 확장이 가능해 다양한 로딩 효과를 연출할 수 있어 웹 성능과 디자인 모두에 유리합니다.HTML 구조Pure SVG Loader attributeName="transform" attributeType="XML" type="rotate" dur="5s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> attr..

SVG 글자에 애니메이션을 추가하여 역동적인 디자인을 할 수 있습니다.HTML, CSS, JS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다. HTML C263.5,51.4,263.6,52,263.6,52.7z" /> C213.6,54.7,213.6,53.7,213.6,52.7z" /> C230.7,28.6,234.5,27.7,238.5,27.7z" /> 327,55.5 336.8,65.6 359.9,49.7 " /> ..

https://github.com/microsoft/PowerToys/releases사이트에서 프로그램을 다운로드 받을수 있습니다.설치하시면 윈도우 탐색기에서도 위와 같이 svg 파일을 미리 볼 수 있습니다.설치후 작동을 하지 않는다면 아래 내용을 확인하세요PowerToys가 관리자 권한으로 실행되었는지 확인 - PowerToys 실행 아이콘 우클릭 → "관리자 권한으로 실행" PowerToys 버전 확인 및 업데이트 - https://github.com/microsoft/PowerToys/releasesPowerToys가 시작 시 자동 실행되도록 설정 - PowerToys 설정 > General(일반) > "시작 시 PowerToys 실행" 활성화호환성 문제 확인 - Windows 10 1903 이상 ..

최소화된 크기는 2KB 미만, 압축된 크기는 800바이트 미만의 js 입니다.사용하기도 쉽습니다.위와 같이 간단한 사용법으로 사용 가능합니다.간단한 사용으로 SVG 애니메이션을 만들 수 있습니다.https://codepen.io/lcdsantos/pen/xwwEJw/데모를 보시면 이해가 빠르실 겁니다. 간단한 사용으로 SVG 애니메이션을 만들어 보시면 되겠습니다.

SVG를 이용한 백그라운드 애니메이션입니다. 색상이 계속 변경되며 동적인 효과를 줄 수 있습니다. CSS 소스* {  margin: 0;  padding: 0;  box-sizing: border-box;} svg {  position: absolute;  top: 0;  left: 0;  width: 100vw;  height: 100vh;  z-index: -1;  transform: translate3d(0px, 0px, 0px);} JS 소스import tinycolor from "https://cdn.skypack.dev/tinycolor2@1.4.2";import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0"; const si..

svg 파일소스 형태라 크기나 색상 변경이나 편집이 가능합니다.

세그먼트를 사용한 SVG 메뉴 아이콘 애니메이션 JavaScript 라이브러리 작동원리, 기본 구성 등 튜토리얼을 따라하면 다양한 효과를 줄 수 있습니다. 탄력적인 SBF 애니메이션을 구현하여 창의적인 효과를 볼 수 있습니다. s s s