Skip to content

Commit be700fd

Browse files
abstrxtInfinityabstrxtInfinity
committed
svg animation
1 parent feea5f4 commit be700fd

File tree

2 files changed

+197
-0
lines changed

2 files changed

+197
-0
lines changed

‎svgTextAnimation/index.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Svg Animation</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
</head>
10+
<body>
11+
<svg
12+
width="762"
13+
height="114"
14+
viewBox="0 0 762 114"
15+
fill="none"
16+
xmlns="http://www.w3.org/2000/svg"
17+
id="logo"
18+
>
19+
<path
20+
d="M36.336 6.63198C47.28 6.63198 56.736 8.69598 64.704 12.824C72.768 16.856 78.912 22.664 83.136 30.248C87.456 37.832 89.616 46.76 89.616 57.032C89.616 67.304 87.456 76.232 83.136 83.816C78.912 91.304 72.768 97.064 64.704 101.096C56.736 105.032 47.28 107 36.336 107H5.08801V6.63198H36.336ZM36.336 96.2C49.296 96.2 59.184 92.792 66 85.976C72.816 79.064 76.224 69.416 76.224 57.032C76.224 44.552 72.768 34.808 65.856 27.8C59.04 20.792 49.2 17.288 36.336 17.288H18.192V96.2H36.336Z"
21+
stroke="white"
22+
stroke-width="10"
23+
mask="url(#path-1-outside-1)"
24+
/>
25+
<path
26+
d="M120.005 17.288V50.84H156.581V61.64H120.005V96.2H160.901V107H106.901V6.48798H160.901V17.288H120.005Z"
27+
stroke="white"
28+
stroke-width="10"
29+
mask="url(#path-1-outside-1)"
30+
/>
31+
<path
32+
d="M263.673 6.63198L225.801 107H210.681L172.809 6.63198H186.777L218.313 93.176L249.849 6.63198H263.673Z"
33+
stroke="white"
34+
stroke-width="10"
35+
mask="url(#path-1-outside-1)"
36+
/>
37+
<path
38+
d="M291.145 17.288V50.84H327.721V61.64H291.145V96.2H332.041V107H278.041V6.48798H332.041V17.288H291.145Z"
39+
stroke="white"
40+
stroke-width="10"
41+
mask="url(#path-1-outside-1)"
42+
/>
43+
<path
44+
d="M364.973 96.344H400.109V107H351.869V6.63198H364.973V96.344Z"
45+
stroke="white"
46+
stroke-width="10"
47+
mask="url(#path-1-outside-1)"
48+
/>
49+
<path
50+
d="M459.53 108.008C450.218 108.008 441.722 105.848 434.042 101.528C426.362 97.112 420.266 91.016 415.754 83.24C411.338 75.368 409.129 66.536 409.129 56.744C409.129 46.952 411.338 38.168 415.754 30.392C420.266 22.52 426.362 16.424 434.042 12.104C441.722 7.68798 450.218 5.47998 459.53 5.47998C468.938 5.47998 477.481 7.68798 485.161 12.104C492.841 16.424 498.89 22.472 503.306 30.248C507.722 38.024 509.93 46.856 509.93 56.744C509.93 66.632 507.722 75.464 503.306 83.24C498.89 91.016 492.841 97.112 485.161 101.528C477.481 105.848 468.938 108.008 459.53 108.008ZM459.53 96.632C466.538 96.632 472.825 95 478.393 91.736C484.057 88.472 488.474 83.816 491.642 77.768C494.906 71.72 496.538 64.712 496.538 56.744C496.538 48.68 494.906 41.672 491.642 35.72C488.474 29.672 484.106 25.016 478.538 21.752C472.97 18.488 466.634 16.856 459.53 16.856C452.426 16.856 446.09 18.488 440.522 21.752C434.954 25.016 430.537 29.672 427.273 35.72C424.105 41.672 422.522 48.68 422.522 56.744C422.522 64.712 424.105 71.72 427.273 77.768C430.537 83.816 434.954 88.472 440.522 91.736C446.186 95 452.522 96.632 459.53 96.632Z"
51+
stroke="white"
52+
stroke-width="10"
53+
mask="url(#path-1-outside-1)"
54+
/>
55+
<path
56+
d="M594.333 36.008C594.333 44.36 591.453 51.32 585.693 56.888C580.029 62.36 571.341 65.096 559.629 65.096H540.333V107H527.229V6.63198H559.629C570.957 6.63198 579.549 9.36798 585.405 14.84C591.357 20.312 594.333 27.368 594.333 36.008ZM559.629 54.296C566.925 54.296 572.301 52.712 575.757 49.544C579.213 46.376 580.941 41.864 580.941 36.008C580.941 23.624 573.837 17.432 559.629 17.432H540.333V54.296H559.629Z"
57+
stroke="white"
58+
stroke-width="10"
59+
mask="url(#path-1-outside-1)"
60+
/>
61+
<path
62+
d="M623.723 17.288V50.84H660.299V61.64H623.723V96.2H664.619V107H610.619V6.48798H664.619V17.288H623.723Z"
63+
stroke="white"
64+
stroke-width="10"
65+
mask="url(#path-1-outside-1)"
66+
/>
67+
<path
68+
d="M737.295 107L713.391 65.96H697.551V107H684.447V6.63198H716.847C724.431 6.63198 730.815 7.92798 735.999 10.52C741.279 13.112 745.215 16.616 747.807 21.032C750.399 25.448 751.695 30.488 751.695 36.152C751.695 43.064 749.679 49.16 745.647 54.44C741.711 59.72 735.759 63.224 727.791 64.952L752.991 107H737.295ZM697.551 55.448H716.847C723.951 55.448 729.279 53.72 732.831 50.264C736.383 46.712 738.159 42.008 738.159 36.152C738.159 30.2 736.383 25.592 732.831 22.328C729.375 19.064 724.047 17.432 716.847 17.432H697.551V55.448Z"
69+
stroke="white"
70+
stroke-width="10"
71+
mask="url(#path-1-outside-1)"
72+
/>
73+
<mask
74+
id="path-1-outside-1"
75+
maskUnits="userSpaceOnUse"
76+
x="0.0880127"
77+
y="0.47998"
78+
width="762"
79+
height="113"
80+
fill="black"
81+
>
82+
<rect fill="white" x="0.0880127" y="0.47998" width="762" height="113" />
83+
<path
84+
d="M36.336 6.63198C47.28 6.63198 56.736 8.69598 64.704 12.824C72.768 16.856 78.912 22.664 83.136 30.248C87.456 37.832 89.616 46.76 89.616 57.032C89.616 67.304 87.456 76.232 83.136 83.816C78.912 91.304 72.768 97.064 64.704 101.096C56.736 105.032 47.28 107 36.336 107H5.08801V6.63198H36.336ZM36.336 96.2C49.296 96.2 59.184 92.792 66 85.976C72.816 79.064 76.224 69.416 76.224 57.032C76.224 44.552 72.768 34.808 65.856 27.8C59.04 20.792 49.2 17.288 36.336 17.288H18.192V96.2H36.336Z"
85+
/>
86+
<path
87+
d="M120.005 17.288V50.84H156.581V61.64H120.005V96.2H160.901V107H106.901V6.48798H160.901V17.288H120.005Z"
88+
/>
89+
<path
90+
d="M263.673 6.63198L225.801 107H210.681L172.809 6.63198H186.777L218.313 93.176L249.849 6.63198H263.673Z"
91+
/>
92+
<path
93+
d="M291.145 17.288V50.84H327.721V61.64H291.145V96.2H332.041V107H278.041V6.48798H332.041V17.288H291.145Z"
94+
/>
95+
<path d="M364.973 96.344H400.109V107H351.869V6.63198H364.973V96.344Z" />
96+
<path
97+
d="M459.53 108.008C450.218 108.008 441.722 105.848 434.042 101.528C426.362 97.112 420.266 91.016 415.754 83.24C411.338 75.368 409.129 66.536 409.129 56.744C409.129 46.952 411.338 38.168 415.754 30.392C420.266 22.52 426.362 16.424 434.042 12.104C441.722 7.68798 450.218 5.47998 459.53 5.47998C468.938 5.47998 477.481 7.68798 485.161 12.104C492.841 16.424 498.89 22.472 503.306 30.248C507.722 38.024 509.93 46.856 509.93 56.744C509.93 66.632 507.722 75.464 503.306 83.24C498.89 91.016 492.841 97.112 485.161 101.528C477.481 105.848 468.938 108.008 459.53 108.008ZM459.53 96.632C466.538 96.632 472.825 95 478.393 91.736C484.057 88.472 488.474 83.816 491.642 77.768C494.906 71.72 496.538 64.712 496.538 56.744C496.538 48.68 494.906 41.672 491.642 35.72C488.474 29.672 484.106 25.016 478.538 21.752C472.97 18.488 466.634 16.856 459.53 16.856C452.426 16.856 446.09 18.488 440.522 21.752C434.954 25.016 430.537 29.672 427.273 35.72C424.105 41.672 422.522 48.68 422.522 56.744C422.522 64.712 424.105 71.72 427.273 77.768C430.537 83.816 434.954 88.472 440.522 91.736C446.186 95 452.522 96.632 459.53 96.632Z"
98+
/>
99+
<path
100+
d="M594.333 36.008C594.333 44.36 591.453 51.32 585.693 56.888C580.029 62.36 571.341 65.096 559.629 65.096H540.333V107H527.229V6.63198H559.629C570.957 6.63198 579.549 9.36798 585.405 14.84C591.357 20.312 594.333 27.368 594.333 36.008ZM559.629 54.296C566.925 54.296 572.301 52.712 575.757 49.544C579.213 46.376 580.941 41.864 580.941 36.008C580.941 23.624 573.837 17.432 559.629 17.432H540.333V54.296H559.629Z"
101+
/>
102+
<path
103+
d="M623.723 17.288V50.84H660.299V61.64H623.723V96.2H664.619V107H610.619V6.48798H664.619V17.288H623.723Z"
104+
/>
105+
<path
106+
d="M737.295 107L713.391 65.96H697.551V107H684.447V6.63198H716.847C724.431 6.63198 730.815 7.92798 735.999 10.52C741.279 13.112 745.215 16.616 747.807 21.032C750.399 25.448 751.695 30.488 751.695 36.152C751.695 43.064 749.679 49.16 745.647 54.44C741.711 59.72 735.759 63.224 727.791 64.952L752.991 107H737.295ZM697.551 55.448H716.847C723.951 55.448 729.279 53.72 732.831 50.264C736.383 46.712 738.159 42.008 738.159 36.152C738.159 30.2 736.383 25.592 732.831 22.328C729.375 19.064 724.047 17.432 716.847 17.432H697.551V55.448Z"
107+
/>
108+
</mask>
109+
</svg>
110+
</body>
111+
</html>

