Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- NO HTML HERE -->
<!-- Original Artist: Justin Mezzell  -->
<!-- Dribble: https://dribbble.com/shots/10836514-I-Saw-It-On-Twitch-Animal-Crossing-Island -->
              
            
!

CSS

              
                *,
*::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%);
  }
}
              
            
!

JS

              
                // NO JAVASCRIPT HERE
// Original Artist: Justin Mezzell 
// Dribble: https://dribbble.com/shots/10836514-I-Saw-It-On-Twitch-Animal-Crossing-Island

              
            
!
999px

Console