forked from sshreya07/HacktoberFest-2022
-
Notifications
You must be signed in to change notification settings - Fork 0
/
text-animation.html
149 lines (128 loc) · 5.99 KB
/
text-animation.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Animation</title>
</head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#logo {
position: absolute;
padding: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
fill: transparent;
animation: fill 0.5s ease forwards 3s;
}
#logo path:nth-child(2) {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: line-anim 2s ease forwards;
}
#logo path:nth-child(3) {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: line-anim 2s ease forwards;
}
#logo path:nth-child(4) {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: line-anim 2s ease forwards 0.3s;
}
#logo path:nth-child(5) {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: line-anim 2s ease forwards 0.6s;
}
#logo path:nth-child(6) {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: line-anim 2s ease forwards 0.9s;
}
#logo path:nth-child(7) {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: line-anim 2s ease forwards 1.2s;
}
#logo path:nth-child(8) {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: line-anim 2s ease forwards 1.5s;
}
#logo path:nth-child(9) {
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
animation: line-anim 2s ease forwards 1.8s;
}
@keyframes line-anim {
to {
stroke-dashoffset: 0;
}
}
@keyframes fill {
from {
fill: #94CEEF;
}
to {
fill: white
}
}
</style>
<body>
<svg id="logo" width="748" height="104" viewBox="0 0 748 104" stroke="none" stroke-width="5"
xmlns="http://www.w3.org/2000/svg">
<path
d="M31.336 1.63198C42.28 1.63198 51.736 3.69598 59.704 7.82398C67.768 11.856 73.912 17.664 78.136 25.248C82.456 32.832 84.616 41.76 84.616 52.032C84.616 62.304 82.456 71.232 78.136 78.816C73.912 86.304 67.768 92.064 59.704 96.096C51.736 100.032 42.28 102 31.336 102H0.0880127V1.63198H31.336ZM31.336 91.2C44.296 91.2 54.184 87.792 61 80.976C67.816 74.064 71.224 64.416 71.224 52.032C71.224 39.552 67.768 29.808 60.856 22.8C54.04 15.792 44.2 12.288 31.336 12.288H13.192V91.2H31.336Z"
stroke="white" stroke-width="5" />
<path d="M115.005 12.288V45.84H151.581V56.64H115.005V91.2H155.901V102H101.901V1.48798H155.901V12.288H115.005Z"
stroke="white" stroke-width="5" />
<path d="M258.673 1.63198L220.801 102H205.681L167.809 1.63198H181.777L213.313 88.176L244.849 1.63198H258.673Z"
stroke="white" stroke-width="5" />
<path d="M286.145 12.288V45.84H322.721V56.64H286.145V91.2H327.041V102H273.041V1.48798H327.041V12.288H286.145Z"
stroke="white" stroke-width="5" />
<path d="M359.973 91.344H395.109V102H346.869V1.63198H359.973V91.344Z" stroke="white" stroke-width="5" />
<path
d="M454.53 103.008C445.218 103.008 436.722 100.848 429.042 96.528C421.362 92.112 415.266 86.016 410.754 78.24C406.338 70.368 404.129 61.536 404.129 51.744C404.129 41.952 406.338 33.168 410.754 25.392C415.266 17.52 421.362 11.424 429.042 7.10398C436.722 2.68798 445.218 0.47998 454.53 0.47998C463.938 0.47998 472.481 2.68798 480.161 7.10398C487.841 11.424 493.89 17.472 498.306 25.248C502.722 33.024 504.93 41.856 504.93 51.744C504.93 61.632 502.722 70.464 498.306 78.24C493.89 86.016 487.841 92.112 480.161 96.528C472.481 100.848 463.938 103.008 454.53 103.008ZM454.53 91.632C461.538 91.632 467.825 90 473.393 86.736C479.057 83.472 483.474 78.816 486.642 72.768C489.906 66.72 491.538 59.712 491.538 51.744C491.538 43.68 489.906 36.672 486.642 30.72C483.474 24.672 479.106 20.016 473.538 16.752C467.97 13.488 461.634 11.856 454.53 11.856C447.426 11.856 441.09 13.488 435.522 16.752C429.954 20.016 425.537 24.672 422.273 30.72C419.105 36.672 417.522 43.68 417.522 51.744C417.522 59.712 419.105 66.72 422.273 72.768C425.537 78.816 429.954 83.472 435.522 86.736C441.186 90 447.522 91.632 454.53 91.632Z"
stroke="white" stroke-width="5" />
<path
d="M589.333 31.008C589.333 39.36 586.453 46.32 580.693 51.888C575.029 57.36 566.341 60.096 554.629 60.096H535.333V102H522.229V1.63198H554.629C565.957 1.63198 574.549 4.36798 580.405 9.83998C586.357 15.312 589.333 22.368 589.333 31.008ZM554.629 49.296C561.925 49.296 567.301 47.712 570.757 44.544C574.213 41.376 575.941 36.864 575.941 31.008C575.941 18.624 568.837 12.432 554.629 12.432H535.333V49.296H554.629Z"
stroke="white" stroke-width="5" />
<path d="M618.723 12.288V45.84H655.299V56.64H618.723V91.2H659.619V102H605.619V1.48798H659.619V12.288H618.723Z"
stroke="white" stroke-width="5" />
<path
d="M732.295 102L708.391 60.96H692.551V102H679.447V1.63198H711.847C719.431 1.63198 725.815 2.92798 730.999 5.51998C736.279 8.11198 740.215 11.616 742.807 16.032C745.399 20.448 746.695 25.488 746.695 31.152C746.695 38.064 744.679 44.16 740.647 49.44C736.711 54.72 730.759 58.224 722.791 59.952L747.991 102H732.295ZM692.551 50.448H711.847C718.951 50.448 724.279 48.72 727.831 45.264C731.383 41.712 733.159 37.008 733.159 31.152C733.159 25.2 731.383 20.592 727.831 17.328C724.375 14.064 719.047 12.432 711.847 12.432H692.551V50.448Z"
stroke="white" stroke-width="5" />
</svg>
<script>
const logo = document.querySelectorAll("#logo path");
console.log(logo);
for (i = 0; i < logo.length; i++) {
console.log(`Letter ${i} is ${logo[i].getTotalLength()}`);
}
</script>
</body>
</html>