-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
50 lines (44 loc) · 1.91 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
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>htm</title>
<style>
body {
background-image: linear-gradient(pink, hotpink);
margin: 0 0 0;
}
svg {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<svg viewBox="0 0 64 154" preserveAspectRatio="xMidYMid meet">
<defs>
<clipPath id="clipPath01">
<rect id="clipRect" x="0" y="95%" width="100%" height="100%"></rect>
</clipPath>
</defs>
<g>
<path fill="#8FDEEE" clip-path="url(#clipPath01)" d="M14.6369846,4 C14.6369846,4 17.4212725,15.7097356 14.1218334,23.1542044 C10.8223943,30.5986732 3,23.8392428 3,31.4211816 L3,148.119078 C3,150.271677 4.96714286,152.022682 7.38514286,152.022682 L58.6157143,152.022682 C61.0337143,152.022682 63,150.271677 63,148.119078 C63,148.119078 63,71.1723562 63,30.615662 C63,26.6449291 54.8098789,28.3406064 52.4189742,23.1542044 C49.2303057,16.2372761 51.6079651,4 51.6079651,4 L14.6369846,4 Z"></path>
<path fill="transparent" stroke="#FAFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M52.25 2H50v15.7c0 7.45 4.4 7.45 4.4 7.45 4.2 0 7.6 3.4 7.6 7.56v111.75c0 4.18-3.4 7.56-7.6 7.56H9.6c-4.2 0-7.6-3.37-7.6-7.55V32.7c0-4.16 3.4-7.55 7.6-7.55 0 0 4.4 0 4.4-7.46V2h-2.25"></path>
</g>
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
d3.select('g').call(
d3.drag().on('drag', function () {
//get event position
var y = d3.event.y;
//no negatives
var n = (y < 0) ? 0 : y;
//create percentage of SVG
d3.select('#clipRect').attr('y', function () { return n; });
})
);
</script>
</body>
</html>