-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (75 loc) · 4.54 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hanno-Wybren Mook</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Hanno-Wybren Mook">
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
<link rel="apple-touch-icon" sizes="76x76" href="img/apple_76.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/apple_120.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/apple_152.png">
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" class="filterwrapper">
<defs>
<svg id="glitchmask-r" width="100%" height="100%" viewbox="0 0 100 100" preserveAspectRatio="none">
<line class="top-r" x1="0" y1="0" x2="100%" y2="0"> </line>
<line class="bot-r" x1="0" y1="100%" x2="100%" y2="100%"></line>
</svg>
<svg id="glitchmask-g" width="100%" height="100%" viewbox="0 0 100 100" preserveAspectRatio="none">
<line class="top-g" x1="0" y1="0" x2="100%" y2="0"></line>
<line class="bot-g" x1="0" y1="100%" x2="100%" y2="100%"></line>
</svg>
<filter color-interpolation-filters="sRGB" id="filter" width="100%" heigth="100%" x="0" y="0">
<feFlood flood-color="white" result="black" />
<!-- red text start -->
<feFlood flood-color="red" result="REDTXT_FLOOD_10" />
<feComposite operator="in" in="REDTXT_FLOOD_10" in2="SourceAlpha" result="REDTXT_COMP_20" />
<feOffset in="SourceGraphic" dx="-2" dy="0" result="REDTXT_OFFSET_30" />
<feMerge result="REDTXT_MERGE_40">
<feMergeNode in="black" />
<feMergeNode in="REDTXT_COMP_20" />
<feMergeNode in="REDTXT_OFFSET_30" />
</feMerge>
<feImage preserveAspectRatio="none" id="mask-r" result="REDTXT_IMG_50" xlink:href="#glitchmask-r" />
<feComposite in2="REDTXT_IMG_50" in="REDTXT_MERGE_40" operator="out" result="REDTXT_COMP_60" />
<!-- red text end -->
<!-- green text start -->
<feFlood flood-color="limegreen" result="GREENTXT_FLOOD_10" />
<feComposite operator="in" in="GREENTXT_FLOOD_10" in2="SourceAlpha" result="GREENTXT_COMP_20" />
<feOffset in="SourceGraphic" dx="2" dy="0" result="GREENTXT_OFFSET_30" />
<feMerge result="GREENTXT_MERGE_40">
<feMergeNode in="black" />
<feMergeNode in="GREENTXT_COMP_20" />
<feMergeNode in="GREENTXT_OFFSET_30" />
</feMerge>
<feImage preserveAspectRatio="none" id="mask-g" result="GREENTXT_IMG_50" xlink:href="#glitchmask-g" />
<feComposite in2="GREENTXT_IMG_50" in="GREENTXT_MERGE_40" operator="out" result="GREENTXT_COMP_60" />
<!-- green text end -->
<feMerge result="MERGE_10">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="REDTXT_COMP_60" />
<feMergeNode in="GREENTXT_COMP_60" />
</feMerge>
</filter>
</defs>
</svg>
<div class="container centered" itemscope itemtype="http://schema.org/Person">
<div class="svg-animation">
<svg width="100%" height="100%" viewBox="0 0 234 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-139.000000, 0.000000)" fill="#F5A623" fill-rule="nonzero">
<polygon id="/" points="338.548718 0 372.682051 11.8153846 173.789744 512 139 500.184615"></polygon>
</g>
</g>
</svg>
</div>
<div class="personal-details">
<h1 class="v_top"><p class="glitch-filter-example__filtered-text">Hanno-Wybren Mook</p></h1>
<h2 class="v_bottom"><a href="mailto:[email protected]">Contact me</a> / <a href="https://www.linkedin.com/in/hmook/">LinkedIn</a></h2>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>