SVG Animation

SVG

SVG(Scalable Vector Graphic)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다.

Rect

<svg><rect width="140" height="140" fill="#f48fb1" x="30" y="30" /></svg>
<svg><rect width="140" height="140" fill="#f48fb1" x="30" y="30" stroke-width="5" stroke="#880e4f" /></svg>
<svg><rect width="140" height="140" fill="#f48fb1" x="30" y="30" stroke-width="10" stroke="#880e4f" /></svg>
<svg><rect width="140" height="140" fill="#f48fb1" x="30" y="30" stroke-width="15" stroke="#880e4f" /></svg>

Rect : border-radius

<svg><rect width="140" height="140" fill="#f48fb1" x="30" y="30" rx="5" ry="5" /></svg>
<svg><rect width="140" height="140" fill="#f48fb1" x="30" y="30" rx="20" ry="20" stroke-width="5" stroke="#880e4f" /></svg>	
<svg><rect width="140" height="140" fill="#f48fb1" x="30" y="30" rx="40" ry="40" stroke-width="5" stroke="#880e4f" /></svg>
<svg><rect width="140" height="140" fill="#f48fb1" x="30" y="30" rx="70" ry="70" stroke-width="5" stroke="#880e4f" /></svg>

Circle

<svg><circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="0" fill="#f48fb1" /></svg>
<svg><circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="5" fill="#f48fb1" /></svg>
<svg><circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="10" fill="#f48fb1" /></svg>
<svg><circle cx="100" cy="100" r="80" stroke="#880e4f" stroke-width="15" fill="#f48fb1" /></svg>

ellipse

<svg><ellipse cx="100" cy="100" rx="90" ry="90" fill="#f48fb1" stroke="#880e4f" stroke-width="0" /></svg>
<svg><ellipse cx="100" cy="100" rx="90" ry="70" fill="#f48fb1" stroke="#880e4f" stroke-width="0" /></svg>
<svg><ellipse cx="100" cy="100" rx="90" ry="50" fill="#f48fb1" stroke="#880e4f" stroke-width="0" /></svg>
<svg><ellipse cx="100" cy="100" rx="90" ry="30" fill="#f48fb1" stroke="#880e4f" stroke-width="0" /></svg>

polygon

<svg><polygon fill="#f48fb1" stroke="#880e4f" stroke-width="5" points="21.369,116.904 157.512,15.096 177.608,183.904" /></svg>
<svg><polygon fill="#f48fb1" stroke="#880e4f" stroke-width="5" points="86.425,190.557 14.097,114.394 64.182,22.069 167.465,41.174 181.211,145.305" /></svg>
<svg><polygon fill="#f48fb1" stroke="#880e4f" stroke-width="5" points="39.166,166.489 12.002,80.561 72.835,14.072 160.833,33.512 187.998,119.438 127.164,185.928" /></svg>
<svg><polygon fill="#f48fb1" stroke="#880e4f" stroke-width="5" points="46.924,170.106 13.336,110.981 31.394,45.424 90.518,11.836 156.075,29.894 189.664,89.018 171.606,154.575 112.481,188.163" /></svg>
<svg><polygon fill="#f48fb1" stroke="#880e4f" stroke-width="1" points="101,14.024 127.799,68.323 187.72,77.031 144.359,119.296 154.596,178.976 101,150.798 47.404,178.976 57.64,119.296 14.28,77.031 74.202,68.323" /></svg>
<svg><polygon fill="#f48fb1" stroke="#880e4f" stroke-width="1" points="100,6.963 123.259,59.714 180.571,53.481 146.519,100 180.571,146.519 123.259,140.286 100,193.037 76.741,140.286 19.428,146.519 53.482,100 19.428,53.481 76.741,59.714" /></svg>
<svg><polygon fill="#f48fb1" stroke="#880e4f" stroke-width="1" points="179.35,139.323 134.421,127.714 156.57,168.49 120.248,139.61 123.897,185.871 102.462,144.714 86.98,188.459 84.138,142.143 52.201,175.809 68.443,132.34 25.575,150.105 58.093,117.001 11.705,115.795 54.876,98.778 12.989,78.809 59.35,80.823 29.207,45.542 70.739,66.24 57.552,21.749 87.076,57.549 93.125,11.541 105.535,56.255 129.773,16.685 122.924,62.581 161.162,36.291 136.237,75.432 181.862,66.968 143.172,92.588 188.296,103.412 142.53,111.08" /></svg>
<svg><polygon fill="#f48fb1" stroke="#880e4f" stroke-width="1" points="169.423,147.387 132.258,126.832 159.178,159.682 126.574,132.465 146.79,169.814 119.927,136.92 132.71,177.421 112.557,140.036 117.443,182.225 104.73,141.702 101.545,184.053 96.73,141.856 85.587,182.838 88.845,140.493 70.147,178.626 81.36,137.663 55.784,171.568 74.546,133.467 43.016,161.919 68.65,128.058 32.304,150.028 63.883,121.63 24.037,136.325 60.42,114.417 18.512,121.306 58.384,106.678 15.93,105.512 57.849,98.694 16.383,89.514 58.835,90.753 19.856,73.891 61.306,83.143 26.222,59.208 65.173,76.137 35.253,45.995 70.295,69.989 46.621,34.73 76.489,64.923 59.915,25.82 83.529,61.119 74.655,19.587 91.163,58.718 90.308,16.256 99.112,57.804 106.309,15.947 107.091,58.411 122.079,18.673 114.811,60.517 137.049,24.334 121.992,64.046 150.676,32.726 128.377,68.87 162.469,43.544 133.732,74.815 172.002,56.399 137.866,81.667 178.929,70.826 140.628,89.177 183.001,86.304 141.92,97.074 184.07,102.271 141.692,105.073 182.099,118.153 139.956,112.885 177.156,133.375 136.773,120.226" /></svg>

