-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathheart.html
More file actions
115 lines (109 loc) · 8.97 KB
/
heart.html
File metadata and controls
115 lines (109 loc) · 8.97 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
<style>
div:nth-child(21) > span {--y: 0;}
div:nth-child(20) > span {--y: 0.05;}
div:nth-child(19) > span {--y: 0.1;}
div:nth-child(18) > span {--y: 0.15;}
div:nth-child(17) > span {--y: 0.2;}
div:nth-child(16) > span {--y: 0.25;}
div:nth-child(15) > span {--y: 0.3;}
div:nth-child(14) > span {--y: 0.35;}
div:nth-child(13) > span {--y: 0.4;}
div:nth-child(12) > span {--y: 0.45;}
div:nth-child(11) > span {--y: 0.5;}
div:nth-child(10) > span {--y: 0.55;}
div:nth-child(9) > span {--y: 0.6;}
div:nth-child(8) > span {--y: 0.65;}
div:nth-child(7) > span {--y: 0.7;}
div:nth-child(6) > span {--y: 0.75;}
div:nth-child(5) > span {--y: 0.8;}
div:nth-child(4) > span {--y: 0.85;}
div:nth-child(3) > span {--y: 0.9;}
div:nth-child(2) > span {--y: 0.95;}
div:nth-child(1) > span {--y: 1.0;}
div > span:nth-child(1) {--x: 0.0;}
div > span:nth-child(2) {--x: 0.05;}
div > span:nth-child(3) {--x: 0.1;}
div > span:nth-child(4) {--x: 0.15;}
div > span:nth-child(5) {--x: 0.2;}
div > span:nth-child(6) {--x: 0.25;}
div > span:nth-child(7) {--x: 0.3;}
div > span:nth-child(8) {--x: 0.35;}
div > span:nth-child(9) {--x: 0.4;}
div > span:nth-child(10) {--x: 0.45;}
div > span:nth-child(11) {--x: 0.5;}
div > span:nth-child(12) {--x: 0.55;}
div > span:nth-child(13) {--x: 0.6;}
div > span:nth-child(14) {--x: 0.65;}
div > span:nth-child(15) {--x: 0.7;}
div > span:nth-child(16) {--x: 0.75;}
div > span:nth-child(17) {--x: 0.8;}
div > span:nth-child(18) {--x: 0.85;}
div > span:nth-child(19) {--x: 0.9;}
div > span:nth-child(20) {--x: 0.95;}
div > span:nth-child(21) {--x: 1.0;}
@keyframes timer {
0% {--time: 0.00;} 5% {--time: 0.05;} 10% {--time: 0.10;} 15% {--time: 0.15;} 20% {--time: 0.20;}
25% {--time: 0.25;} 30% {--time: 0.30;} 35% {--time: 0.35;} 40% {--time: 0.40;} 45% {--time: 0.45;}
50% {--time: 0.50;} 55% {--time: 0.55;} 60% {--time: 0.60;} 65% {--time: 0.65;} 70% {--time: 0.70;}
75% {--time: 0.75;} 80% {--time: 0.80;} 85% {--time: 0.85;} 90% {--time: 0.90;} 95% {--time: 0.95;}
100% {--time: 1.00;}
}
:root {
animation: timer 1s infinite;
}
body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
}
span {
display: inline-block;
height: 1rem;
width: 1rem;
}
</style>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<style
style="display: inline-block; white-space: pre-wrap; font: 1em monospace;"
contenteditable="true"
>
/* Editable style!
Provided globals: --x, --y, normalized from 0 to 1
and --time from 0 to 1 over 1 second then loops (since CSS can't increase a counter forever) */
span {
--PI: 3.14159;
/* create new UV from -1 to 1 */
--u: calc(2.0 * var(--x) - 1.0);
--v: calc(2.0 * var(--y) - 1.0);
--absU: max(var(--u), -1*var(--u)); /* abs() polyfill */
--v2: calc(var(--v) * 1.2 - var(--absU) * (1.0 - var(--absU)));
--t2: calc(3.14 * var(--time)); /* range: [0, PI] */
--dist: calc(var(--u) * var(--u) + var(--v2) * var(--v2) - sin(var(--t2)) * 0.3);
background-color: rgb(
calc(var(--dist) * 255),
calc(var(--dist) * 255 * 1.5),
calc(var(--dist) * 255 * 1.2)
);
}
</style>