-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
57 lines (54 loc) · 3.1 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
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;"/>
<title>Jughead | Acates Media</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="am-container">
<div class="cloud1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 350 241.1">
<g filter="url(#turbulence)">
<g>
<g class="cloud" transform="" fill-rule="evenodd" stroke="#000" stroke-width=".8">
<path d="M23.3 54c-3-6.2-3-13.8 2.3-19.7 5-6 22-11 28.5-4 2.5-5 9-7 14-7 4.7.2 12 2 11.6 8.7 5-5.3 8.2-.4 10 3.5 4.6-4 14.4-8.8 20.2-7.2 5.7 1.7 6 6.8 7.2 12 12 1.4 7 19.4.2 21 18.2 8.4 2.2 19.6 2.2 19.6.7 18.2-9.8 25.3-28 23.3-6 8.3-13.8 14.8-24.8 10.6-6 8-23.8 3-27.6-6-16 0-22.6-6-22-12.2-4.4-1.2-23.7-8-7-23.6-6-4-1-11 6-12.8 0 0 1-6.6 7.3-6.5z" id="path4562" fill="url(#radialGradient4574)" transform="translate(13.005 -22.938)" />
<path d="M33 53.3c-4.5 7.5 10 13.3 15.2 10.4" id="path4637" fill="none" />
<path d="M67 76.6c1.2 5 8 12.4 18 4.8 3 3.2 13.4-2.4 11.4-8" id="path4639" fill="none" />
<path d="M95.2 64.4c2.3 5.6 31.3 5 20.7-4.2" id="path4641" fill="none" />
<path d="M56.3 67.4c-1 4.8 4 15.4 14 6.6" id="path4643" fill="none" />
<path d="M46.8 59.7c.3 7.2 16.6 8.6 17.3-2" id="path4645" fill="none" />
<path d="M30 74l.5-2.6" id="path4647" fill="none" />
<path d="M79.6 92s1.8-2.4 2.5-4" id="path4649" fill="none" />
<path d="M67 7.3s-.7 1.4-1 3.2" id="path4651" fill="none" />
<path id="path4664" d="M53 28.6C47.2 19.3 65 13 69.7 21" fill="none" />
<path id="path4666" d="M88 26.8c6.3-5 16.3-4.6 19.4 6.4 17-1.8 19 7.4 9.4 11.3" fill="none" />
</g>
</g>
</svg>
<h1>Boom!</h1>
</div>
<svg class="jughead" version="1.1" width="94.080002" height="161.60001" viewBox="0 0 94.080002 161.60001" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs />
<g filter="url(#turbulence)">
<image width="94.080002" height="161.60001" preserveAspectRatio="none" xlink:href="jughead3.svg" />
</g>
</svg>
<div class="wrap">
<label>>:
<input id="start" onblur="this.focus()" autofocus>
</label>
</div>
<svg xlmns="http://www.w3.org/2000/svg" version="1.1">
<filter id="turbulence" filterUnits="objectBoundingBox">
<feTurbulence id="feturbulence" type="fractalNoise" numOctaves="3" seed="2"></feTurbulence>
<feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="20" in="SourceGraphic"></feDisplacementMap>
</filter>
</svg>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="script.js"></script>
</html>