Line

<svg style="background: #e3f3fd"><line x1="0" y1="0" x2="200" y2="200" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><line x1="50" y1="50" x2="200" y2="200" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><line x1="100" y1="100" x2="200" y2="200" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><line x1="150" y1="150" x2="200" y2="200" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>

PolyLine

<svg style="background: #e3f3fd"><polyline points="19.5,20.5 19.5,179.5 " stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><polyline points="19.5,20.5 19.5,179.5 178.5,95 " stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><polyline points="19.5,20.5 19.5,179.5 178.5,95 55,65 " stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><polyline points="19.5,20.5 19.5,179.5 178.5,95 55,65 122.5,179.5  " stroke="#0d47a1" stroke-width="2" fill="none" /></svg>

Path

<svg style="background: #e3f3fd"><path d="M14.5,14.5c0,94.518,76.482,171,171,171" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><path d="M177.73,174.021c-50.258,29.271-114.729,12.258-144-38 c-23.417-40.207-9.806-91.784,30.4-115.201c32.165-18.733,73.426-7.845,92.16,24.32c14.987,25.732,6.276,58.742-19.455,73.728 c-20.586,11.99-46.994,5.021-58.983-15.564c-9.591-16.469-4.017-37.595,12.452-47.187c13.175-7.673,30.076-3.213,37.749,9.961 c6.139,10.54,2.571,24.061-7.97,30.199c-8.432,4.912-19.248,2.057-24.159-6.375c-3.929-6.746-1.646-15.398,5.1-19.327" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><path d="M97.376,106.333c-46.416,112.054-115.763,42.703-3.71-3.71 c-112.053,46.413-112.053-51.663,0-5.247c-112.053-46.416-42.706-115.763,3.71-3.71c-46.416-112.053,51.66-112.053,5.247,0 c46.413-112.053,115.764-42.706,3.71,3.71c112.054-46.416,112.054,51.66,0,5.247c112.054,46.413,42.703,115.764-3.71,3.71 C149.036,218.387,50.96,218.387,97.376,106.333z" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><path d="M78.065,181.855c29.246-109.141,41.909-101.83-37.989-21.932 c79.898-79.898,87.209-67.234-21.932-37.992c109.141-29.242,109.141-14.62,0-43.866c109.141,29.246,101.83,41.909,21.932-37.989 c79.898,79.898,67.235,87.209,37.989-21.932c29.246,109.141,14.624,109.141,43.866,0c-29.242,109.141-41.906,101.83,37.992,21.932 c-79.898,79.898-87.209,67.235,21.932,37.989c-109.141,29.246-109.141,14.624,0,43.866 c-109.141-29.242-101.83-41.906-21.932,37.992c-79.898-79.898-67.234-87.209-37.992,21.932 C92.689,72.715,107.312,72.715,78.065,181.855z" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><path d="M32.571,18.429c2.401,2.401-11.741,16.544-9.34,18.945 c2.403,2.403,16.545-11.739,18.949-9.336c2.401,2.401-11.741,16.544-9.34,18.945c2.401,2.401,16.543-11.741,18.945-9.34 c2.402,2.402-11.741,16.544-9.339,18.946c2.403,2.403,16.545-11.74,18.948-9.337c2.401,2.402-11.741,16.544-9.339,18.946 C54.457,68.6,68.6,54.457,71.001,56.859c2.403,2.403-11.739,16.545-9.336,18.949c2.402,2.402,16.544-11.74,18.947-9.338 c2.403,2.403-11.739,16.545-9.336,18.949c2.402,2.402,16.545-11.74,18.947-9.338c2.403,2.403-11.74,16.545-9.337,18.948 s16.545-11.74,18.948-9.337c2.403,2.404-11.739,16.546-9.335,18.949c2.403,2.403,16.545-11.739,18.948-9.337 c2.403,2.404-11.739,16.546-9.335,18.95c2.404,2.403,16.546-11.738,18.95-9.335c2.403,2.403-11.739,16.546-9.336,18.949 c2.401,2.401,16.544-11.741,18.945-9.34c2.403,2.403-11.739,16.546-9.336,18.949c2.402,2.402,16.545-11.74,18.947-9.338 c2.402,2.403-11.739,16.545-9.337,18.948c2.404,2.404,16.547-11.738,18.951-9.334s-11.738,16.547-9.334,18.951 s16.547-11.738,18.951-9.334c2.403,2.403-11.739,16.546-9.336,18.949c2.404,2.404,16.547-11.738,18.951-9.334 c2.405,2.406-11.736,16.548-9.331,18.954c2.408,2.407,16.55-11.734,18.958-9.327c2.407,2.408-11.734,16.55-9.327,18.958" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><path d="M100,18.893C100,100,100,100,118.512,65.783 C100,100,100,100,166.717,51.02C100,100,100,100,141.598,94.73C100,100,100,100,183.193,123.213C100,100,100,100,133.359,130.826 C100,100,100,100,137.025,181.107C100,100,100,100,100,146.891C100,100,100,100,62.976,181.107C100,100,100,100,66.642,130.826 C100,100,100,100,16.807,123.213C100,100,100,100,58.403,94.73C100,100,100,100,33.284,51.02C100,100,100,100,81.487,65.783 C100,100,100,100,100,18.893z" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><path d="M106,184c-23-13-41-34-43-61c-16,5-24,23-23,39c-6-25-3-55,17-74 c-14-9-31-3-43,6c14-22,41-36,67-34c0-16-15-26-29-30c26-1,53,10,67,33c1-2,3-3,5-5c9-10,6-24,3-36c15,20,22,48,12,72 c15,6,30-5,38-17c-6,24-25,47-50,51c4,16,24,21,39,20c-24,10-52,8-73-8C87,156,94,173,106,184L106,184z" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>
<svg style="background: #e3f3fd"><path d="M184.978,154.219c-6.256,6.256-19.179,3.634-26.49,7.861 c-7.565,4.374-11.793,16.821-20.043,19.023c-8.369,2.234-18.264-6.479-26.869-6.479c-8.604,0-18.5,8.714-26.869,6.479 c-8.25-2.203-12.478-14.651-20.043-19.025c-7.311-4.227-20.234-1.604-26.49-7.859c-5.004-5.005-1.333-16.551-4.715-22.4 c-3.5-6.052-15.29-8.675-17.051-15.275c-1.788-6.695,7.15-14.869,7.15-21.753s-8.937-15.058-7.149-21.753 c1.762-6.6,13.552-9.224,17.051-15.275c3.382-5.849-0.29-17.396,4.715-22.4c4.003-4.003,14.449,0.506,19.128-2.199 c4.841-2.799,6.182-14.063,11.462-15.473c5.356-1.43,12.153,7.687,17.66,7.687c5.507,0,12.305-9.116,17.661-7.686 c5.28,1.41,6.62,12.673,11.462,15.472c4.679,2.706,15.123-1.804,19.127,2.199c3.203,3.203-1.978,12.767,0.187,16.51 c2.239,3.874,13.083,4.188,14.211,8.412c1.144,4.285-8.115,9.979-8.116,14.386c0,4.406,9.26,10.102,8.115,14.386 c-1.127,4.224-11.971,4.539-14.21,8.412c-2.164,3.743,3.017,13.306-0.187,16.509c-2.563,2.563-11.42-3.155-14.415-1.424 c-3.099,1.791-2.592,12.298-5.971,13.2c-3.428,0.915-8.242-8.459-11.767-8.459c-3.525,0-8.339,9.374-11.767,8.459 c-3.379-0.902-2.873-11.409-5.971-13.2c-2.995-1.731-11.854,3.986-14.416,1.424c-2.05-2.05,4.097-10.345,2.711-12.74 c-1.434-2.479-11.669-1.314-12.391-4.018c-0.732-2.742,8.732-6.852,8.732-9.672s-9.465-6.929-8.733-9.671 c0.722-2.703,10.959-1.539,12.392-4.018c1.385-2.396-4.762-10.69-2.712-12.74c1.64-1.64,9.483,4.85,11.4,3.742 c1.983-1.146,0.294-11.168,2.457-11.746c2.194-0.585,5.739,8.953,7.994,8.953c2.256,0,5.801-9.538,7.995-8.952 c2.162,0.578,0.472,10.599,2.455,11.745c1.917,1.108,9.761-5.381,11.4-3.742c1.312,1.312-5.454,8.793-4.567,10.327 c0.917,1.586,10.767-0.524,11.229,1.206c0.469,1.755-9.128,4.849-9.128,6.653c-0.001,1.805,9.597,4.9,9.128,6.655 c-0.462,1.73-10.312-0.38-11.229,1.206c-0.887,1.534,5.878,9.016,4.566,10.328c-1.05,1.049-8.243-5.936-9.47-5.226 c-1.27,0.734,1.177,10.445-0.207,10.815c-1.404,0.374-4.137-9.269-5.58-9.269c-1.444,0-4.177,9.643-5.581,9.269 c-1.384-0.37,1.062-10.081-0.207-10.815c-1.227-0.709-8.42,6.275-9.469,5.226c-0.84-0.84,6.321-7.802,5.754-8.783 c-0.587-1.016-10.188,1.7-10.483,0.593c-0.3-1.123,9.38-3.567,9.38-4.722c0-1.155-9.681-3.6-9.381-4.723 c0.295-1.107,9.896,1.607,10.483,0.592c0.567-0.981-6.594-7.943-5.754-8.783" stroke="#0d47a1" stroke-width="2" fill="none" /></svg>

