Skip to content

Commit 2b2b954

Browse files
andreasmallingandreasmalling
authored
Changes content of index to flash "mstr" words.
1 parent 8a28594 commit 2b2b954

1 file changed

Lines changed: 83 additions & 40 deletions

File tree

‎index.html‎

Lines changed: 83 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,93 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="da">
33

44
<head>
5-
<title>Nothing to see here</title>
5+
<title>Hvad betyder det?</title>
66
</head>
77

88
<body>
9-
<svg viewBox="0 0 120 60" xmlns="http://www.w3.org/2000/svg">
9+
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
10+
<style>
11+
#animated-text {
12+
font-family: 'Times New Roman', serif;
13+
font-size: 50px;
14+
dominant-baseline: middle;
15+
text-anchor: middle;
16+
}
17+
18+
.bold {
19+
font-weight: bold;
20+
}
21+
22+
.grey {
23+
font-weight: normal;
24+
fill: gray;
25+
}
26+
27+
@keyframes wordAnimation {
28+
0%, 16% {
29+
opacity: 1;
30+
}
31+
20%, 100% {
32+
opacity: 0;
33+
}
34+
}
35+
36+
#word1, #word2, #word3, #word4, #word5 {
37+
opacity: 0;
38+
animation-duration: 10s;
39+
animation-iteration-count: infinite;
40+
animation-name: wordAnimation;
41+
animation-timing-function: ease-in-out;
42+
}
43+
44+
#word1 {
45+
animation-delay: 0s;
46+
}
47+
48+
#word2 {
49+
animation-delay: 2s;
50+
}
51+
52+
#word3 {
53+
animation-delay: 4s;
54+
}
55+
56+
#word4 {
57+
animation-delay: 6s;
58+
}
59+
60+
#word5 {
61+
animation-delay: 8s;
62+
}
1063

11-
<!-- First Dot -->
12-
<circle cx="40" cy="30" r="8" fill="#3498db">
13-
<animate attributeName="opacity" values="0.3; 1; 0.3" dur="1.4s" repeatCount="indefinite" begin="0s" />
14-
<animate attributeName="cy" values="30; 24; 30" dur="1.4s" repeatCount="indefinite" begin="0s" />
15-
</circle>
16-
17-
<!-- Second Dot -->
18-
<circle cx="60" cy="30" r="8" fill="#3498db">
19-
<animate attributeName="opacity" values="0.3; 1; 0.3" dur="1.4s" repeatCount="indefinite" begin="0.2s" />
20-
<animate attributeName="cy" values="30; 24; 30" dur="1.4s" repeatCount="indefinite" begin="0.2s" />
21-
</circle>
22-
23-
<!-- Third Dot -->
24-
<circle cx="80" cy="30" r="8" fill="#3498db">
25-
<animate attributeName="opacity" values="0.3; 1; 0.3" dur="1.4s" repeatCount="indefinite" begin="0.4s" />
26-
<animate attributeName="cy" values="30; 24; 30" dur="1.4s" repeatCount="indefinite" begin="0.4s" />
27-
</circle>
28-
29-
<!-- Optional: Shadow effect -->
30-
<ellipse cx="60" cy="45" rx="45" ry="6" fill="#000000" opacity="0.05" />
31-
32-
<!-- Alternative animation variation (hidden by default, remove the display="none" to use) -->
33-
<g display="none">
34-
<!-- First Dot (alt) -->
35-
<circle cx="40" cy="30" r="8" fill="#9b59b6">
36-
<animate attributeName="r" values="6; 9; 6" dur="1s" repeatCount="indefinite" begin="0s" />
37-
</circle>
38-
39-
<!-- Second Dot (alt) -->
40-
<circle cx="60" cy="30" r="8" fill="#9b59b6">
41-
<animate attributeName="r" values="6; 9; 6" dur="1s" repeatCount="indefinite" begin="0.3s" />
42-
</circle>
43-
44-
<!-- Third Dot (alt) -->
45-
<circle cx="80" cy="30" r="8" fill="#9b59b6">
46-
<animate attributeName="r" values="6; 9; 6" dur="1s" repeatCount="indefinite" begin="0.6s" />
47-
</circle>
64+
</style>
65+
66+
<g id="animated-text">
67+
<!-- mstr -->
68+
<text id="word1" x="200" y="50">
69+
<tspan class="bold">mstr</tspan>
70+
</text>
71+
72+
<!-- hamster -->
73+
<text id="word2" x="200" y="50">
74+
<tspan class="grey">ha</tspan><tspan class="bold">mst</tspan><tspan class="grey">e</tspan><tspan class="bold">r</tspan>
75+
</text>
76+
77+
<!-- mønster -->
78+
<text id="word3" x="200" y="50">
79+
<tspan class="bold">m</tspan><tspan class="grey">øn</tspan><tspan class="bold">st</tspan><tspan class="grey">e</tspan><tspan class="bold">r</tspan>
80+
</text>
81+
82+
<!-- halmstrå -->
83+
<text id="word4" x="200" y="50">
84+
<tspan class="grey">hal</tspan><tspan class="bold">mstr</tspan><tspan class="grey">å</tspan>
85+
</text>
86+
87+
<!-- omstrukturering -->
88+
<text id="word5" x="200" y="50">
89+
<tspan class="grey">o</tspan><tspan class="bold">mstr</tspan><tspan class="grey">ukturering</tspan>
90+
</text>
4891
</g>
4992
</svg>
5093

0 commit comments

Comments
 (0)