html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Animated Drawing SVG Path</title>
</head>
<body>
<h1>Animated Drawing<br>SVG Path</h1>
<svg width="360" height="240" viewBox="200 50 650 350">
<g stroke-opacity="1.0" stroke-linecap="round" fill-opacity="0.0" stroke="black" stroke-width="5">
<path d="M 304.23096 181.12073 C 304.23096 181.12073 310.26324 222.13026 316.47064 241.81252 C 320.02823 253.09254 320.3774 267.0455 329.18518 274.9394 C 347.945 291.75287 353.28876 230.69041 364.82037 208.29295 C 372.18448 193.98978 386.48557 165.16614 386.48557 165.16614" stroke-dasharray="231 231" stroke-dashoffset="231">
<animate id="a1" attributeName="stroke-dashoffset" from="231" to="0" dur="0.462s" begin="0; a6.end" />
<animate attributeName="stroke-dashoffset" from="0" to="0" begin="a1.end" end="a6.end" dur="1s" repeatCount="indefinite"/>
<animate attributeName="stroke-dashoffset" from="231" to="231" begin="a6.end" end="a1.start"/>
</path>
<path d="M 408.68915 184.56758 C 408.68915 184.56758 369.92825 266.94437 399.16333 275.2187 C 420.6109 281.28888 456.78528 241.28622 456.78528 241.28622" stroke-dasharray="168 168" stroke-dashoffset="168">
<animate id="a2" attributeName="stroke-dashoffset" from="168" to="0" dur="0.336s" begin="a1.end" />
<animate attributeName="stroke-dashoffset" from="0" to="0" begin="a2.end" end="a6.end" dur="1s" repeatCount="indefinite"/>
<animate attributeName="stroke-dashoffset" from="168" to="168" begin="a6.end" end="a1.start"/>
</path>
<path d="M 427.56784 143.79369 C 427.65396 140.33655 418.66852 152.12482 422.09308 152.60619 C 422.4566 152.65729 422.82925 152.69969 423.19336 152.65288 C 424.71823 152.45683 427.18198 149.97362 425.9988 148.99193 C 425.94077 148.94377 427.5228 145.60309 427.56784 143.79369 Z" stroke-dasharray="25 25" stroke-dashoffset="25">
<animate id="a3" attributeName="stroke-dashoffset" from="25" to="0" dur="0.50s" begin="a2.end" />
<animate attributeName="stroke-dashoffset" from="0" to="0" begin="a3.end" end="a6.end"/>
<animate attributeName="stroke-dashoffset" from="25" to="25" begin="a6.end" end="a1.start"/>
</path>
<path d="M 515.73175 191.28455 C 515.73175 191.28455 503.1555 184.01633 496.2587 184.25589 C 483.37567 184.7034 470.8693 199.26846 469.39474 212.07465 C 467.38788 229.504 510.59058 228.93875 509.26675 246.43326 C 507.89066 264.61902 477.50385 281.38724 461.37085 272.8818 C 456.072 270.0882 448.38593 260.45877 448.38593 260.45877" stroke-dasharray="199 199" stroke-dashoffset="199">
<animate id="a4" attributeName="stroke-dashoffset" from="199" to="0" dur="0.398s" begin="a3.end" />
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html {
display:table;
table-layout:fixed;
width:100%;
height:100%;
}
body {
display:table-cell;
vertical-align:middle;
text-align:center;
font-family:sans-serif;
font-size:100%;
color: dimgray;
background:radial-gradient(100% 75% ellipse at 0 40%, whitesmoke, gainsboro);
}
svg {
border:1px solid silver;
background: white;
box-shadow:1ex 1ex 5ex 0.1ex rgba(0,0,0,0.66);
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run