stroke-linecap / stroke-dasharray

Linear Gradient

<svg width="200" height="20" style="background:#fff3e0">
	<linearGradient id="linearGradient" gradientUits="userSpaceInUse">
		<stop offset="0" style="stop-color:#74ebd5" />
		<stop offset="1" style="stop-color:#9face6" />
	</linearGradient>
	<circle cx="100" cy="100" r="80" fill="url(#linearGradient)">
</svg>

<svg width="200" height="20" style="background:#fff3e0">
	<rect x="30" y="30" width="140" height="140" fill="url(#linearGradient)">
</svg>

<svg width="200" height="20" style="background:#fff3e0">
	<polygon fill="url(#linearGradient)" stroke-width="5" points="21.369,116.904 157.512,15.096 177.608,183.904 " />
</svg>

<svg width="200" height="20" style="background:#fff3e0">
	<polygon fill="url(#linearGradient)" stroke-width="1" points="101,14.024 127.799,68.323 187.72,77.031 144.359,119.296 154.596,178.976 101,150.798 47.404,178.976 57.64,119.296 14.28,77.031 74.202,68.323 " />
</svg>	

Radial Gradient

<svg width="200" height="20" style="background:#fff3e0">
	<radialGradient id="radialGradient1" gradientUnits="userSpaceOnUse">
		<stop offset="0" style="stop-color:#74ebd5" />
		<stop offset="1" style="stop-color:#9face6" />
	</radialGradient>
	<circle cx="100" cy="100" r="80" fill="url(#radialGradient1)">
