-
Notifications
You must be signed in to change notification settings - Fork 0
/
not_using_use.html
57 lines (51 loc) · 3.28 KB
/
not_using_use.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
<!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-color: hotpink;
margin: 0 0 0 0;
}
#svg {
height: 400px;
width: 333px;
}
.green {
fill: #8feec3;
color: #2dd5a6
}
</style>
</head>
<body>
<svg id="svg" class="green" viewBox="0 0 125 150">
<defs>
<clipPath id="clipPath">
<rect id="clipRect" x="0" y="88%" width="100%" height="100%"></rect>
</clipPath>
</defs>
<path fill="inherit" d="M94.78 79.6c-1.18 4.2-6.28 3.2-7.7 1.03-1.2-1.8-2.54-15.92-2.97-21.08-.5-6.4-1.22-20.18-.1-23.2.6-1.6 1.8-2.5 3.56-2.68 1.76-.2 3.05.52 3.98 1.98 1.5 2.36 2.72 13.8 3.12 20.26.4 6.56 1 20.57.14 23.7m14.26-1.82c-2.32-8-3.4-16.2-4.14-24.48-.44-4.9-.94-9.8-1.65-14.7-.95-6.52-4.33-11.54-10.1-14.97-3.5-2.08-7-4.17-10.4-6.42-1.8-1.2-3.4-2.63-5.02-4.1-1.3-1.15-1.47-2.82-1.5-4.45l-23.4.28c-.18 2.96-1.68 5.24-4.4 6.87-4.3 2.56-8.62 5.07-12.82 7.77-3.53 2.27-7.2 4.46-10.3 7.25-5.16 4.65-7.7 10.9-8.9 17.6-.75 4.2-1.03 8.48-1.43 12.73-.5 5.13-1.88 24.34-1.97 25 0 4.44.4 17.2.54 19.17.87 11.15 3.26 21.94 8 32.13 1.53 3.26 3.93 5.8 7.15 7.5 2.78 1.45 5.8 1.6 8.58.26 4.04-1.94 8-1.92 11.96-.16 5.88 2.6 11.98 4.14 18.4 4.48.27 0 6.93.23 10 .23 2.7-.37 5.42-.66 8.1-1.13 5.6-1 10.93-2.63 15.6-6 3.36-2.42 6-5.5 6.73-9.64 1.5-8.38 2.8-16.8 4.1-25.2 1.6-10.27-.3-20.18-3.14-30"></path>
<path fill="currentColor" d="M74.8 10.02c1.08-.03 1.94-.68 1.94-1.48V1.5c0-.83-.9-1.5-2-1.5H54.5c-1.1 0-2 .67-2 1.5v7.04c0 .8.85 1.45 1.92 1.48H74.8z"></path>
<path fill="#8fdeee" clip-path="url(#clipPath)" d="M94.78 79.6c-1.18 4.2-6.28 3.2-7.7 1.03-1.2-1.8-2.54-15.92-2.97-21.08-.5-6.4-1.22-20.18-.1-23.2.6-1.6 1.8-2.5 3.56-2.68 1.76-.2 3.05.52 3.98 1.98 1.5 2.36 2.72 13.8 3.12 20.26.4 6.56 1 20.57.14 23.7m14.26-1.82c-2.32-8-3.4-16.2-4.14-24.48-.44-4.9-.94-9.8-1.65-14.7-.95-6.52-4.33-11.54-10.1-14.97-3.5-2.08-7-4.17-10.4-6.42-1.8-1.2-3.4-2.63-5.02-4.1-1.3-1.15-1.47-2.82-1.5-4.45l-23.4.28c-.18 2.96-1.68 5.24-4.4 6.87-4.3 2.56-8.62 5.07-12.82 7.77-3.53 2.27-7.2 4.46-10.3 7.25-5.16 4.65-7.7 10.9-8.9 17.6-.75 4.2-1.03 8.48-1.43 12.73-.5 5.13-1.88 24.34-1.97 25 0 4.44.4 17.2.54 19.17.87 11.15 3.26 21.94 8 32.13 1.53 3.26 3.93 5.8 7.15 7.5 2.78 1.45 5.8 1.6 8.58.26 4.04-1.94 8-1.92 11.96-.16 5.88 2.6 11.98 4.14 18.4 4.48.27 0 6.93.23 10 .23 2.7-.37 5.42-.66 8.1-1.13 5.6-1 10.93-2.63 15.6-6 3.36-2.42 6-5.5 6.73-9.64 1.5-8.38 2.8-16.8 4.1-25.2 1.6-10.27-.3-20.18-3.14-30"></path>
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
d3.select('#svg').call(d3.drag().on('drag', function () {
//get event position
var y = d3.event.y;
//no negatives
var n = (y < 0) ? 0 : y;
//
var gbcr = d3.select(this).node().getBoundingClientRect();
//create percentage of SVG
var p = n / gbcr.height;
d3.select('#clipRect')
//.attr('height', function () {return 100 - coord[1] + 'px';})
.attr('y', function () { return p * 100 + '%'; });
})
);
</script>
</body>
</html>