SVG
스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로,
1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다.
SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다.
SVG 형식의 파일은 어도비 일러스트레이터와 같은 벡터 드로잉 프로그램을 사용하여 편집이 가능합니다. 물론 XML 형식으로 되어 있으므로 메모장과 같은 문서 편집기로도
편집이 가능합니다.
현재 마이크로소프트의 인터넷 익스플로러 8 및 이전 버전을 제외한 대부분의 주요 웹 브라우저들은 SVG를 지원합니다. 인터넷 익스플로러 8 및 이전 버전에서는 SVG 파일을
보기 위해 별도의 플러그인을 수동으로 설치하여야 하며, 그렇지 않은 경우에는 웹 페이지 제작자가 구글 코드에서 개발중인 자바스크립트 라이브러리, SVG Web 을 웹 페이지
코드에 포함시켜야 합니다.
- IE9 이상 지원합니다.
- XML을 이용하여 라인, 곡선 기하학적이 그래픽 표현이 가능합니다.
- 벡터 방식이기 떄문에 확대하거나 축소가 가능합니다.
- DOM 단위로 컨트롤이 되기 때문에 문서 복잡도가 증가되어 렌더링이 느려집니다.
Rect
svg {
width: 160px;
height: 160px;
background: #ffebee;
}
.rect1 {
fill: #f48fb1;
width: 100px;
height: 100px;
x: 30;
y: 30;
}
.rect2 {
fill: #f48fb1;
width: 100px;
height: 100px;
x: 30;
y: 30;
stroke: #880e4f;
stroke-width : 5;
}
}Circle
.circle1 {fill: #f48fb1; cx: 80; cy: 80; r: 60;}
.circle2 {
fill: #f48fb1; cx: 80; cy: 80; r: 60;
stroke: #880e4f;
stroke-width: 5;
}
.circle3 {
fill: #f48fb1;
cx: 80; cy: 80; rx: 60; ry: 50;
}
.circle4 {
fill: #f48fb1;
cx: 80; cy: 80; rx: 60; ry: 30;
}
Polygon
<div class="sBox">
<svg>
<polygon points="18.385,104.241 100.809,24.104 128.998,135.553 " class="polygon1"></polygon>
</svg>
<svg>
<polygon points="86.737,137.862 22.268,104.848 33.594,33.43 105.073,22.313 137.894,86.833 "class="polygon2"></polygon>
</svg>
<svg>
<polygon points="25.5,48.835 78,18.17 130.5,48.835 130.5,110.165 78,140.83 25.5,110.165 " class="polygon3"></polygon>
</svg>
<svg>
<polygon points="78.5,43.015 117.474,22.524 110.031,65.923 141.562,96.658 97.987,102.99 78.5,142.476 59.013,102.99 15.438,96.658 46.969,65.923 39.526,22.524 " class="polygon4"></polygon>
</svg>
</div>
<style>
.polygon1 {
fill: #f48fb1;
}
.polygon2 {
fill: #f48fb1;
}
.polygon3 {
fill: #f48fb1;
}
.polygon4 {
fill: #f48fb1;
}
</style>
line
<div class="sBox">
<svg>
<line x1="0" y1="0" x2="160" y2="160" class="line1"></line>
</svg>
<svg>
<line x1="80" y1="80" x2="160" y2="160" class="line2"></line>
</svg>
<svg>
<polyline points="40,21.75 86.25,128.75 127.5,72.75 " class="line3"></polyline>
</svg>
<svg>
<polyline points="22.75,42.25 126.5,24 35.75,129.75 61,22.75 96.5,134.75 133.75,83.75 " class="line4"></polyline>
</svg>
</div>
<style>
.line1{
fill: none; stroke-width: 2; stroke:#880e4f
}
.line2{
fill: none; stroke-width: 2; stroke:#880e4f
}
.line3{
fill: none; stroke-width: 2; stroke:#880e4f
}
.line4{
fill: none; stroke-width: 2; stroke:#880e4f
}
</style>
line / polygon
<div class="sBox">
<svg>
<path class="path1" d="M25.75,139c0-62.459,50.541-113,113-113"></path>
</svg>
<svg>
<path class="path2" d="M60.379,14.75c39.688,0,71.861,32.173,71.861,71.861
c0,31.75-25.739,57.49-57.489,57.49c-25.4,0-45.991-20.591-45.991-45.992c0-20.32,16.473-36.793,36.793-36.793
c16.256,0,29.435,13.178,29.435,29.435c0,13.005-10.543,23.548-23.548,23.548c-10.404,0-18.838-8.435-18.838-18.838
c0-8.323,6.747-15.07,15.07-15.07c6.659,0,12.057,5.398,12.057,12.056c0,5.327-4.318,9.645-9.645,9.645"></path>
</svg>
<svg>
<path class="path3" d="M80.354,71.79c-21.029,99.42-56.52,84.194,2.93,1.257
c-59.45,82.937-85.445,54.355,2.146,2.36c-87.592,51.995-99.597,15.189,0.991,3.039c-100.588,12.15-96.528-26.414-0.335,3.184
c-96.193-29.598-76.768-63.207-1.604,2.775c-75.164-65.982-43.734-88.8-2.595,1.884C40.749-4.394,78.75-12.464,78.75,86.956
c0-99.42,38.001-91.337-3.138-0.667c41.139-90.67,72.569-67.832-2.595-1.886c75.164-65.946,94.589-32.299-1.604-2.778
c96.193-29.521,100.253,9.118-0.335-3.19c100.588,12.309,88.583,49.254,0.991-3.05c87.592,52.305,61.597,80.6,2.146-2.336
c59.45,82.937,23.959,98.163,2.93-1.257C98.175,171.21,59.325,171.21,80.354,71.79z"></path>
</svg>
<svg>
<path class="path4" d="M64.256,147.895c11.835-55.953,6.978-58.037-26.48-11.361
c33.458-46.676,29.9-50.588-19.396-21.325c49.297-29.263,47.654-34.3-8.958-27.461c56.611-6.839,57.167-12.117,3.03-28.774
c54.137,16.657,56.795,12.058,14.494-25.077c42.302,37.135,46.603,34.012,23.451-17.024C73.549,67.908,78.75,66.804,78.75,10.851
c0,55.953,5.201,57.059,28.354,6.032C83.951,67.91,88.252,71.036,130.554,33.921c-42.302,37.114-39.643,41.719,14.494,25.105
c-54.137,16.614-53.581,21.903,3.03,28.83c-56.611-6.927-58.254-1.87-8.958,27.567c-49.297-29.438-52.854-25.565-19.396,21.111
c-33.458-46.676-38.315-44.592-26.48,11.361C81.409,91.942,76.091,91.942,64.256,147.895z"></path>
</svg>
<svg>
<path class="path4"d="M68.62,127.266c-4.752,22.468-31.944,10.803-18.508-7.94
c-13.436,18.743-33.353-3.155-13.557-14.906c-19.796,11.751-28.993-16.447-6.261-19.193c-22.732,2.746-19.622-26.801,2.118-20.111
c-21.739-6.689-6.856-32.439,10.13-17.527c-16.986-14.912,7.094-32.394,16.391-11.899C49.635,15.194,78.75,9.012,78.75,31.48
c0-22.468,29.115-16.275,19.818,4.215c9.297-20.49,33.377-2.994,16.391,11.909c16.986-14.903,31.869,10.876,10.13,17.548
c21.739-6.672,24.85,22.931,2.118,20.149c22.732,2.781,13.535,31.089-6.261,19.268c19.796,11.821-0.121,33.499-13.557,14.756
c13.436,18.743-13.756,30.409-18.508,7.94C93.632,149.734,63.868,149.734,68.62,127.266z"></path>
</svg>
</div>
<style>
.path1 {
fill: none; stroke-width: 2; stroke:#880e4f
}
.path2 {
fill: none; stroke-width: 2; stroke:#880e4f
}
.path3 {
fill: none; stroke-width: 2; stroke:#880e4f
}
.path4 {
fill: none; stroke-width: 2; stroke:#880e4f
}
.path5 {
fill: none; stroke-width: 2; stroke:#880e4f
}
</style>
linecap / dasharray
<div class="sBox">
<svg>
<path stroke-width="1" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
<path stroke-width="2" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
<path stroke-width="3" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
<path stroke-width="4" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
<path stroke-width="5" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
<path stroke-width="6" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
<path stroke-width="7" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
<path stroke-width="2" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
<path stroke-width="3" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
<path stroke-width="4" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
<path stroke-width="5" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
<path stroke-width="6" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
<path stroke-width="7" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
<path stroke-width="2" stroke-linecap="square" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
<path stroke-width="3" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
<path stroke-width="4" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
<path stroke-width="5" stroke-linecap="square" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
<path stroke-width="6" stroke-linecap="round" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
<path stroke-width="7" stroke-linecap="butt" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
<path stroke-width="2" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
<path stroke-width="3" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
<path stroke-width="4" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
<path stroke-width="5" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
<path stroke-width="6" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
<path stroke-width="7" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 20 l120 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 40 l120 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 60 l120 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 80 l120 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 100 l120 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 120 l120 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="20,10,1,5,5" fill="none" stroke="#e65100" d="m20 140 l120 00"></path>
</svg>
</div>
Gradient
<div class="sBox">
<svg>
<linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #f6d365"/>
<stop offset="1" style="stop-color: #fda085"/>
</linearGradient>
<polygon fill="url(#linearGradient1)" points="86.737,137.862 22.268,104.848 33.594,33.43 105.073,22.313 137.894,86.833 "></polygon>
</svg>
<svg>
<linearGradient id="linearGradient2" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #d4fc79"/>
<stop offset="1" style="stop-color: #96e6a1"/>
</linearGradient>
<path fill="url(#linearGradient2)" d="M68.62,127.266c-4.752,22.468-31.944,10.803-18.508-7.94
c-13.436,18.743-33.353-3.155-13.557-14.906c-19.796,11.751-28.993-16.447-6.261-19.193c-22.732,2.746-19.622-26.801,2.118-20.111
c-21.739-6.689-6.856-32.439,10.13-17.527c-16.986-14.912,7.094-32.394,16.391-11.899C49.635,15.194,78.75,9.012,78.75,31.48
c0-22.468,29.115-16.275,19.818,4.215c9.297-20.49,33.377-2.994,16.391,11.909c16.986-14.903,31.869,10.876,10.13,17.548
c21.739-6.672,24.85,22.931,2.118,20.149c22.732,2.781,13.535,31.089-6.261,19.268c19.796,11.821-0.121,33.499-13.557,14.756
c13.436,18.743-13.756,30.409-18.508,7.94C93.632,149.734,63.868,149.734,68.62,127.266z"></path>
</svg>
<svg>
<radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #37ecba"/>
<stop offset="1" style="stop-color: #72afd3"/>
</radialGradient>
<path fill="url(#radialGradient1)" d="M68.62,127.266c-4.752,22.468-31.944,10.803-18.508-7.94
c-13.436,18.743-33.353-3.155-13.557-14.906c-19.796,11.751-28.993-16.447-6.261-19.193c-22.732,2.746-19.622-26.801,2.118-20.111
c-21.739-6.689-6.856-32.439,10.13-17.527c-16.986-14.912,7.094-32.394,16.391-11.899C49.635,15.194,78.75,9.012,78.75,31.48
c0-22.468,29.115-16.275,19.818,4.215c9.297-20.49,33.377-2.994,16.391,11.909c16.986-14.903,31.869,10.876,10.13,17.548
c21.739-6.672,24.85,22.931,2.118,20.149c22.732,2.781,13.535,31.089-6.261,19.268c19.796,11.821-0.121,33.499-13.557,14.756
c13.436,18.743-13.756,30.409-18.508,7.94C93.632,149.734,63.868,149.734,68.62,127.266z"></path>
</svg>
<svg>
<radialGradient id="radialGradient2" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #c471f5"/>
<stop offset="1" style="stop-color: #fa71cd"/>
</radialGradient>
<polygon fill="url(#radialGradient2)" points="78.5,43.015 117.474,22.524 110.031,65.923 141.562,96.658 97.987,102.99 78.5,142.476 59.013,102.99 15.438,96.658 46.969,65.923 39.526,22.524 "></polygon>
</svg>
<svg>
<radialGradient id="radialGradient3" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #ff5858"/>
<stop offset="1" style="stop-color: #f09819"/>
</radialGradient>
<path fill="url(#radialGradient3)" d="M80.354,71.79c-21.029,99.42-56.52,84.194,2.93,1.257
c-59.45,82.937-85.445,54.355,2.146,2.36c-87.592,51.995-99.597,15.189,0.991,3.039c-100.588,12.15-96.528-26.414-0.335,3.184
c-96.193-29.598-76.768-63.207-1.604,2.775c-75.164-65.982-43.734-88.8-2.595,1.884C40.749-4.394,78.75-12.464,78.75,86.956
c0-99.42,38.001-91.337-3.138-0.667c41.139-90.67,72.569-67.832-2.595-1.886c75.164-65.946,94.589-32.299-1.604-2.778
c96.193-29.521,100.253,9.118-0.335-3.19c100.588,12.309,88.583,49.254,0.991-3.05c87.592,52.305,61.597,80.6,2.146-2.336
c59.45,82.937,23.959,98.163,2.93-1.257C98.175,171.21,59.325,171.21,80.354,71.79z"></path>
</svg>
</div>
Clip-path
<div class="sBox">
<svg>
<image xlink:href="bg.png" width="200" hight="200" />
</svg>
<svg>
<image xlink:href="bg.png" width="100%" hight="100%" clip-path="circle(50px at center)" />
</svg>
<svg>
<clippath id="clipPath1">
<polygon points="86.737,137.862 22.268,104.848 33.594,33.43 105.073,22.313 137.894,86.833 "></polygon>
</clippath>
<image xlink:href="bg.png" width="100%" hight="100%" clip-path="url(#clipPath1)" />
</svg>
<svg>
<clippath id="clipPath2">
<polygon points="18.385,104.241 100.809,24.104 128.998,135.553 "></polygon>
</clippath>
<image xlink:href="bg.png" width="100%" hight="100%" clip-path="url(#clipPath2)" />
</svg>
<svg>
<clippath id="clipPath3">
<polygon points="78.5,43.015 117.474,22.524 110.031,65.923 141.562,96.658 97.987,102.99 78.5,142.476 59.013,102.99 15.438,96.658 46.969,65.923 39.526,22.524 "></polygon>
</clippath>
<image xlink:href="bg.png" width="100%" hight="100%" clip-path="url(#clipPath3)" />
</svg>
</div>
Text Clip-path
CSS
CSS
<style>
.sBox1.s1 {display: flex;}
.sBox1.s1 > div {margin-right: 5px;}
.sBox1.s1 > svg {margin-right: 5px;}
.text_clip {
width: 160px; height: 160px;
line-height: 160px; text-align: center;
font-size: 45px;
background: url(bg.png);
background-color: #ffebee;
background-size: cover;
font-family: 'Jockey One', sans-serif;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.text_wrap {background: #FFEBEE;}
.text_clip.s2 {
background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);;
}
</style>
<div class="sBox1 s1">
<svg>
<text x="40" y="100" font-size="45" font-family= "Jockey One">TEXT</text>
</svg>
<svg>
<pattern id="pattern1" patternUnits="userSpaceOnUse" width="160" height="160">
<image xlink:href="bg.png" width="100%" height="100%" />
</pattern>
<text x="50" y="100" font-size="45" font-family= "Jockey One" fill="url(#pattern1)">SVG</text>
</svg>
<div class="text_wrap">
<div class="text_clip">
CSS
</div>
</div>
<div class="text_wrap">
<div class="text_clip s2">
CSS
</div>
</div>
</div>
Animation
<style>
.aniRect1 {
width: 120px; height: 120px; x: 20px; y: 20px;
fill: none; stroke: #880e4f; stroke-width: 4;
animation: rect1 4s infinite linear;
}
.aniRect2 {
width: 120px; height: 120px; x: 20px; y: 20px;
fill: none; stroke: #880e4f; stroke-width: 4;
animation: rect2 4s infinite linear;
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.aniRect3 {
width: 120px; height: 120px; x: 20px; y: 20px;
fill: none; stroke: #880e4f; stroke-width: 4;
animation: rect3 4s infinite linear;
stroke-dasharray: 480;
stroke-dashoffset: 480;
}
.aniRect4 {
width: 120px; height: 120px; x: 20px; y: 20px;
fill: none; stroke: #880e4f; stroke-width: 4;
animation: rect4 4s infinite linear;
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
@keyframes rect1 {
0% {stroke: #880e4f;}
35% {stroke: #dd465f;}
70% {stroke: #3d8e6f;}
100% {stroke: #a950a9;}
}
@keyframes rect2 {
0% {stroke: #880e4f; stroke-dashoffset: 100;}
35% {stroke: #dd465f;}
70% {stroke: #3d8e6f;}
100% {stroke: #a950a9; stroke-dashoffset: 0;}
}
@keyframes rect3 {
0% {stroke: #880e4f; stroke-dashoffset: 480;}
35% {stroke: #dd465f;}
70% {stroke: #3d8e6f;}
100% {stroke: #a950a9; stroke-dashoffset: 0;}
}
@keyframes rect4 {
0% {stroke: #880e4f; stroke-dasharray: 100;}
35% {stroke: #dd465f;}
70% {stroke: #3d8e6f;}
100% {stroke: #a950a9; stroke-dasharray: 0;}
}
</style>
<div class="sBox">
<svg>
<rect class="aniRect1"></rect>
</svg>
<svg>
<rect class="aniRect2"></rect>
</svg>
<svg>
<rect class="aniRect3"></rect>
</svg>
<svg>
<rect class="aniRect4"></rect>
</svg>
</div>
Animation2
<style>
.aniPath1 {
fill: none; stroke: #0d47a1; stroke-width: 4; stroke-linecap: round;
animation: path1 1s infinite linear alternate;
stroke-dasharray: 177;
stroke-dashoffset: 177;
}
.aniPath2 {
fill: none; stroke: #0d47a1; stroke-width: 4; stroke-linecap: round;
animation: path2 1s infinite linear alternate;
stroke-dasharray: 186;
stroke-dashoffset: 186;
}
.aniPath3 {
fill: none; stroke: #0d47a1; stroke-width: 4; stroke-linecap: round;
animation: path3 1s infinite linear alternate;
stroke-dasharray: 503;
stroke-dashoffset: 503;
}
.aniPath4 {
fill: none; stroke: #0d47a1; stroke-width: 3; stroke-linecap: round;
animation: path4 1s infinite linear alternate;
stroke-dasharray: 2276;
stroke-dashoffset: 2276;
}
.aniPath5 {
fill: none; stroke: #0d47a1; stroke-width: 3; stroke-linecap: round;
animation: path5 1s infinite linear alternate;
stroke-dasharray: 680;
stroke-dashoffset: 680;
}
@keyframes path1 {
0% {stroke-dashoffset: 177;}
100% {stroke-dashoffset: 0;}
}
@keyframes path2 {
0% {stroke-dashoffset: 186;}
100% {stroke-dashoffset: 0;}
}
@keyframes path3 {
0% {stroke-dashoffset: 503;}
100% {stroke-dashoffset: 0;}
}
@keyframes path4 {
0% {stroke-dashoffset: 2276;}
100% {stroke-dashoffset: 0;}
}
@keyframes path5 {
0% {stroke-dashoffset: 680;}
100% {stroke-dashoffset: 0;}
}
</style>
<div class="sBox">
<svg style="background-color: #e3f2fd;">
<path class="aniPath1" d="M25.75,139c0-62.459,50.541-113,113-113"></path>
</svg>
<svg style="background-color: #e3f2fd;">
<polyline class="aniPath2" points="40,21.75 86.25,128.75 127.5,72.75 "></polyline>
</svg>
<svg style="background-color: #e3f2fd;">
<path class="aniPath3" d="M60.379,14.75c39.688,0,71.861,32.173,71.861,71.861
c0,31.75-25.739,57.49-57.489,57.49c-25.4,0-45.991-20.591-45.991-45.992c0-20.32,16.473-36.793,36.793-36.793
c16.256,0,29.435,13.178,29.435,29.435c0,13.005-10.543,23.548-23.548,23.548c-10.404,0-18.838-8.435-18.838-18.838
c0-8.323,6.747-15.07,15.07-15.07c6.659,0,12.057,5.398,12.057,12.056c0,5.327-4.318,9.645-9.645,9.645"></path>
</svg>
<svg style="background-color: #e3f2fd;">
<path class="aniPath4" d="M80.354,71.79c-21.029,99.42-56.52,84.194,2.93,1.257
c-59.45,82.937-85.445,54.355,2.146,2.36c-87.592,51.995-99.597,15.189,0.991,3.039c-100.588,12.15-96.528-26.414-0.335,3.184
c-96.193-29.598-76.768-63.207-1.604,2.775c-75.164-65.982-43.734-88.8-2.595,1.884C40.749-4.394,78.75-12.464,78.75,86.956
c0-99.42,38.001-91.337-3.138-0.667c41.139-90.67,72.569-67.832-2.595-1.886c75.164-65.946,94.589-32.299-1.604-2.778
c96.193-29.521,100.253,9.118-0.335-3.19c100.588,12.309,88.583,49.254,0.991-3.05c87.592,52.305,61.597,80.6,2.146-2.336
c59.45,82.937,23.959,98.163,2.93-1.257C98.175,171.21,59.325,171.21,80.354,71.79z"></path>
</svg>
<svg style="background-color: #e3f2fd;">
<path class="aniPath5"d="M68.62,127.266c-4.752,22.468-31.944,10.803-18.508-7.94
c-13.436,18.743-33.353-3.155-13.557-14.906c-19.796,11.751-28.993-16.447-6.261-19.193c-22.732,2.746-19.622-26.801,2.118-20.111
c-21.739-6.689-6.856-32.439,10.13-17.527c-16.986-14.912,7.094-32.394,16.391-11.899C49.635,15.194,78.75,9.012,78.75,31.48
c0-22.468,29.115-16.275,19.818,4.215c9.297-20.49,33.377-2.994,16.391,11.909c16.986-14.903,31.869,10.876,10.13,17.548
c21.739-6.672,24.85,22.931,2.118,20.149c22.732,2.781,13.535,31.089-6.261,19.268c19.796,11.821-0.121,33.499-13.557,14.756
c13.436,18.743-13.756,30.409-18.508,7.94C93.632,149.734,63.868,149.734,68.62,127.266z"></path>
</svg>
</div>
Text Animation
<style>
.svgWrap {
font-family: 'Jockey One', sans-serif;
width: 100% !important; height: 200px;
}
.aniText {
font-size: 160px;
stroke: #365fa0;
stroke-width: 2;
animation: stroke 3s infinite alternate;
}
@keyframes stroke {
0% {fill: rgba(72, 138, 204, 0); stroke: rgba(54, 95, 160, 1); stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;}
70% {fill: rgba(72, 138, 204, 0); stroke: rgba(54, 95, 160, 1);}
80% {fill: rgba(72, 138, 204, 0); stroke: rgba(54, 95, 160, 1); stroke-width: 1;}
100% {fill: rgba(72, 138, 204, 1); stroke: rgba(54, 95, 160, 0); stroke-dashoffset: -25%; stroke-dasharray: 50 0%; stroke-width: 0;}
}
</style>
<div class="sBox">
<svg class="svgWrap" style="background-color: #E3F2FD;" viewBox="0 0 1000 300">
<text class="aniText" x="50%" y="50%" dy=".35em" text-anchor="middle">Soool</text>
</svg>
</div>
Text Animation2
<style>
.svgWrap { background-color: #000;}
.aniText2 {
font-size: 140px;
}
.copyText {
fill: none;
stroke: white;
stroke-width: 2px;
stroke-dashoffset: 7% 28%;
animation: stroke2 9s infinite linear;
}
.copyText:nth-child(1) {stroke: #360756; stroke-dasharray: 7%;}
.copyText:nth-child(2) {stroke: #dd465f; stroke-dasharray: 14%;}
.copyText:nth-child(3) {stroke: #f6d365; stroke-dasharray: 21%;}
.copyText:nth-child(4) {stroke: #efeac5; stroke-dasharray: 28%;}
.copyText:nth-child(5) {stroke: #1b8798; stroke-dasharray: 35%;}
@keyframes stroke2 {
50% {stroke-dashoffset: 35%; stroke-dasharray: 0 7.5%;}
}
</style>
<div class="sBox">
<svg class="svgWrap" viewBox="0 0 1000 300">
<symbol id="symbol">
<text class="aniText2" x="50%" y="50%" dy=".35em" text-anchor="middle">Text Animation</text>
</symbol>
<g class="group">
<use xlink:href="#symbol" class="copyText"></use>
<use xlink:href="#symbol" class="copyText"></use>
<use xlink:href="#symbol" class="copyText"></use>
<use xlink:href="#symbol" class="copyText"></use>
<use xlink:href="#symbol" class="copyText"></use>
</g>
</svg>
</div>
Text Animation3
<style>
.svgWrap3 {
font-family: 'Jockey One', sans-serif;
width: 100% !important;
height: 200px;
background-color: #000;
}
.aniText3 {
font-size: 140px;
}
#g-usetag {
stroke-width: 2;
stroke: #422C73;
animation: stroke2 3s infinite linear;
}
@keyframes stroke2 {
0% {stroke-width: 3;}
50% {stroke-width: 0;}
100% {stroke-width: 3;}
}
</style>
<div class="sBox">
<svg class="svgWrap3" viewBox="0 0 1000 300">
<!--pattern-->
<defs>
<pattern id="GPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"
patternTransform="rotate(35)">
<animateTransform attributeType="xml" attributeName="patternTransform" type="rotate"
from="35" to="395" begin="0" dur="160s" repeatCount="indefinite" />
<circle cx="10" cy="10" r="10" stroke="none" fill="yellow">
<animate attributeName="r" type="xml" from="1" to="1" values="1; 10; 1"
begin="0s" dur="2s" repeatCount="indefinite" />
</circle>
</pattern>
</defs>
<!--Symbol-->
<symbol id="g-text">
<text class="aniText3" text-anchor="middle" x="50%" y="50%" dy=".35em">
kangaroo
</text>
</symbol>
<!--use-->
<use id="g-usetag" xlink:href="#g-text" class="text2" style="fill: url(#GPattern)">
</use>
</svg>
</div>