</svg>

<svg width="200" height="20" style="background:#fff3e0">
	<rect x="30" y="30" width="140" height="140" fill="url(#radialGradient1)">
</svg>

<svg width="200" height="20" style="background:#fff3e0">
	<polygon fill="url(#radialGradient1)" stroke-width="5" points="21.369,116.904 157.512,15.096 177.608,183.904 " />
</svg>

<svg width="200" height="20" style="background:#fff3e0">
	<polygon fill="url(#radialGradient1)" stroke-width="1" points="101,14.024 127.799,68.323 187.72,77.031 144.359,119.296 154.596,178.976 101,150.798 47.404,178.976 57.64,119.296 14.28,77.031 74.202,68.323 " />
</svg>

Clip-path

<svg width="200" height="200">
	<image xlink:href="svg-01.jpg" width="200" height="200" />
</svg>

<svg width="200" height="200">
	<image xlink:href="svg-01.jpg" width="200" height="200" clip-path="circle(100px at center)"/>
</svg>

<svg width="200" height="200">
	<clipPath id="clippath1">
		<polygon points="21.369,116.904 157.512,15.096 177.608,183.904 " />
	</clipPath>	
	<image xlink:href="svg-01.jpg" width="200" height="200" clip-path="url(#clippath1)"/>
</svg>

