목록SVG (12)

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

[해피CGI][cgimall] 애니메이션으로 그림을 그려주는 - jQuery DrawSVG

최소화된 크기는 2KB 미만, 압축된 크기는 800바이트 미만의 js 입니다.사용하기도 쉽습니다.위와 같이 간단한 사용법으로 사용 가능합니다.간단한 사용으로 SVG 애니메이션을 만들 수 있습니다.https://codepen.io/lcdsantos/pen/xwwEJw/데모를 보시면 이해가 빠르실 겁니다. 간단한 사용으로 SVG 애니메이션을 만들어 보시면 되겠습니다.
웹프로그램밍 자료실/JAVA 자료 2025. 2. 4. 09:07
[해피CGI][cgimall] SVG를 이용한 백그라운드 애니메이션 Generative Morphing Soft Gradients [Experiment, 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..
웹프로그램밍 자료실/HTML 자료 2024. 7. 1. 09:06
[해피CGI][cgimall] SVG Loading icons

svg 파일소스 형태라 크기나 색상 변경이나 편집이 가능합니다.
웹프로그램밍 자료실/기타 자료 2024. 4. 24. 11:50
[해피CGI][cgimall] SVG 메뉴 아이콘을 이용한 애니메이션 메뉴 아이콘

세그먼트를 사용한 SVG 메뉴 아이콘 애니메이션 JavaScript 라이브러리 작동원리, 기본 구성 등 튜토리얼을 따라하면 다양한 효과를 줄 수 있습니다. 탄력적인 SBF 애니메이션을 구현하여 창의적인 효과를 볼 수 있습니다. s s s
웹프로그램밍 자료실/JAVA 자료 2023. 11. 20. 09:27
[해피CGI][cgimall] SVG를 백그라운드로 사용해보자

SVG 코드를 Insert SVG란에 넣어 출력되는 Css코드를 이용하여 SVG를 백그라운드로 사용할 수 있도록 변환해주는 사이트입니다. Insert SVG에 svg 코드를 넣으면 아래와같이 출력이 됩니다. 아래의 ready for css의 코드부분에서 확인하실 수 있으며 preview에서 결과값도 확인할 수 있습니다. svg를 이용하여 보다 또렷한 아이콘을 출력하세요
웹프로그램밍 자료실/기타 자료 2022. 11. 16. 09:11
[해피CGI][cgimall] SVG를 이용한 아이콘 버튼 효과

SVG를 이용한 아이콘 버튼 효과 밋밋한 버튼 대신 사용하면 좋을 SVG를 이용한 귀여운 아이콘 버튼입니다.
웹프로그램밍 자료실/기타 자료 2021. 7. 27. 14:07
[해피CGI][cgimall] SVG backgrounds svg 소스를 이용한 배경 소스

svg 소스를 이용한 배경 소스를 쉽게 확인 할 수 있습니다. 다양한 배경소스가 있습니다. 배경스타일을 선택하면 사이트에 적용이 되어 미리 확인이 가능합니다. 사이트 우측에서 해당 배경소스의 색상,크기, 투명도를 조절할 수 있습니다. CSS 소스를 확인가능합니다. SVG 파일로도 다운도르가 가능합니다.
웹프로그램밍 자료실/기타 자료 2021. 3. 29. 09:25
[해피CGI][cgimall] GitHub 에서 제공하는 SVG 아이콘 제공사이트 Octicons

원하시는 SVG 아이콘을 검색하여 찾을 수 있습니다만 항목이 크게 많진 않아 한 화면에서 원하는 아이콘을 찾아 보시는게 나을 것 같습니다.^^ 아이콘을 다운로드도 할 수 있으나 SVG 특성상 copy 만 하시고 적용할 사이트내에 javascript 를 적용하여 손쉽게 아이콘 소스를 대입하는 방법으로 이용하시길 권장합니다. https://primer.style/octicons/packages/javascript 위 링크를 통해 스크립트 소스를 대입하는 방법을 확인할 수 있으며, https://github.com/primer/octicons 위 링크에서 관련 소스를 정리한 폴더를 다운받아 적용해보시기 바랍니다.
웹프로그램밍 자료실/기타 자료 2021. 2. 25. 09:30
[해피CGI][cgimall] SVG로 구성한 특이한 JQuery 메뉴

SVG로 구성한 특이한 JQuery 메뉴 SVG로 구성한 특이한 JQuery 메뉴로 색다른 구성시 좋아요 출력되는 방식, 배경색상, 내용 색상을 선택 사용 가능합니다.
웹프로그램밍 자료실/JAVA 자료 2021. 2. 22. 09:55
[해피CGI][cgimall] D3.js (ver 3.5.17) Data-Driven Documents

Data-Driven Documents D3.js는 데이터 기반으로 문서수정을 하기 위한 Javascript 라이브러리입니다. D3.js는 HTML, SVG, CSS를 사용해서 데이터에 활기를 부어줄수있습니다. 웹 표준상에서 D3의 주안점은 개발자가 강력한 비주얼라이제이션 컴포넌트들을 결합한 자체 프로임워크로 작업하지 않아도 최신 브라우저의 호환성을 보장하는 것입니다. 그리고 DOM 수정에 대해서 데이터 관점에서 접근합니다. D3.js 파일 다운로드 파일을 다운로드 하지않아도 링크를 통해 바로 사용이 가능합니다. [script src="http://d3js.org/d3.v3.min.js"]][/script D3는 소위 '모던 브라우저'를 지원합니다. 이 말은 일반적으로 IE8 이전 버전을 제외한 브라우저..
웹프로그램밍 자료실/JAVA 자료 2017. 7. 25. 09:39
Prev 1 2 Next