-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·125 lines (96 loc) · 6.33 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cassie Evans | Creative Developer</title>
<meta name="description" content="Brighton based creative developer" />
<meta name="keywords" content="animation, svg, css, animejs, GSAP, javascript, web design, web dev" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Cassie Evans" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<link rel="stylesheet" type="text/css" href="pater/pater.css" />
</head>
<body class="demo-4">
<canvas id="noise" class="noise"></canvas>
<main>
<svg class="blob" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800">
<path d="M 1066,436 C 1051,543.8 973.2,656.2 873.6,700.1 756.6,751.7 600.9,725 492.4,657.4 431.5,619.5 387.5,546.9 376.7,476 360.3,368.3 377.9,229.2 462.5,160.5 589.5,57.34 815.4,42.24 952.4,131.7 1044,190.8 1081,328.8 1066,436 Z" pathdata:id="M 1041,450.4 C 1023,547.7 992.8,667.7 905.7,714.5 793.1,775 639,728.7 524.5,671.8 453.3,636.4 382.2,575.4 360.2,499 329.7,393 344.6,249.2 426,174.9 568.6,44.66 851.1,-8.71 1002,111.8 1091,182.7 1061,338.6 1041,450.4 Z;M 1066,436 C 1051,543.8 976.5,664.5 873.6,700.1 761,739.1 636.4,655.8 529.5,603.1 441.6,559.8 325.8,520.1 293.8,427.5 263.1,338.4 294.5,213.4 368.2,154.8 520.7,33.48 790.1,23.76 952.4,131.7 1043,191.7 1081,328.8 1066,436 Z;M 1066,436 C 1053,531.1 930.7,580.1 842.2,617.2 734,662.7 598.4,707.8 492.4,657.4 427.6,626.6 387.5,546.9 376.7,476 360.3,368.3 376.9,227.9 462.5,160.5 567.6,77.69 749.9,37.5 863.8,148.8 947.6,230.7 1082,320.1 1066,436 Z"/>
</svg>
<div id="center">
<svg width="40%" viewBox="0 0 177.7 63.3" class="letters letters--effect-1">
<!-- C -->
<g class="letter letter--1">
<g class="letter__part">
<path class="letter__layer color-1" d="M33,39.8c-1.2,7.4-4.2,12.4-11.7,12.4C10.8,52.2,9,42.1,9,29.7S10.8,7.2,21.3,7.2c7.4,0,10.5,5.1,11.7,12.4"/>
<path class="letter__layer color-3" d="M33,39.8c-1.2,7.4-4.2,12.4-11.7,12.4C10.8,52.2,9,42.1,9,29.7S10.8,7.2,21.3,7.2c7.4,0,10.5,5.1,11.7,12.4"/>
<path class="letter__layer color-2" d="M33,39.8c-1.2,7.4-4.2,12.4-11.7,12.4C10.8,52.2,9,42.1,9,29.7S10.8,7.2,21.3,7.2c7.4,0,10.5,5.1,11.7,12.4"/>
</g>
</g>
<!-- A -->
<g class="letter letter--2">
<g class="letter__part">
<path class="letter__layer color-1" d="M43,45.3l17.7,0.5"/>
<path class="letter__layer color-1" d="M39.7,56.8l13.1-45.5l10.6,46.2"/>
</g>
<g class="letter__part">
<path class="letter__layer color-3" d="M43,45.3l17.7,0.5"/>
<path class="letter__layer color-3" d="M39.7,56.8l13.1-45.5l10.6,46.2"/>
</g>
<g class="letter__part">
<path class="letter__layer color-2" d="M43,45.3l17.7,0.5"/>
<path class="letter__layer color-2" d="M39.7,56.8l13.1-45.5l10.6,46.2"/>
</g>
</g>
<!-- S -->
<g class="letter letter--3">
<g class="letter__part">
<path class="letter__layer color-1" d="M123.9,23.9c0.6-3.3-1.3-12.3-10.1-12.6c-5.8-0.2-10.7,4.6-10.9,10.7c-0.3,8.8,7.2,10.4,10.2,11.4 c3,1,10.4,2.6,10.1,11.4c-0.2,6.1-5.1,10.9-10.9,10.7c-8.7-0.3-10.6-9.3-10.1-12.6"/>
<path class="letter__layer color-3" d="M123.9,23.9c0.6-3.3-1.3-12.3-10.1-12.6c-5.8-0.2-10.7,4.6-10.9,10.7c-0.3,8.8,7.2,10.4,10.2,11.4 c3,1,10.4,2.6,10.1,11.4c-0.2,6.1-5.1,10.9-10.9,10.7c-8.7-0.3-10.6-9.3-10.1-12.6"/>
<path class="letter__layer color-2" d="M123.9,23.9c0.6-3.3-1.3-12.3-10.1-12.6c-5.8-0.2-10.7,4.6-10.9,10.7c-0.3,8.8,7.2,10.4,10.2,11.4 c3,1,10.4,2.6,10.1,11.4c-0.2,6.1-5.1,10.9-10.9,10.7c-8.7-0.3-10.6-9.3-10.1-12.6"/>
</g>
</g>
<!-- S -->
<g class="letter letter--4">
<g class="letter__part">
<path class="letter__layer color-1" d="M91.2,20.9c0.2-3.1-2.4-11.3-10.5-10.7c-5.3,0.4-9.3,5.3-8.9,11c0.6,8.2,7.6,9,10.4,9.6 c2.8,0.6,9.8,1.4,10.4,9.6c0.4,5.7-3.6,10.7-8.9,11c-8,0.6-10.7-7.6-10.5-10.7"/>
<path class="letter__layer color-3" d="M91.2,20.9c0.2-3.1-2.4-11.3-10.5-10.7c-5.3,0.4-9.3,5.3-8.9,11c0.6,8.2,7.6,9,10.4,9.6 c2.8,0.6,9.8,1.4,10.4,9.6c0.4,5.7-3.6,10.7-8.9,11c-8,0.6-10.7-7.6-10.5-10.7"/>
<path class="letter__layer color-2" d="M91.2,20.9c0.2-3.1-2.4-11.3-10.5-10.7c-5.3,0.4-9.3,5.3-8.9,11c0.6,8.2,7.6,9,10.4,9.6 c2.8,0.6,9.8,1.4,10.4,9.6c0.4,5.7-3.6,10.7-8.9,11c-8,0.6-10.7-7.6-10.5-10.7"/>
</g>
</g>
<!-- I -->
<g class="letter letter--5">
<g class="letter__part">
<path class="letter__layer color-1" d="M136.3,56.9l2.4-47.2"/>
<path class="letter__layer color-3" d="M136.3,56.9l2.4-47.2"/>
<path class="letter__layer color-2" d="M136.3,56.9l2.4-47.2"/>
</g>
</g>
<!-- E -->
<g class="letter letter--5">
<g class="letter__part">
<path class="letter__layer color-1" d="M152,33.2l13.4-0.5"/>
<path class="letter__layer color-1" d="M171.3,53.8l-18.4,0.7L151.1,12l18.4-0.7"/>
</g>
<g class="letter__part">
<path class="letter__layer color-3" d="M171.3,53.8l-18.4,0.7L151.1,12l18.4-0.7"/>
<path class="letter__layer color-3" d="M152,33.2l13.4-0.5"/>
</g>
<g class="letter__part">
<path class="letter__layer color-2" d="M171.3,53.8l-18.4,0.7L151.1,12l18.4-0.7"/>
<path class="letter__layer color-2" d="M152,33.2l13.4-0.5"/>
</g>
</g>
</svg>
<div class="construction">
<div class="construction-inner"></div>
<div class="construction-inner-2"></div>
</div>
</div>
</main>
<script src="js/anime.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>