<svg width="200" height="200">
	<clipPath id="clippath2">
		<polygon points="101,14.024 127.799,68.323 187.72,77.031 144.359,119.296 154.596,178.976 101,150.798 47.404,178.976 57.64,119.296 14.28,77.031 74.202,68.323" />
	</clipPath>
	<image xlink:href="svg-01.jpg" width="200" height="200" clip-path="url(#clippath2)"/>
</svg>

Text Clip-path

WEB

<style>
	.text-clip {
		width: 200px; height: 200px; line-height: 200px;
		text-align: center;
		font-size: 70px;
		font-family: 'Anton', sans-serif;
		background: url(svg-01.jpg);
		background-size: cover;
		-webkit-text-fill-color:transparent;
		-webkit-background-clip:text;
	}
</style>
<svg width="200" height="200" style="font-family: 'Anton', sans-serif;">
	<text x="60" y="120" font-size="45">WEB</text>
</svg>
<svg width="200" height="200" style="font-family: 'Anton', sans-serif;">
	<a xlink:href="http://ioio2034a.dothome.co.kr">
		<text x="60" y="120" font-size="45">WEB</text>
	</a>
</svg>
<div class="text-clip">
	WEB
</div>
<svg width="200" height="200" style="font-family: 'Anton', sans-serif;">
	<pattern id="pattern" patternUnits="userSpaceOnUse" width="200" height="200">
		<image xlink:href="svg-01.jpg" width="200" height="200" />
	</pattern>
	<text x="60" y="120" font-size="45" fill="url(#pattern)">WEB</text>
</svg>

Animation

See the Pen Parallax - SVG by Leejinhee (@Leejinhee2034) on CodePen.

See the Pen SVG - Loading by Leejinhee (@Leejinhee2034) on CodePen.

See the Pen Button Hover Effect : SVG by Leejinhee (@Leejinhee2034) on CodePen.

See the Pen Button Hover Effect : SVG2 by Leejinhee (@Leejinhee2034) on CodePen.

SVG