-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsquircle.html
108 lines (102 loc) · 8.56 KB
/
squircle.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
<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;}
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 */
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 */
--absV: max(var(--v), -1*var(--v));
--absUPow4: calc(var(--absU)*var(--absU)*var(--absU)*var(--absU));
--absVPow4: calc(var(--absV)*var(--absV)*var(--absV)*var(--absV));
--radiusPow4: calc(0.5*0.5*0.5*0.5);
/* https://www.figma.com/blog/desperately-seeking-squircles/ */
/* http://en.m.wikipedia.org/wiki/Squircle */
--dist: calc(var(--absUPow4) + var(--absVPow4) - var(--radiusPow4));
background-color: rgb(
calc(var(--dist) * 255),
calc(var(--dist) * 255),
calc(var(--dist) * 255)
);
}
</style>