‎svgTextAnimation/style.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
* {
2+
padding: none;
3+
margin: none;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
width: 100%;
9+
height: 100vh;
10+
background: rgb(32, 35, 48);
11+
overflow: hidden;
12+
}
13+
14+
#logo {
15+
top: 50%;
16+
left: 50%;
17+
transform: translate(-50%, -50%);
18+
position: absolute;
19+
animation: fill 0.5s ease forwards 4s;
20+
}
21+
#logo mask {
22+
animation: fill 0.5s ease forwards 4s;
23+
}
24+
#logo path {
25+
animation: play 2s ease-in forwards;
26+
}
27+
28+
#logo path:nth-child(1) {
29+
stroke-dasharray: 572;
30+
stroke-dashoffset: 572;
31+
}
32+
#logo path:nth-child(2) {
33+
stroke-dasharray: 464;
34+
stroke-dashoffset: 464;
35+
animation-delay: 0.3s;
36+
}
37+
#logo path:nth-child(3) {
38+
stroke-dasharray: 441.6844177246094;
39+
stroke-dashoffset: 441.6844177246094;
40+
animation-delay: 0.6s;
41+
}
42+
#logo path:nth-child(4) {
43+
stroke-dasharray: 464;
44+
stroke-dashoffset: 464;
45+
animation-delay: 0.9s;
46+
}
47+
#logo path:nth-child(5) {
48+
stroke-dasharray: 298;
49+
stroke-dashoffset: 298;
50+
animation-delay: 1.2s;
51+
}
52+
#logo path:nth-child(6) {
53+
stroke-dasharray: 566;
54+
stroke-dashoffset: 566;
55+
animation-delay: 1.5s;
56+
}
57+
#logo path:nth-child(7) {
58+
stroke-dasharray: 450;
59+
stroke-dashoffset: 450;
60+
animation-delay: 1.8s;
61+
}
62+
#logo path:nth-child(8) {
63+
stroke-dasharray: 464;
64+
stroke-dashoffset: 464;
65+
animation-delay: 2.1s;
66+
}
67+
#logo path:nth-child(9) {
68+
stroke-dasharray: 549;
69+
stroke-dashoffset: 549;
70+
animation-delay: 2.4s;
71+
}
72+
73+
@keyframes play {
74+
to {
75+
stroke-dashoffset: 0;
76+
}
77+
}
78+
79+
@keyframes fill {
80+
from {
81+
fill: black;
82+
}
83+
to {
84+
fill: white;
85+
}
86+
}

0 commit comments

Comments
 (0)