Animate Any SVG icons with CSS Only | SVG Stroke Animation With Html CSS
https://www.youtube.com/watch?v=0cYdA4MBwhk&t=124s
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG 애니메이션</title>
<link rel="stylesheet" href="svg.css">
</head>
<body>
<div class="container">
<div class="icon heart">
<svg
viewBox="0 0 10.583333 10.583334"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="하트선.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="true"
units="px"
inkscape:zoom="16.771208"
inkscape:cx="21.018164"
inkscape:cy="20.123774"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer1">
<inkscape:grid
type="xygrid"
id="grid9" />
</sodipodi:namedview>
<defs
id="defs2">
<inkscape:path-effect
effect="powerstroke"
id="path-effect159"
is_visible="true"
lpeversion="1"
offset_points="5,14.3621"
not_jump="false"
sort_points="true"
interpolator_type="CubicBezierJohan"
interpolator_beta="0.2"
start_linecap_type="zerowidth"
linejoin_type="extrp_arc"
miter_limit="4"
scale_width="1"
end_linecap_type="zerowidth" />
</defs>
<g
inkscape:label="레이어 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"
d="m 5.2916667,3.4395833 c 0,-3.40752803 5.1290243,-2.87353306 5.1290243,0.5339958 0,3.407528 -5.1290243,5.5995556 -5.1290243,6.2810609 0,0.681505 0,0.681505 0,0 0,-0.6815053 -5.1132495,-2.8912204 -5.1132495,-6.2987484 0,-3.40752782 5.1132495,-3.92383536 5.1132495,-0.5163083 z"
id="path157"
inkscape:original-d="m 5.2916667,2.9104166 c 0,-3.407528 5.1290243,-2.87353303 5.1290243,0.5339958 0,3.407528 -5.1290243,5.5995556 -5.1290243,6.2810609 0,0.6815047 0,0.6815047 0,0 0,-0.6815053 -5.1132495,-2.8912204 -5.1132495,-6.2987484 0,-3.40752779 5.1132495,-3.92383533 5.1132495,-0.5163083 z"
sodipodi:nodetypes="cssssc" />
</g>
</svg>
</div>
</div>
</body>
</html>css
* {margin: 0;padding: 0;}
body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #06181f;}
.container {position: relative;width: 800px;display: flex;justify-content: space-between;align-items: center;}
.container .icon {width: 200px;}
.container .icon path {fill: transparent;stroke-width: 10;stroke: red;}
.container .icon.heart path {stroke-dasharray: 35;stroke-dashoffset: 35;}
.container .icon.heart:hover path {animation: animate-heart 2s linear forwards;}
@keyframes animate-heart
{
0% {stroke-dashoffset: 35;}
40% {stroke-dashoffset: 0;}
80% {stroke-dashoffset: 0;fill: transparent;}
100% {stroke-dashoffset: 0;fill: red;}
}'컴퓨터 > 이미지' 카테고리의 다른 글
| svg heart (0) | 2022.01.05 |
|---|---|
| svg 파일 만들기 Inkscape (0) | 2021.12.29 |
| svg 순차적으로 나오기 (0) | 2021.12.29 |
| svg 크기조절 (0) | 2021.12.23 |
| Photoshop tip (0) | 2021.10.06 |