<!-- NO HTML HERE -->
<!-- Original Artist: Justin Mezzell -->
<!-- Dribble: https://dribbble.com/shots/10836514-I-Saw-It-On-Twitch-Animal-Crossing-Island -->*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--water: #50d6f9;
--size: 90;
--unit: calc((var(--size) / 1600) * 1vmin);
--island-green: #31cd79;
/* --island-green: red; */
--island-green-shadow: #28ae5c;
--island-dirt: #a2693b;
--island-dirt-shadow: #85592d;
--island-grass-1: #39e14e;
--island-grass-2: #39dd83;
/* --island-grass-1: blue;
--island-grass-2: red; */
--tree-bark: #8b7b43;
--tree-bark-shadow: #a2693b;
--tree-leaves: #209234;
--tree-leaves-shadow: #1c7b28;
--post-side: #dfc18c;
--post-top: #ffdda7;
--post-shadow: #c1a067;
--balloon: #419cde;
--balloon-glean: #53b2ee;
--balloon-shadow: #2e7dc2;
--present-top: #eaeae2;
--present-side: #c9cec9;
--present-shadow: #aca9a8;
--present-ribbon: #da5122;
--present-ribbon-shadow-1: #a22a11;
--present-ribbon-side: #c14018;
--balloon-string: #eaeae2;
--flower-stem: #37e04f;
--flower-yellow: #e2dd0f;
--flower-yellow-top: #dfc70c;
--flower-pink: #f9bce2;
--flower-pink-top: #f48fd0;
--shallow-water: #8ee6f7;
--deep-water: #37aeed;
--transparent: rgba(255,255,255,0.0);
}
body {
background-color: var(--water);
height: 100vh;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: calc(var(--unit) * 1200);
width: calc(var(--unit) * 1600);
opacity: 5;
}
/* Island */
body::before {
content: "";
display: block;
height: calc(var(--unit) * 1200);
width: calc(var(--unit) * 1600);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-image:
/* Grass patch left*/
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-1),var(--island-grass-1)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-1),var(--island-grass-1)),
/* Grass patch right*/
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-1),var(--island-grass-1)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
/* Posts */
radial-gradient(ellipse, var(--post-top) 50%, var(--transparent) 51%),
radial-gradient(50% 50% at 50% 0%, var(--post-side) 50%, var(--transparent) 51%),
linear-gradient(90deg, var(--post-side) 50%, var(--post-shadow) 50%),
radial-gradient(ellipse, var(--post-shadow) 50%, var(--transparent) 51%),
linear-gradient(48deg, var(--transparent) 15%, var(--island-green-shadow) 16% 50%, var(--transparent) 51%),
radial-gradient(circle, var(--island-green-shadow) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--post-top) 50%, var(--transparent) 51%),
radial-gradient(50% 50% at 50% 0%, var(--post-side) 50%, var(--transparent) 51%),
linear-gradient(90deg, var(--post-side) 50%, var(--post-shadow) 50%),
radial-gradient(ellipse, var(--post-shadow) 50%, var(--transparent) 51%),
linear-gradient(48deg, var(--transparent) 15%, var(--island-green-shadow) 16% 50%, var(--transparent) 51%),
radial-gradient(circle, var(--island-green-shadow) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--post-top) 50%, var(--transparent) 51%),
radial-gradient(50% 50% at 50% 0%, var(--post-side) 50%, var(--transparent) 51%),
linear-gradient(90deg, var(--post-side) 50%, var(--post-shadow) 50%),
radial-gradient(ellipse, var(--post-shadow) 50%, var(--transparent) 51%),
linear-gradient(48deg, var(--transparent) 15%, var(--island-green-shadow) 16% 50%, var(--transparent) 51%),
radial-gradient(circle, var(--island-green-shadow) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--post-top) 50%, var(--transparent) 51%),
radial-gradient(50% 50% at 50% 0%, var(--post-side) 50%, var(--transparent) 51%),
linear-gradient(90deg, var(--post-side) 50%, var(--post-shadow) 50%),
radial-gradient(ellipse, var(--post-shadow) 50%, var(--transparent) 51%),
linear-gradient(48deg, var(--transparent) 15%, var(--island-green-shadow) 16% 50%, var(--transparent) 51%),
radial-gradient(circle, var(--island-green-shadow) 50%, var(--transparent) 51%),
/* Tree */
radial-gradient(63% 87% at -15% 116%, var(--tree-leaves) 50%, var(--transparent) 51%),
radial-gradient(63% 87% at 12% 7%, var(--tree-leaves) 50%, var(--transparent) 51%),
radial-gradient(52% 81% at 118% 0%, var(--tree-leaves) 50%, var(--transparent) 51%),
radial-gradient(62% 81% at 84% 100%, var(--tree-leaves) 50%, var(--transparent) 51%),
radial-gradient(circle, var(--tree-leaves-shadow) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--tree-leaves) 50%, var(--transparent) 51%),
radial-gradient(circle, var(--tree-leaves) 50%, var(--transparent) 51%),
radial-gradient(circle, var(--tree-leaves) 50%, var(--transparent) 51%),
radial-gradient(circle, var(--tree-leaves-shadow) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--tree-leaves) 50% , var(--transparent) 51%),
radial-gradient(circle, var(--tree-leaves-shadow) 50%, var(--transparent) 51%),
linear-gradient(107deg, var(--transparent) 25%, var(--tree-bark) 26%),
linear-gradient(73deg, var(--tree-bark) 75%, var(--transparent) 76%),
radial-gradient(ellipse at 50% 0%, var(--tree-bark) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--island-green-shadow) 50%, var(--transparent) 51%),
/* Level 2*/
radial-gradient(141% 118% at 112% 103%, var(--transparent) 88%, var(--water) 89%),
radial-gradient(115% 120% at 16% 93%, var(--transparent) 78%, var(--water) 79%),
radial-gradient(221% 215% at 114% -8%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(225% 200% at 114% -8%, var(--transparent) 50%, var(--island-green-shadow) 51% 67%, var(--transparent) 67%),
radial-gradient(200% 200% at -14% -8%, var(--transparent) 50%, var(--island-green-shadow) 51% 67%, var(--transparent) 67%),
/* radial-gradient(215% 222% at -14% -8%, var(--transparent) 50%, var(--island-green-shadow) 51%), */
linear-gradient(var(--island-green), var(--island-green)),
linear-gradient(var(--island-green-shadow), var(--island-green-shadow)),
radial-gradient(115% 194% at 100% -8%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(114% 213% at 0% 0%, var(--transparent) 50%, var(--island-green-shadow) 51%),
linear-gradient(var(--island-dirt-shadow), var(--island-dirt-shadow)),
linear-gradient(var(--island-dirt), var(--island-dirt)),
/* Grass patch left*/
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-1),var(--island-grass-1)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-1),var(--island-grass-1)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-1),var(--island-grass-1)),
/* Grass patch right*/
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-1) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-1),var(--island-grass-1)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
linear-gradient(115deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(245deg, var(--transparent) 22%, var(--island-grass-2) 23% 48%, var(--transparent) 49%),
linear-gradient(var(--island-grass-2),var(--island-grass-2)),
/* Flowers */
radial-gradient(ellipse, var(--flower-yellow-top) 50%, var(--transparent) 51%),
linear-gradient(114deg, var(--transparent) 25%, var(--flower-yellow) 26%),
linear-gradient(66deg, var(--flower-yellow) 75%, var(--transparent) 76%),
radial-gradient(ellipse at 50% 0%, var(--flower-yellow) 50%, var(--transparent) 51%),
linear-gradient(var(--flower-stem), var(--flower-stem)),
radial-gradient(circle, var(--flower-stem) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--island-green-shadow) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--flower-yellow-top) 50%, var(--transparent) 51%),
linear-gradient(114deg, var(--transparent) 25%, var(--flower-yellow) 26%),
linear-gradient(66deg, var(--flower-yellow) 75%, var(--transparent) 76%),
radial-gradient(ellipse at 50% 0%, var(--flower-yellow) 50%, var(--transparent) 51%),
linear-gradient(var(--flower-stem), var(--flower-stem)),
radial-gradient(circle, var(--flower-stem) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--island-green-shadow) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--flower-pink-top) 50%, var(--transparent) 51%),
linear-gradient(114deg, var(--transparent) 25%, var(--flower-pink) 26%),
linear-gradient(66deg, var(--flower-pink) 75%, var(--transparent) 76%),
radial-gradient(ellipse at 50% 0%, var(--flower-pink) 50%, var(--transparent) 51%),
linear-gradient(var(--flower-stem), var(--flower-stem)),
radial-gradient(circle, var(--flower-stem) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--island-green-shadow) 50%, var(--transparent) 51%),
/* Level 1 */
radial-gradient(150% 213% at 0% 100%, var(--transparent) 50%,var(--island-green) 51%),
radial-gradient(150% 213% at 0% 0%, var(--transparent) 50%, var(--island-green) 51%),
linear-gradient(var(--island-green-shadow), var(--island-green-shadow)),
radial-gradient(141% 118% at 112% 103%, var(--transparent) 88%, var(--water) 89%),
radial-gradient(123% 118% at 12% 103%, var(--transparent) 88%, var(--water) 89%),
radial-gradient(122% 104% at 112% 3%, var(--transparent) 88%, var(--shallow-water) 89%),
radial-gradient(122% 104% at 12% 3%, var(--transparent) 88%, var(--shallow-water) 89%),
radial-gradient(190% 170% at 100% 0%, var(--transparent) 50%, var(--island-green-shadow) 51% 79%, var(--transparent) 80%),
radial-gradient(190% 170% at 0% 0%, var(--transparent) 50%, var(--island-green-shadow) 51% 79%, var(--transparent) 80%),
linear-gradient(var(--island-green), var(--island-green)),
linear-gradient(var(--island-green-shadow), var(--island-green-shadow)),
/* Island Base */
radial-gradient(108% 106% at 100% 0%, var(--transparent) 90%, var(--island-dirt) 91%),
radial-gradient(108% 106% at 0% 0%, var(--transparent) 90%, var(--island-dirt) 91%),
linear-gradient(var(--island-dirt-shadow), var(--island-dirt-shadow)),
radial-gradient(73% 132% at 100% 0%, var(--transparent) 50%, var(--shallow-water)51%),
radial-gradient(76% 130% at 0% 0%, var(--transparent) 50%, var(--shallow-water) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
linear-gradient(var(--island-dirt), var(--island-dirt)),
/* Shallow Water */
/* Left */
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
linear-gradient(var(--shallow-water), var(--shallow-water)),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
/* Bottom */
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
linear-gradient(var(--shallow-water), var(--shallow-water)),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
linear-gradient(var(--shallow-water), var(--shallow-water)),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
/* Right */
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
linear-gradient(var(--shallow-water), var(--shallow-water)),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
/* Bubbles */
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
radial-gradient(ellipse, var(--shallow-water) 50%, var(--transparent) 51%),
linear-gradient(var(--shallow-water), var(--shallow-water)),
linear-gradient(180deg, var(--deep-water)0% 20%, var(--transparent) 60%)
;
background-position:
/* Grass patch left*/
24.4% 40.9%,
24.4% 40.9%,
24.4% 41.2%,
21.7% 42.9%,
21.7% 42.9%,
21.8% 43.2%,
23.4% 42.9%,
23.4% 42.9%,
23.5% 43.2%,
25.1% 42.9%,
25.1% 42.9%,
25.2% 43.2%,
24.4% 44.9%,
24.4% 44.9%,
24.4% 45.2%,
/* Grass patch right*/
53.9% 24.9%,
53.9% 24.9%,
53.9% 25.3%,
52.9% 27%,
52.9% 27%,
52.9% 27.4%,
54.8% 27%,
54.8% 27%,
54.8% 27.4%,
/* Posts */
46.6% 42.9%,
46.1% 50.2%,
46.6% 45.9%,
46.6% 48.9%,
47.1% 49.7%,
47% 49.9%,
49.65% 43.9%,
49.15% 50.2%,
49.65% 46.6%,
49.65% 48.9%,
50.1% 49.7%,
50.05% 49.9%,
52.75% 42.9%,
52.2% 50.2%,
52.75% 45.9%,
52.75% 48.9%,
53.25% 49.7%,
53.25% 49.9%,
55.9% 44.85%,
55.25% 50.2%,
55.8% 46.8%,
55.9% 48.85%,
56.4% 49.7%,
56.3% 49.9%,
/* Tree */
41.6% 1.5%,
39.4% 14%,
16.2% 18.75%,
25.4% -4%,
33.5% 8%,
28% 19.75%,
27.75% 20.75%,
29% 18.5%,
28% 20.5%,
40.5% 18.75%,
39% 20.5%,
33.7% 32.5%,
37.7% 32.5%,
34.6% 39.5%,
34% 35%,
/* Level 2*/
15.8% 21.4%,
59.4% 21.4%,
15.6% 52.1%,
15.9% 50.75%,
60% 50.75%,
/* 59.9% 52.1%, */
28% 29.5%,
28% 51.5%,
15.75% 56.5%,
59.2% 56.75%,
29.5% 54.8%,
29.5% 56.75%,
/* Grass patch left*/
45.3% 60.9%,
45.3% 60.9%,
45.3% 61.2%,
44.3% 62.9%,
44.3% 62.9%,
44.3% 63.1%,
46.3% 62.9%,
46.3% 62.9%,
46.3% 63.1%,
48.2% 62.9%,
48.2% 62.9%,
48.2% 63.1%,
45.3% 65%,
45.3% 65%,
45.3% 65.2%,
47.2% 65%,
47.2% 65%,
47.2% 65.2%,
/* Grass patch right*/
80.5% 56.9%,
80.5% 56.9%,
80.4% 57.2%,
79.5% 58.9%,
79.5% 58.9%,
79.4% 59.1%,
81.5% 58.9%,
81.5% 58.9%,
81.3% 59.1%,
82.5% 60.9%,
82.5% 60.9%,
82.3% 61.1%,
81.5% 62.9%,
81.5% 62.9%,
81.3% 63.1%,
/* Flowers */
83.7% 29.5%,
83.1% 30.2%,
84% 30.2%,
84.3% 31.8%,
83.25% 32.5%,
83.3% 34.4%,
83.9% 34.1%,
82.2% 28%,
81.6% 28.6%,
82.5% 28.6%,
82.8% 30.4%,
81.7% 30.8%,
81.8% 32.8%,
82.4% 32.6%,
85.2% 28%,
84.6% 28.6%,
85.5% 28.6%,
85.8% 30.4%,
84.7% 30.8%,
84.8% 32.8%,
85.4% 32.6%,
/* Level 1 */
64.4% 26.6%,
64.4% 56.9%,
60% 38%,
12.8% 27.4%,
87.25% 27.4%,
12.5% 68.5%,
87.5% 68.5%,
12.8% 67.5%,
87.25% 67.5%,
50% 44.5%,
50% 68.5%,
/* Island Base */
14.25% 71.75%,
85.75% 71.75%,
50% 71.25%,
11.5% 76.5%,
88.5% 76.5%,
18.5% 80.5%,
35% 79.5%,
50% 74.25%,
/* Shallow Water */
/* Left */
10% 80%,
10.6% 66%,
9% 60%,
11.5% 50%,
10% 45%,
11% 37%,
/* Bottom */
21% 82.5%,
40% 81%,
50% 83%,
60% 80.5%,
68% 85%,
79% 84%,
/* Right */
90% 80%,
89.4% 66%,
91% 60%,
88.5% 50%,
89.5% 45%,
89% 37%,
/* Bubbles */
/* Left */
8% 50%,
7% 48%,
8% 70%,
6.5% 72%,
6% 69%,
/* Right */
93% 50%,
95% 53%,
91% 83%,
/* Bottom */
40% 89%,
44% 87%,
63% 87%,
50% 64%,
50% 125%
;
background-size:
/* Grass patch left*/
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
/* Grass patch right*/
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
/* Posts */
3.2% 3%,
2.1% 2%,
2.3% 6%,
3.2% 3%,
3% 1.7%,
2.75% 3%,
3.2% 3%,
2.1% 2%,
2.3% 5%,
3.2% 3%,
3% 1.7%,
2.75% 3%,
3.2% 3%,
2.1% 2%,
2.3% 6%,
3.2% 3%,
3% 1.7%,
2.75% 3%,
3.2% 3%,
2.1% 2%,
2.3% 4.5%,
3.2% 3%,
3% 1.7%,
2.75% 3%,
/* Tree */
5% 10%,
19% 19%,
19% 16%,
19% 19%,
19% 19%,
12.5% 16.3%,
12.5% 16.3%,
10% 16.3%,
19% 19%,
9.5% 16%,
19% 19%,
6% 6.75%,
6% 6.75%,
12.5% 6.75%,
23% 20%,
/* Level 2*/
2.75% 6%,
3% 6%,
1.8% 4%,
2.5% 4%,
2.5% 4%,
/* 1.8% 4%, */
45.25% 32%,
45.25% 5.25%,
5% 5%,
5% 3%,
42.1% 3%,
41.8% 3%,
/* Grass patch left*/
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
/* Grass patch right*/
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
1.2% 1.5%,
1.2% 1.5%,
.6% .8%,
/* Flowers */
1.9% 1.5%,
1.5% 1.7%,
1.5% 1.7%,
3.4% 2%,
.5% 3%,
.7% .7%,
2% 2%,
2% 1.5%,
1.5% 1.7%,
1.5% 1.7%,
3.5% 2%,
.5% 3%,
.7% .7%,
2% 2%,
1.9% 1.5%,
1.5% 1.7%,
1.5% 1.7%,
3.4% 2%,
.5% 3%,
.7% .7%,
2% 2%,
/* Level 1 */
5% 3%,
5% 3%,
12.8% 32.25%,
2.75% 6%,
2.75% 6%,
1.75% 6%,
1.75% 6%,
2% 3%,
2% 3%,
75% 42%,
75% 5.5%,
/* Island Base */
2% 2%,
2% 2%,
72% 3%,
5% 5%,
5% 5%,
8% 8%,
18% 8%,
72% 7%,
/* Shallow Water */
/* Left */
8% 14%,
2% 8%,
7% 20%,
2% 8%,
4% 10%,
4% 8%,
/* Bottom */
30% 24%,
20% 2%,
15% 25%,
10% 2%,
12% 25%,
20% 15%,
/* Right */
8% 14%,
2% 8%,
7% 20%,
2% 8%,
4% 10%,
4% 8%,
/* Bubbles */
/* Left */
2% 3%,
1% 2%,
2% 4%,
1.5% 3%,
1% 2%,
/* Right */
2% 4%,
1.5% 3%,
2% 3%,
/* Bottom */
2% 2%,
3.5% 4%,
2% 2%,
77% 44%,
75% 50%
;
background-repeat: no-repeat;
}
/* Balloon */
body::after {
content: "";
display: block;
/* background-color: var(--balloon);
opacity: .5; */
height: calc(var(--unit) * 500);
width: calc(var(--unit) * 250);
position: absolute;
/* left: calc(var(--unit) * 1658);
top: calc(var(--unit) * 667); */
left: 50%;
top: 50%;
transform: translate(99%, -91%);
animation: 2s floating ease-in-out infinite alternate;
background-image:
/* Balloon */
radial-gradient(ellipse, var(--balloon-glean) 50%, var(--transparent) 51%),
radial-gradient(61% 56% at 78% 0%, var(--balloon) 50%, var(--transparent) 51%),
radial-gradient(108% 72% at 100% 81%, var(--balloon) 50%, var(--transparent) 51%),
radial-gradient(148% 125% at 0% 100%, var(--balloon) 51%, var(--transparent) 51%),
radial-gradient(94% 51% at 0% 0%, var(--balloon) 50%, var(--transparent) 51%),
radial-gradient(circle, var(--balloon-shadow) 54%, var(--transparent) 55%),
/* balloon-shadow knot */
linear-gradient(125deg, var(--transparent) 22%, var(--balloon-shadow) 23% 42%, var(--transparent) 43%),
linear-gradient(235deg, var(--transparent) 22%, var(--balloon-shadow) 23% 42%, var(--transparent) 43%),
/* linear-gradient(245deg, var(--transparent) 22%, var(--balloon-shadow) 23% 48%, var(--transparent) 49%), */
linear-gradient(var(--balloon-shadow),var(--balloon-shadow)),
linear-gradient(var(--balloon-shadow),var(--balloon-shadow)),
/* String */
radial-gradient(circle, var(--balloon-string) 50%, var(--transparent) 51%),
linear-gradient(var(--balloon-string), var(--balloon-string)),
/* Ribbon */
/* Bow */
/* Left */
radial-gradient(circle, var(--present-ribbon-side) 40%, var(--transparent) 41%),
radial-gradient(circle, var(--present-ribbon-shadow-1) 40%, var(--transparent) 41%),
/* radial-gradient(circle, var(--present-ribbon-shadow-1) 40%, var(--transparent) 41%),
radial-gradient(circle, var(--present-ribbon-shadow-1) 40%, var(--transparent) 41%), */
linear-gradient(205deg, transparent 73%, var(--present-ribbon-shadow-1) 74%),
linear-gradient(205deg, transparent 46%, var(--present-ribbon-shadow-1) 47%),
linear-gradient(205deg, transparent 38%, var(--present-ribbon-side) 39%),
linear-gradient(var(--present-ribbon-side), var(--present-ribbon-side)),
/* Right */
radial-gradient(circle, var(--present-ribbon-shadow-1) 40%, var(--transparent) 41%),
linear-gradient(155deg, transparent 73%, var(--present-ribbon-shadow-1) 74%),
linear-gradient(155deg, transparent 38%, var(--present-ribbon) 39%),
linear-gradient(155deg, transparent 38%, var(--present-ribbon-side) 39%),
radial-gradient(circle, var(--present-ribbon-side) 40%, var(--transparent) 41%),
linear-gradient(205deg, transparent 46%, var(--present-ribbon-side) 47%),
radial-gradient(225% 208% at 100% 92%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(225% 208% at 0% 92%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(225% 208% at 100% -8%, var(--transparent) 50%, var(--present-ribbon-side) 51%),
radial-gradient(225% 208% at 0% -8%, var(--transparent) 50%, var(--present-ribbon-side) 51%),
linear-gradient(var(--present-ribbon), var(--present-ribbon)),
linear-gradient(var(--present-ribbon-side), var(--present-ribbon-side)),
/* Present */
/* Top */
radial-gradient(205% 208% at 100% 92%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(205% 208% at 0% 92%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(200% 185% at 100% -8%, var(--transparent) 50%, var(--present-side) 51%),
radial-gradient(200% 185% at 0% -8%, var(--transparent) 50%, var(--present-side) 51%),
linear-gradient(var(--present-top), var(--present-top)),
radial-gradient(200% 250% at 100% -8%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(200% 250% at 0% -8%, var(--transparent) 50%, var(--island-green) 51%),
linear-gradient(var(--present-side), var(--present-side)),
/* Side */
radial-gradient(265% 208% at 100% -8%, var(--transparent) 50%, var(--present-side) 51%),
radial-gradient(265% 211% at 0% -8%, var(--transparent) 50%, var(--present-side) 51%),
linear-gradient(var(--present-shadow), var(--present-shadow)),
radial-gradient(184% 208% at 100% -8%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(204% 211% at 0% -8%, var(--transparent) 50%, var(--island-green) 51%),
linear-gradient(var(--present-side), var(--present-side)),
/* Shadow */
radial-gradient(250% 200% at 100% 92%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(250% 200% at 0% 92%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(200% 250% at 100% -8%, var(--transparent) 50%, var(--island-green) 51%),
radial-gradient(200% 250% at 0% -8%, var(--transparent) 50%, var(--island-green) 51%),
linear-gradient(var(--island-green-shadow), var(--island-green-shadow))
;
background-position:
/* Balloon */
24% 10%,
-32% 36.5%,
-54% -41%,
64% -1%,
99% 94%,
0% -9%,
/* Balloon knot */
41.2% 44.5%,
49% 44.5%,
44.7% 43%,
44.7% 44.4%,
/* String */
45% 60%,
45% 50%,
/* Ribbon */
/* Bow */
/* Left */
27.5% 57.5%,
27.5% 62.5%,
34.7% 59.25%,
42% 59.25%,
34.7% 59.25%,
28% 59.75%,
/* Right */
61.5% 62.5%,
52.7% 59.25%,
57.8% 57.55%,
52.7% 59.25%,
61.5% 57.5%,
62.5% 57.25%,
38.5% 52.2%,
51.75% 52.2%,
38.5% 68%,
51% 68%,
44% 62%,
44% 79.5%,
/* Present */
/* Top */
16.8% 53.4%,
73.2% 53.4%,
17% 66.5%,
73% 66.5%,
39% 61.5%,
17% 71.5%,
73% 71.5%,
39% 70%,
/* Side */
19.5% 74%,
70% 74%,
39% 73.5%,
19% 81.35%,
70% 81.3%,
39% 79%,
/* Shadow */
38.5% 85.5%,
94.5% 85.5%,
38.5% 98.25%,
94.5% 98.25%,
87% 98%
;
background-size:
/* Balloon */
17% 15%,
55% 8%,
61% 53%,
38% 14%,
60% 86%,
90% 55%,
/* Balloon knot */
2% 5%,
2% 5%,
6.8% 2%,
9.1% 1%,
/* String */
2% 2%,
2% 20%,
/* Ribbon */
/* Bow */
/* Left */
8% 8%,
8% 8%,
15.5% 10%,
5% 10%,
15.5% 10%,
8% 4%,
/* Right */
8% 8%,
15.5% 10%,
4.75% 10%,
15.5% 10%,
8% 8%,
4% 10%,
5% 2%,
5% 2%,
5% 2%,
5% 2%,
17% 17%,
17% 15%,
/* Present */
/* Top */
5% 2%,
5% 2%,
5% 2%,
5% 2%,
58% 14.5%,
5% 2%,
5% 2%,
58% 6%,
/* Side */
5% 2%,
5% 2%,
53% 3%,
5% 2%,
5% 2%,
53% 13%,
/* Shadow */
5% 2%,
5% 2%,
5% 2%,
5% 2%,
58% 14.5%
;
background-repeat: no-repeat;
}
@keyframes floating {
from {
transform: translate(99%, -91%);
}
to {
transform: translate(99%, -95%);
}
}// NO JAVASCRIPT HERE
// Original Artist: Justin Mezzell
// Dribble: https://dribbble.com/shots/10836514-I-Saw-It-On-Twitch-Animal-Crossing-Island
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.