SVG Animation v1.0 </doc>
mm2800.dothome.co.kr
SVG
스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.
SVG 형식의 파일은 어도비 일러스트레이터와 같은 벡터 드로잉 프로그램을 사용하여 편집이 가능하다. 물론 XML 형식으로 되어 있으므로 메모장과 같은 문서 편집기로도 편집이 가능하다.
- IE9 이상 지원합니다.
- 자동으로 반응형이 지원됩니다.
- XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다.
- 벡터 방식이기 때문에 확대하거나 축소가 가능합니다.
- DOM 단위로 컨트롤이 되어 문서 복잡도가 증가되어 렌더링이 느립니다.
Rect
사각형 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 160px; height: 160px; background: #ffebee;}
.rect1 {width:100px; height:100px; fill:#f48fb1;}
.rect2 {width:100px; height:100px; fill:#f48fb1; stroke-width:5; stroke:#880e4f;}
#canvas {width: 160px; height: 160px; background: #ffebee;}
</style>
</head>
<body>
<svg>
<rect class="rect1" x="30" y="30"></rect>
</svg>
<svg>
<rect class="rect2" x="30" y="30"></rect>
</svg>
<canvas id="canvas">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#f48fb1";
ctx.fillRect(50,25,200,100);
</script>
</body>
</html> Circle
원 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 160px; height: 160px; background: #ffebee;}
.circle1 {fill:#f48fb1;}
.circle2 {fill:#f48fb1; stroke: #880e4f; stroke-width: 5;}
#canvas {background: #ffebee;}
</style>
</head>
<body>
<svg>
<circle class="circle1" cx="80" cy="80" r="70"></circle>
</svg>
<svg>
<circle class="circle2" cx="80" cy="80" r="70"></circle>
</svg>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#f48fb1;"
ctx.arc(60,60,60,0,Math.PI*2);
ctx.fill();
</script>
</body>
</html> ellipse
둥근원 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.ellipse1 {fill:#f48fb1;}
.ellipse2 {fill:#f48fb1;}
.ellipse3 {fill:#f48fb1;}
</style>
</head>
<body>
<svg>
<ellipse class="ellipse1" cx="100" cy="100" rx="90" ry="90"></ellipse>
</svg>
<svg>
<ellipse class="ellipse2" cx="100" cy="100" rx="90" ry="70"></ellipse>
</svg>
<svg>
<ellipse class="ellipse3" cx="100" cy="100" rx="90" ry="50"></ellipse>
</svg>
</body>
</html> Polygon
다각형 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.polygon {fill:#f48fb1; stroke: #880e4f; stroke-width: 5px;}
.polygon1 {fill:#f48fb1; stroke: #880e4f; stroke-width: 3px;}
</style>
</head>
<body>
<svg>
<polygon class="polygon" points="14,98 160,16 158,183"></polygon>
</svg>
<svg>
<polygon class="polygon" points="10,94 84,8 188,52 179,165 69,191"></polygon>
</svg>
<svg>
<polygon class="polygon" points="21,129 34,46 113,16 179,69 166,152 87,182"></polygon>
</svg>
<svg>
<polygon class="polygon" points="68,124 14,101 65,72 71,14 114,54 172,41 147,94 177,145 118,138 79,182"></polygon>
</svg>
<svg>
<polygon class="polygon1" points="97.66,137.81 88.35,174.87 90.75,136.74 74.8,171.46 84.16,134.41 62.09,165.61 78.1,130.92
50.68,157.53 72.79,126.37 40.95,147.49 68.41,120.92 33.23,135.83 65.11,114.76 27.79,122.95 62.99,108.09 24.8,109.29
62.13,101.16 24.37,95.31 62.56,94.18 26.52,81.5 64.27,87.4 31.17,68.31 67.2,81.05 38.17,56.2 71.24,75.34 47.27,45.59
76.26,70.48 58.17,36.82 82.09,66.62 70.49,30.21 88.53,63.89 83.81,25.98 95.36,62.4 97.69,24.26 102.34,62.19 111.65,25.13
109.25,63.26 125.21,28.54 115.85,65.59 137.91,34.39 121.9,69.08 149.32,42.47 127.21,73.63 159.05,52.51 131.59,79.08
166.77,64.17 134.89,85.24 172.21,77.05 137.01,91.91 175.2,90.71 137.87,98.84 175.63,104.69 137.44,105.82 173.48,118.5
135.73,112.6 168.83,131.69 132.8,118.95 161.83,143.8 128.76,124.66 152.73,154.41 123.74,129.52 141.83,163.18 117.91,133.38
129.51,169.79 111.47,136.11 116.19,174.02 104.64,137.6 102.31,175.74"></polygon>
</svg>
</body>
</html> line
라인 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.line1 {fill: none; stroke: #880e4f; stroke-width: 2px;}
.line2 {fill: none; stroke: #880e4f; stroke-width: 2px;}
.polyline1 {fill: none; stroke: #880e4f; stroke-width: 2px;}
</style>
</head>
<body>
<svg>
<line class="line1" x1="0" y1="0" x2="200" y2="200"></line>
</svg>
<svg>
<line class="line2" x1="50" y1="50" x2="200" y2="200"></line>
</svg>
<svg>
<polyline class="polyline1" points="32,31 164,42 22,92 172,131 89,151 89,6"></polyline>
</svg>
</body>
</html> Path
- d : 패스를 만드는 정보를 의미합니다.
- m : Moveto(이동)
- l : lineto(라인)
- h : horizontal lineto(수평라인)
- v : vertical lineto(수직라인)
- c : curveto(곡선)
- s : smooth curveto(부드러운 곡선)
- q : quadratic Bezier curveto(2차 베지어 곡선)
- t : smooth quadratic Bezier curveto(부드러운 2차 베지어 곡선)
- a : elliptical Arc(둥근모양)
- z : closepath(닫힌 패스)
- 대문자일 경우는 절대 포지션을, 소문자일 경우는 상대 포지션을 의미합니다.
패스 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.path1 {stroke:#880e4f; stroke-width: 2px; fill:none;}
.path2 {stroke:#880e4f; stroke-width: 2px; fill:none;}
.path3 {stroke:#880e4f; stroke-width: 2px; fill:none;}
.path4 {stroke: #880e4f; stroke-width: 2px; fill: none;}
.path5 {stroke: #880e4f; stroke-width: 2px; fill: none;}
.path6 {stroke: #880e4f; stroke-width: 2px; fill: none;}
.path7 {stroke: #880e4f; stroke-width: 2px; fill: none;}
.path8 {stroke: #880e4f; stroke-width: 1px; fill: none;}
</style>
</head>
<body>
<svg>
<path class="path1" d="M13.5,21.5c0,86.41,77.15,156.33,172.5,156.33"></path>
</svg>
<svg>
<path class="path2" d="M178.5,136.5c-30.93,39.76-88.24,46.93-128,16C18.69,127.76,12.96,81.91,37.7,50.1
c19.79-25.45,56.47-30.03,81.92-10.24c20.36,15.84,24.03,45.18,8.19,65.54c-12.67,16.29-36.14,19.22-52.43,6.55
c-13.03-10.13-15.38-28.91-5.24-41.94c8.11-10.42,23.13-12.3,33.55-4.19c8.34,6.49,9.84,18.5,3.36,26.84
c-5.19,6.67-14.8,7.87-21.47,2.68c-5.34-4.15-6.3-11.84-2.15-17.18c3.32-4.27,9.47-5.04,13.74-1.72c3.42,2.66,4.03,7.58,1.37,11
c-2.13,2.73-6.06,3.22-8.8,1.1c-2.19-1.7-2.58-4.85-0.88-7.04c1.36-1.75,3.88-2.06,5.63-0.7c1.4,1.09,1.65,3.1,0.56,4.5
c-0.87,1.12-2.48,1.32-3.6,0.45c-0.9-0.7-1.06-1.99-0.36-2.88c0.56-0.72,1.59-0.85,2.31-0.29c0.57,0.45,0.68,1.27,0.23,1.84"></path>
</svg>
<svg>
<path class="path3" d="M249.6,206.3c-9.4,9.9-24.8,11.7-36.1,17.8c-11.8,6.4-21.7,18.2-34.6,20.6c-13,2.4-26.6-5.1-39.7-6.8
c-13-1.7-28,2.2-40.1-3.6c-11.7-5.6-18.2-19.5-28.1-28.9c-7.9-7.5-20.6-11.1-25.5-20.2c-5.1-9.4-1.2-22.1-3.1-32.4
c-1.9-10.4-10.1-20.9-8.7-31.4c1.4-10.4,11.9-18.4,16.5-28.1C54.6,84.1,54,70.9,61.5,63c6-6.3,17.6-5.2,24.8-9.2
c7.5-4.1,12.9-14.4,21.2-15.9c8.3-1.5,17.1,6.1,25.5,7.2c8.3,1.1,18.7-4.1,26.5-0.4c7.5,3.6,10,14.8,16.4,20.8
c5.1,4.8,15.4,5.4,18.6,11.2c3.3,6-1.9,15.1-0.7,21.7c1.2,6.7,9.3,13.3,8.4,20c-0.9,6.7-10.3,11-13.3,17.2
c-2.8,6-0.1,16.1-4.9,21.1c-3.8,4-13,1.1-17.6,3.6c-4.8,2.6-7.3,11.9-12.6,12.8c-5.3,1-11-6.8-16.4-7.5c-5.3-0.7-12.8,5.4-17.7,3
c-4.8-2.3-4.8-11.8-8.9-15.7c-3.2-3.1-12.1-1.7-14.2-5.4c-2.1-3.9,3.9-10.6,3.1-14.8c-0.8-4.3-8.8-8.4-8.2-12.7
c0.6-4.3,9.3-6.2,11.2-10.2c1.8-3.8-2.3-11.9,0.8-15.1c2.5-2.6,10,1.6,13-0.1c3.1-1.7,3.7-10.3,7.1-10.9c3.4-0.6,7.1,7.2,10.6,7.6
c3.4,0.4,9-6.2,12.2-4.6c3.1,1.5,1.5,9.9,4.1,12.4c2.1,2,10-0.6,11.3,1.7c1.3,2.5-5.2,7.7-4.7,10.4c0.5,2.7,8.5,5.3,8.1,8.1
c-0.4,2.7-8.7,3.2-9.9,5.7c-1.2,2.4,3.8,9.2,1.8,11.3c-1.6,1.7-8.2-3.3-10.1-2.2c-2,1.1-1.4,9.3-3.6,9.7c-2.2,0.4-4.6-7.4-6.8-7.7
c-2.2-0.3-6.6,6.7-8.6,5.7c-2-0.9,0.7-8.7-1-10.3c-1.3-1.3-8.7,2.1-9.5,0.6c-0.9-1.6,6-5.9,5.7-7.6c-0.3-1.7-8.3-3.3-8-5.1
c0.2-1.7,8.3-1.2,9.1-2.9c0.7-1.6-4.8-7.5-3.5-8.8c1-1.1,7,4.3,8.2,3.7c1.3-0.7,0-8.6,1.4-8.9c1.4-0.3,3,7.6,4.5,7.8
c1.4,0.2,5-7,6.3-6.4c1.3,0.6-2,7.9-1,8.9c0.8,0.8,7.8-3.1,8.3-2.1c0.5,1-6.5,4.7-6.3,5.8c0.2,1.1,8.1,2,8,3.2c-0.1,1.1-8,0-8.5,1
c-0.5,1,5.4,6.4,4.6,7.3c-0.6,0.7-6.2-5-7-4.6c-0.8,0.4,1,8.2,0.1,8.3c-0.9,0.2-2-7.7-2.9-7.8c-0.9-0.1-4,7.2-4.8,6.8
c-0.8-0.4,2.9-7.4,2.2-8c-0.5-0.5-7.2,3.7-7.6,3.1c-0.4-0.6,6.8-4,6.7-4.7c-0.1-0.7-8-1.2-8-2c0.1-0.7,7.9,0.8,8.2,0.2
c0.3-0.6-5.8-5.7-5.3-6.3c0.4-0.4,5.7,5.5,6.2,5.2c0.5-0.3-1.6-7.9-1-8c0.6-0.1,1.4,7.8,1.9,7.8c0.6,0.1,3.4-7.3,3.9-7.1
c0.5,0.2-3.5,7.1-3,7.5"></path>
</svg>
<svg>
<path class="path4" d="M136.7,16.8c-19.7,47.5-51.8,47.5-71.5,0c19.7,47.5-3,70.2-50.5,50.5c47.5,19.7,47.5,51.8,0,71.5
c47.5-19.7,70.2,3,50.5,50.5c19.7-47.5,51.8-47.5,71.5,0c-19.7-47.5,3-70.2,50.5-50.5c-47.5-19.7-47.5-51.8,0-71.5
C139.8,86.9,117.1,64.3,136.7,16.8z"></path>
</svg>
<svg>
<path class="path5" d="M101,101.4c0-167.9,37.4-73.1-0.9-2.3c38.3-70.8,135.7-100.7-2.4,0.7c138.1-101.4,87.3-13.1,1.2-2.2
c86.1-10.9,170.2,46.6-2-1.4c172.2,48,71.5,63.4,2.5-0.4c69,63.8,76.5,165.4-0.2-2.5c76.6,167.9,1.8,98.7,1.8,1.7
c0,97.1-74.8,166.2,1.8-1.7c-76.6,167.9-69.2,66.3-0.2,2.5c-69,63.8-169.7,48.4,2.5,0.4c-172.2,48-88.1-9.5-2,1.4
C17,86.8-33.8-1.5,104.3,99.9c-138.1-101.4-40.7-71.6-2.4-0.7C63.6,28.3,101-66.4,101,101.4z"></path>
</svg>
<svg>
<path class="path6" d="M145,27c13,24,13,56-5,78c16,9,36-1,46-15c-10,27-36,46-65,47c6,18,28,25,45,23c-27,11-59,4-81-16
c-7,17,2,36,14,48c-25-15-45-42-43-72c-18,4-25,23-27,39c-6-29,4-60,27-79c-12-13-32-7-45,0c20-20,49-34,78-24c5-16-8-32-23-37
c28,3,54,22,62,50C144,62,149,43,145,27L145,27z"></path>
</svg>
<svg>
<path class="path7" d="M167.5,187.8c-4.2-4.3,18.8-26.6,14.6-30.9c-4.2-4.3-27.1,18-31.3,13.7c-4.2-4.3,18.8-26.6,14.6-30.9
c-4.2-4.3-27.1,18-31.3,13.7c-4.2-4.3,18.8-26.6,14.6-30.9c-4.2-4.3-27.1,18-31.3,13.7c-4.2-4.3,18.8-26.6,14.6-30.9
c-4.2-4.3-27.1,18-31.3,13.7c-4.2-4.3,18.8-26.6,14.6-30.9c-4.2-4.3-27.1,18-31.3,13.7C80,97.8,103,75.5,98.8,71.2
c-4.2-4.3-27.1,18-31.3,13.7c-4.2-4.3,18.8-26.6,14.6-30.9C78,49.8,55,72.1,50.9,67.8c-4.2-4.3,18.8-26.6,14.6-30.9
c-4.2-4.3-27.1,18-31.3,13.7C30,46.4,53,24.1,48.8,19.8s-27.1,18-31.3,13.7"></path>
</svg>
<svg>
<path class="path8" d="M149.7,177.9c-52.6-82.3-50.2-80.4-41.7-32.4c-8.5-48.1-7-50.6-28,44.7c21-95.3,21.4-92.4-6.6-52.4
c27.9-40,30.9-40.7-51.4,11.9c82.3-52.6,80.4-50.2,32.4-41.7c48.1-8.5,50.6-7-44.7-28c95.3,21,92.4,21.4,52.4-6.6
c40,27.9,40.7,30.9-11.9-51.4c52.6,82.3,50.2,80.4,41.7,32.4c8.5,48.1,7,50.6,28-44.7c-21,95.3-21.4,92.4,6.6,52.4
c-27.9,40-30.9,40.7,51.4-11.9c-82.3,52.6-80.4,50.2-32.4,41.7c-48.1,8.5-50.6,7,44.7,28c-95.3-21-92.4-21.4-52.4,6.6
C97.9,98.5,97.2,95.6,149.7,177.9z"></path>
</svg>
</body>
</html> linecap/dasharry
패스 만들기 View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 200px; height: 200px; background: #ccc;}
.path1 {stroke:#880e4f; stroke-width: 2px; fill:none;}
.path2 {stroke:#880e4f; stroke-width: 2px; fill:none;}
</style>
</head>
<body>
<svg>
<path stroke-width="1" fill="none" stroke="#e65100" d="M30 30 l140 00"></path>
<path stroke-width="2" fill="none" stroke="#e65100" d="M30 50 l140 00"></path>
<path stroke-width="3" fill="none" stroke="#e65100" d="M30 70 l140 00"></path>
<path stroke-width="4" fill="none" stroke="#e65100" d="M30 90 l140 00"></path>
<path stroke-width="5" fill="none" stroke="#e65100" d="M30 110 l140 00"></path>
<path stroke-width="6" fill="none" stroke="#e65100" d="M30 130 l140 00"></path>
<path stroke-width="7" fill="none" stroke="#e65100" d="M30 150 l140 00"></path>
<path stroke-width="8" fill="none" stroke="#e65100" d="M30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="butt" fill="none" stroke="#e65100" d="M30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="square" fill="none" stroke="#e65100" d="M30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="butt" fill="none" stroke="#e65100" d="M30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="square" fill="none" stroke="#e65100" d="M30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" fill="none" stroke="#e65100" d="M30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="butt" fill="none" stroke="#e65100" d="M30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="square" fill="none" stroke="#e65100" d="M30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="M30 30 l140 00"></path>
<path stroke-width="2" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="M30 50 l140 00"></path>
<path stroke-width="3" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="M30 70 l140 00"></path>
<path stroke-width="4" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="M30 90 l140 00"></path>
<path stroke-width="5" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="M30 110 l140 00"></path>
<path stroke-width="6" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="M30 130 l140 00"></path>
<path stroke-width="7" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="M30 150 l140 00"></path>
<path stroke-width="8" stroke-dasharray="5,5" fill="none" stroke="#e65100" d="M30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="M30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="M30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="M30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="M30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="M30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="M30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="M30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" stroke-dasharray="0,15" fill="none" stroke="#e65100" d="M30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="M30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="M30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="M30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="M30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="M30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="M30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="M30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" stroke-dasharray="10,10" fill="none" stroke="#e65100" d="M30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="M30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="M30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="M30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="M30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="M30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="M30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="M30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" stroke-dasharray="20,10,1,5,5,10" fill="none" stroke="#e65100" d="M30 170 l140 00"></path>
</svg>
<svg>
<path stroke-width="1" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="M30 30 l140 00"></path>
<path stroke-width="2" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="M30 50 l140 00"></path>
<path stroke-width="3" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="M30 70 l140 00"></path>
<path stroke-width="4" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="M30 90 l140 00"></path>
<path stroke-width="5" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="M30 110 l140 00"></path>
<path stroke-width="6" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="M30 130 l140 00"></path>
<path stroke-width="7" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="M30 150 l140 00"></path>
<path stroke-width="8" stroke-linecap="round" stroke-dasharray="50,10,100" fill="none" stroke="#e65100" d="M30 170 l140 00"></path>
</svg>
</body>
</html>
Gradinent
그라디언트 만들기 View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
svg {width: 200px; height: 200px; background: #ccc;}
.polygon1 {stroke:#880e4f; stroke-width: 4px;}
.path2 {stroke:#880e4f; stroke-width: 4px; }
</style>
</head>
<body>
<svg>
<linearGradient id="linearGradient1" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #a18cd1" />
<stop offset="1" style="stop-color: #fbc2eb" />
</linearGradient>
<polygon points="14,98 160,16 158,183" fill="url(#linearGradient1)" class="polygon1"></polygon>
</svg>
<svg>
<path class="path2" fill="url(#linearGradient1)" d="M188.876,141.665c-35.899,41.053-98.28,45.232-139.333,9.333
C16.7,122.279,13.358,72.374,42.076,39.531c22.975-26.274,62.899-28.948,89.173-5.973c21.019,18.38,23.159,50.319,4.779,71.339
c-14.704,16.815-40.256,18.527-57.071,3.823c-13.452-11.763-14.822-32.204-3.058-45.657c9.411-10.762,25.764-11.857,36.525-2.447
c8.609,7.528,9.486,20.611,1.957,29.22c-6.023,6.888-16.489,7.589-23.376,1.566c-5.51-4.818-6.071-13.191-1.253-18.701"></path>
</svg>
<svg>
<radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color: #a18cd1" />
<stop offset="1" style="stop-color: #fbc2eb" />
</radialGradient>
<circle cx="100" cy="100" r="80" fill="url(#radialGradient1)"></circle>
</svg>
</body>
</html> Clip-path
Clip-path View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
.path1 {stroke:#880e4f; stroke-width: 2px; fill:none;}
.path2 {stroke:#880e4f; stroke-width: 2px; fill:none;}
.path3 {stroke:#880e4f; stroke-width: 2px; fill:none;}
</style>
</head>
<body>
<svg>
<image xlink:href="../assets/ico/icon8.jpg" width="200" height="200"/>
</svg>
<svg>
<image xlink:href="../assets/ico/icon8.jpg" width="200" height="200" clip-path="circle(100px at center)" />
</svg>
<svg>
<clipPath id="clipPath1">
<path class="path3" d="M136.7,16.8c-19.7,47.5-51.8,47.5-71.5,0c19.7,47.5-3,70.2-50.5,50.5c47.5,19.7,47.5,51.8,0,71.5
c47.5-19.7,70.2,3,50.5,50.5c19.7-47.5,51.8-47.5,71.5,0c-19.7-47.5,3-70.2,50.5-50.5c-47.5-19.7-47.5-51.8,0-71.5
C139.8,86.9,117.1,64.3,136.7,16.8z"></path>
</clipPath>
<image xlink:href="../assets/ico/icon8.jpg" width="200" height="200" clip-path="url(#clipPath1)" />
</svg>
<svg>
<pattern id="pattern" patternUnits="useSpaceOnUse" width="200" height="200">
<image xlink:href="../assets/ico/icon8.jpg" width="200" height="200"/>
</pattern>
<text x="40" y="110" font-size="45" font-weight="bold" fill="url(#pattern)">YANG</text>
</svg>
</body>
</html> Animation
Animation View
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg {width: 200px; height: 200px; background: #ffebee;}
svg {background: #ffebee;}
.rect1 rect {
x: 30px; y: 30px;
width: 140px;
height: 140px;
stroke: #880e41;
stroke-width: 5;
fill: none;
animation: rect1 4s infinite linear;
stroke-dashoffset: 30;
stroke-dasharray: 30;
}
.rect2 rect {
x: 30px; y: 30px;
width: 140px;
height: 140px;
stroke: #880e41;
stroke-width: 5;
fill: none;
animation: rect2 4s infinite linear;
stroke-dashoffset: 300;
stroke-dasharray: 300;
}
.rect3 rect {
x: 30px; y: 30px;
width: 140px;
height: 140px;
stroke: #880e41;
stroke-width: 5;
fill: none;
animation: rect3 4s infinite linear;
stroke-dashoffset: 560;
stroke-dasharray: 560;
}
@keyframes rect1 {
0% {stroke: #880e41; stroke-dashoffset: 30;}
35% {stroke: #1b5e20;}
70% {stroke: #e65100;}
100% {stroke: #880e41; stroke-dashoffset: 0;}
}
@keyframes rect2 {
0% {stroke: #880e41; stroke-dashoffset: 300;}
35% {stroke: #1b5e20;}
70% {stroke: #e65100;}
100% {stroke: #880e41; stroke-dashoffset: 0;}
}
@keyframes rect3 {
0% {stroke: #880e41; stroke-dashoffset: 560;}
35% {stroke: #1b5e20;}
70% {stroke: #e65100;}
100% {stroke: #880e41; stroke-dashoffset: 0;}
}
</style>
</head>
<body>
<svg class="rect1">
<rect />
</svg>
<svg class="rect2">
<rect />
</svg>
<svg class="rect3">
<rect />
</svg>
</body>
</html> Text Animation1
See the Pen SVG Text Animation by Yang (@yangareum) on CodePen.
Text Animation2
See the Pen SVG Text Animation2 by Yang (@yangareum) on CodePen.
Text Animation3
See the Pen OqvLdN by Yang (@yangareum) on CodePen.
Text Animation4
See the Pen SVG Text Animation4 by Yang (@yangareum) on CodePen.