-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
107 lines (94 loc) · 5.77 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PDAM Tirta Tarum Kabupaten Karawang</title>
<link rel="canonical" href="https://tirtatarum.id">
<style>
#container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.box {
max-width: 90vh;
margin: 5px;
text-align: center;
}
html, body {
background: #005C97;
background: linear-gradient(to left, #005C97 , #363795);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', sans-serif;
letter-spacing: 6px;
overflow: hidden;
}
.water-fill {
animation: wave 0.7s infinite linear,
fill-up 10s infinite ease-out alternate;
}
@keyframes wave {
0% { x: -400px; }
100% { x: 0; }
}
@keyframes fill-up {
0% {
height: 0;
y: 130px;
}
100% {
height: 160px;
y: -30px;
}
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<svg width="100%" version="1.1" viewBox="0 0 560.29413 278.04474" xmlns="http://www.w3.org/2000/svg" style="">
<g transform="translate(-58.808 -38.2)">
<g transform="translate(13.808)" fill="none" stroke="#0f0">
<path d="m45 303h175l117.62-252h62.383v150" stroke-width="25.6" class="IwxeYSwe_0"></path>
<path d="m330 223h220l36.547 80.717-9.6538 0.28277 6.107-3" stroke-width="24.5" class="IwxeYSwe_1"></path>
</g>
<path transform="matrix(-.99555 -.094268 .092028 -.99576 0 0)" fill="none" stroke="#000" stroke-linecap="square" stroke-width="7.6059" d="M-594.094,-69.348A70.974,71.825 0,1,1 -452.146,-69.348A70.974,71.825 0,1,1 -594.094,-69.348" class="IwxeYSwe_2"></path>
<path transform="rotate(185.34)" fill="none" stroke="#00f" stroke-miterlimit="5.2" stroke-width="60.61" d="M-553.5360000000001,-69.94A30.336,30.336 0,1,1 -492.86400000000003,-69.94A30.336,30.336 0,1,1 -553.5360000000001,-69.94" class="IwxeYSwe_3"></path>
<path d="m60.039 226s13.141-4.5872 20-5c13.369-0.80452 26.474 4.9034 39.867 5 15.136 0.10923 29.997-4.9974 45.133-5 15.183-3e-3 30.092 5.1155 45.275 5 13.346-0.10154 39.725-5 39.725-5l-7.0673 15.151s-21.648 4.7608-32.657 4.9723c-15.185 0.29169-30.087-5.1232-45.275-5.1235-14.974-2.9e-4 -29.664 5.1381-44.638 5.0496-13.559-0.0801-26.828-5.8662-40.362-5.0496-6.8594 0.41384-20 5-20 5z" fill="#00f" stroke="#000" stroke-width="1px" class="IwxeYSwe_4"></path>
<path d="m60.039 247.37s13.141-4.5872 20-5c13.369-0.80452 26.474 4.9034 39.867 5 15.136 0.10923 29.997-4.9974 45.133-5 15.183-3e-3 30.098 5.4301 45.275 5 10.044-0.2846 29.725-5 29.725-5l-7.0673 15.151s-14.935 4.5729-22.657 4.9723c-15.168 0.78449-30.087-5.1232-45.275-5.1235-14.974-2.9e-4 -29.664 5.1381-44.638 5.0496-13.559-0.0801-26.828-5.8662-40.362-5.0496-6.8594 0.41384-20 5-20 5z" fill="#00f" stroke="#000" stroke-width="1px" class="IwxeYSwe_5"></path>
<path d="m60.039 268.75s13.141-4.5872 20-5c13.369-0.80452 26.474 4.9034 39.867 5 15.136 0.10923 29.997-4.9974 45.133-5 15.183-3e-3 30.128 6.0488 45.275 5 6.7668-0.46855 19.725-5 19.725-5l-7.0673 15.151s-8.163 4.381-12.657 4.9723c-15.058 1.9812-30.087-5.1232-45.275-5.1235-14.974-2.9e-4 -29.664 5.1381-44.638 5.0496-13.559-0.0801-26.828-5.8662-40.362-5.0496-6.8594 0.41384-20 5-20 5z" fill="#00f" stroke="#000" stroke-width="1px" class="IwxeYSwe_6"></path>
</g>
<style data-made-with="vivus-instant">.IwxeYSwe_0{stroke-dasharray:666 668;stroke-dashoffset:667;animation:IwxeYSwe_draw 2000ms linear 0ms forwards;}.IwxeYSwe_1{stroke-dasharray:326 328;stroke-dashoffset:327;animation:IwxeYSwe_draw 2000ms linear 166ms forwards;}.IwxeYSwe_2{stroke-dasharray:449 451;stroke-dashoffset:450;animation:IwxeYSwe_draw 2000ms linear 333ms forwards;}.IwxeYSwe_3{stroke-dasharray:191 193;stroke-dashoffset:192;animation:IwxeYSwe_draw 2000ms linear 500ms forwards;}.IwxeYSwe_4{stroke-dasharray:409 411;stroke-dashoffset:410;animation:IwxeYSwe_draw 2000ms linear 666ms forwards;}.IwxeYSwe_5{stroke-dasharray:390 392;stroke-dashoffset:391;animation:IwxeYSwe_draw 2000ms linear 833ms forwards;}.IwxeYSwe_6{stroke-dasharray:370 372;stroke-dashoffset:371;animation:IwxeYSwe_draw 2000ms linear 1000ms forwards;}@keyframes IwxeYSwe_draw{100%{stroke-dashoffset:0;}}@keyframes IwxeYSwe_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>
</div>
<div class="box">
<svg class="tirtatarum" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" viewBox="0 0 574.558 120" enable-background="new 0 0 574.558 120" xml:space="preserve">
<defs>
<pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
<path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
</pattern>
<text id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" font-size="101.047"> tirta tarum</text>
<mask id="text_mask">
<use x="0" y="0" xlink:href="#text" opacity="1" fill="#3498db"/>
</mask>
</defs>
<use x="0" y="0" xlink:href="#text" fill="#3498db"/>
<rect class="water-fill" mask="url(#text_mask)" fill="url(#water)" x="-400" y="0" width="1600" height="100"/>
</svg>
</div>
</body>
</html>