-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathretro.html
More file actions
121 lines (108 loc) · 4.36 KB
/
retro.html
File metadata and controls
121 lines (108 loc) · 4.36 KB
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
<!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>SVG effects</title>
<link rel="preconnect" href="https://api.fonts.coollabs.io">
<link href="https://api.fonts.coollabs.io/css2?family=Orelega+One&display=swap" rel="stylesheet">
</head>
<body>
<style>
body {
background-color: #ffefcd;
font-size: 200%;
font-family: monospace;
max-width: 1000px;
padding: 1rem;
margin: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Orelega One', cursive;
filter: url('#wavy');
}
img {
filter: url('#duotone');
width: 100%;
aspect-ratio: 1.5;
object-fit: cover;
}
img:hover {
filter: none;
}
hr {
background-color: black;
border-style: double;
}
</style>
<h1 class="wavy">Retro</h1>
<p>I've been seeing the use of SVG filters quite a lot recently and thought I'd give them a shot. The headings have
some funky scroll effects and images a dual tone filter.
</p>
<img src="images/portrait_2.webp" alt="">
<hr>
<h2>It moves!</h2>
<h3>And this one does too</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, vero officia molestiae dolor quo recusandae deserunt
odio qui quae! Quas aut vitae iure quo exercitationem! Magni facilis impedit atque necessitatibus! Lorem, ipsum
dolor sit amet consectetur adipisicing elit.</p>
<img src="images/pexels-photo-4622237.jpeg" alt="">
<p> Molestias doloribus itaque suscipit minima corporis ipsa cumque
voluptatem temporibus excepturi. Impedit, rem vero repellendus quia laboriosam harum enim autem natus nesciunt!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid facere ratione incidunt ipsam possimus odio magnam
non, cumque tenetur omnis quis neque sequi accusamus rem exercitationem, provident dolores laborum dolore. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Mollitia iste iure, assumenda reprehenderit nesciunt error itaque
doloribus veniam rerum! Veniam non minus error officia dolorem iusto aspernatur ipsa reprehenderit iure. Lorem
ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem cumque quis architecto recusandae repudiandae
doloremque error tempora animi, voluptates expedita maiores culpa corrupti blanditiis nemo saepe esse ipsum
voluptate aut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quae illum nesciunt magnam,
perspiciatis eius officia aperiam architecto sint, corporis, omnis sapiente quo molestias temporibus cupiditate
natus est labore quas? Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eveniet consequuntur illum
vitae recusandae magnam, aperiam optio iste sed quas excepturi repellat repudiandae sapiente obcaecati asperiores ut
et fugit autem.</p>
<svg width="100%" height="100%">
<defs>
<filter id="wavy" x="-5%" y="-5%" width="110%" height="110%">
<feTurbulence type="fractalNoise" id="noisy" baseFrequency="0.01 0.07" numOctaves="5" seed="2" result="noise">
</feTurbulence>
<feDisplacementMap id="wavyScale" in="SourceGraphic" in2="warp" scale="0" xChannelSelector="R"
yChannelSelector="B">
</feDisplacementMap>
</filter>
</defs>
</svg>
<svg width="100%" height="100%">
<filter id="duotone">
<feColorMatrix type="matrix" values=".5 .5 .5 0 0
.5 .5 .5 0 0
.5 .5 .5 0 0
0 0 0 1 0">
</feColorMatrix>
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="table" tableValues=".16078431 1.0"></feFuncR>
<feFuncG type="table" tableValues=".125490196 0.9372549"></feFuncG>
<feFuncB type="table" tableValues=".552941176 0.8039216"></feFuncB>
</feComponentTransfer>
</filter>
</svg>
</body>
<script>
var distortionScale = 0;
window.onscroll = (e) => {
distortionScale += 3;
}
function animate(t) {
distortionScale -= distortionScale / 15
document.getElementById("wavyScale").setAttribute('scale', distortionScale + 7);
document.getElementById("noisy").setAttribute('seed', Math.round((Date.now() * 0.01) % 12543));
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
</script>
</html>