-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
51 lines (44 loc) · 2.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I'm Om!</title>
<link rel="stylesheet" href="index.css">
<script src="index.js" defer></script>
</head>
<body>
<!-- Background image - masked by blob -->
<div id="background">
<img src="Assets/bgimage.png" alt="">
</div>
<!-- Blob -->
<svg id="blob" width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<clipPath id="clipper">
<path id="blobitem" fill="#fff" transform="translate(0 0)">
<animate calcMode="paced" attributeName="d" dur="6000ms" repeatCount="indefinite" values="
M62,-52C74.8,-33.5,75.6,-8,68.9,13.5C62.3,35.1,48.1,52.7,29.5,61.8C10.9,71,-12,71.7,-30.2,62.9C-48.4,54,-62,35.6,-65.4,16.2C-68.8,-3.2,-62,-23.6,-49.4,-42.1C-36.8,-60.6,-18.4,-77.2,3.1,-79.6C24.6,-82.1,49.3,-70.5,62,-52Z;
M51.3,-39.3C63.1,-26,67,-4.9,61.9,12.7C56.7,30.3,42.4,44.4,24,55.5C5.5,66.6,-17.2,74.6,-34,67.6C-50.8,60.7,-61.7,38.6,-66.8,15.5C-71.9,-7.6,-71.1,-31.9,-59,-45.2C-46.9,-58.5,-23.5,-60.9,-1.9,-59.4C19.7,-57.9,39.4,-52.5,51.3,-39.3Z;
M59.8,-46.7C74.8,-28.9,82.4,-4.2,78.1,19C73.7,42.1,57.4,63.7,37.2,71.1C16.9,78.6,-7.2,71.9,-28.3,60.9C-49.5,50,-67.5,34.7,-72,16.1C-76.5,-2.4,-67.4,-24.4,-53.1,-42.1C-38.8,-59.7,-19.4,-72.9,1.5,-74.1C22.4,-75.3,44.8,-64.5,59.8,-46.7Z;
M64.7,-50.7C80.6,-31.8,87.8,-5.1,81.2,16.6C74.7,38.2,54.5,54.8,31.9,65.3C9.2,75.9,-15.9,80.6,-36.1,72C-56.2,63.4,-71.4,41.6,-77.3,17.2C-83.2,-7.1,-79.8,-34,-65.3,-52.6C-50.9,-71.2,-25.5,-81.5,-0.5,-81.1C24.5,-80.7,48.9,-69.6,64.7,-50.7Z;
M62,-52C74.8,-33.5,75.6,-8,68.9,13.5C62.3,35.1,48.1,52.7,29.5,61.8C10.9,71,-12,71.7,-30.2,62.9C-48.4,54,-62,35.6,-65.4,16.2C-68.8,-3.2,-62,-23.6,-49.4,-42.1C-36.8,-60.6,-18.4,-77.2,3.1,-79.6C24.6,-82.1,49.3,-70.5,62,-52Z;
" />
</path>
</clipPath>
</svg>
<!-- Hover prompt -->
<div id="hoverprompt">
<p>Hold click!</p>
</div>
<!-- My Info -->
<div id="info">
<h3 class="infohidden">Welcome, I'm Om</h3>
<p class="infohidden">Game & Experience Designer</p>
<div id="links" class="infohidden">
<a href="https://www.artstation.com/omrane"><img src="Assets/link2.svg" alt="ArtStation"></a>
<a href="https://www.behance.net/ohmrane"><img src="Assets/link1.svg" alt="Behance"></a>
</div>
</div>
</body>
</html>