header.svg
1
<svg fill="none" width="100%" xmlns="http://www.w3.org/2000/svg">
2
<foreignObject width="100%" height="100%">
3
<div xmlns="http://www.w3.org/1999/xhtml">
4
<style>
5
.wrapper {
6
height: 100vh;
7
display: grid;
8
place-items: center;
9
}
10
11
.text {
12
width: 9ch;
13
animation: typing 1.5s steps(9), blink .5s step-end infinite alternate;
14
white-space: nowrap;
15
overflow: hidden;
16
border-right: 3px solid;
17
font-family: monospace;
18
font-size: 4em;
19
background: linear-gradient(90deg, rgba(0,241,220,1) 0%, rgba(86,115,241,1) 44%, rgba(103,68,241,1) 54%, rgba(254,0,255,1) 100%);
20
-webkit-background-clip: text;
21
-webkit-text-fill-color: transparent;
22
}
23
24
@keyframes typing {
25
from {
26
width: 0
27
}
28
}
29
30
@keyframes blink {
31
from, to { border-color: transparent }
32
50% { border-color: rgba(254,0,255,1); }
33
}
34
</style>
35
<div class="wrapper">
36
<div class="text">
37
CodeFlow.
38
</div>
39
</div>
40
</div>
41
</foreignObject>
42
</svg>