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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                .mural
	//- .dev-grid
		- for (var i = 1; i <= 3; i++)
			div(class='dev-grid__0' + i)
	.mural__bg
	.wall.wall--left.p-sketch
		.wall__fold
	.wall.wall--right.p-sketch
		.wall__fold
	.wall.wall--center.p-sketch
	.hands
		- for (var i = 1; i <= 3; i++)
			div(class='hand hand--0' + i)
				- for (var j = 1; j <= 4; j++)
					div(class='p-border hand__finger hand__finger--0' + j)
						.hand__mark
							each i in new Array(2)
								.hand__mark__line
				.hand__finger.hand__finger--thumb.p-border
	.strings
		.string.string--mug.p-col-center
			.string__thread.p-border-sm
			.string--mug__mass.p-border
		.string.string--phone.p-col-center
			.string__thread.p-border-sm
			.string--phone__mass.p-blank.p-radius-10.p-col-center
				.string--phone__text
				.string--phone__text.string--phone__text--bottom
		.string.string--mic.p-col-center
			.string__thread.p-border-sm
			.string--mic__mass.p-border
			.string--mic__sound.p-border.p-circle
		.string.string--pancakes.p-col-center
			.string__thread.p-border-sm
			.string--pancakes__butter.p-border
			.string--pancakes__stack
				.string--pancakes__syrup.p-xy-center
					- for (var i = 1; i <= 5; i++)
						div(class='string--pancakes__syrup__streak p-border-sm string--pancakes__syrup__streak--0' + i)
				each i in new Array(5)
					.string--pancakes__mass.p-border
			.string--pancakes__plate.p-border
		.string.string--laptop.p-col-center
			.string__thread.p-border-sm
			.string--laptop__mass.p-border.p-xy-center.p-radius-10
			.string--laptop__bottom.p-border.p-radius-10
		.string.string--speechbubble.p-col-center
			.string__thread.p-border-sm
			.string--speechbubble__mass.p-blank.p-circle.p-col-center
				.string--speechbubble__text
				.string--speechbubble__text.string--speechbubble__text--bottom
		.string.string--bottle.p-col-center
			.string__thread.p-border-sm
			.string--bottle__cap.p-border
			.string--bottle__neck
			.string--bottle__mass.p-border
	.comet
		.comet__nucleus.p-sketch
		.comet__tail.comet__tail--bottom
		.comet__tail
	.rainbow.p-border.p-circle
	.mountains
		.mountain.mountain--sm.p-border
			.mountain__ice.p-blank
		.mountain.mountain--lg.p-border
			.mountain__ice.p-blank
	.astronaut.p-col-center
		.astronaut__helmet.p-border.p-xy-center
			.astronaut__helmet__visor.p-blank
			.astronaut__helmet__ear.astronaut__helmet__ear--left.p-border
			.astronaut__helmet__ear.astronaut__helmet__ear--right.p-border
		.astronaut__neck.astronaut__neck--top.p-border
		.astronaut__neck.astronaut__neck--bottom.p-border
		.astronaut__body.p-border.p-circle
		.plants
			- for (var i = 1; i <= 9; i++)
				if (i == 3 || i == 5 || i == 7)
					div(class='plant plant--0' + i)
						.plant__stem.plant__stem--top.p-border.p-circle
							- for (var j = 1; j <= 2; j++)
								div(class='plant__leaf p-border p-backface plant__leaf--0' + j)
						.plant__stem.plant__stem--bottom.p-border.p-circle
							- for (var j = 3; j <= 4; j++)
								div(class='plant__leaf p-border p-backface plant__leaf--0' + j)
				else
					div(class='plant plant--flip plant--0' + i)
						.plant__stem.plant__stem--top.p-border.p-circle
							- for (var j = 1; j <= 2; j++)
								div(class='plant__leaf p-border p-backface plant__leaf--0' + j)
						.plant__stem.plant__stem--bottom.p-border.p-circle
							if (i == 1 || i == 2 || i == 8)
								.plant__leaf.p-border.p-backface.plant__leaf--03
							else
								- for (var j = 3; j <= 4; j++)
									div(class='plant__leaf p-border p-backface plant__leaf--0' + j)
	.planet.p-border.p-circle
		.planet__x.planet__x--left.p-blank
		.planet__x.planet__x--right.p-blank
	.shrooms
		.shroom.shroom--lactarius.p-col-center
			.shroom__cap.shroom--lactarius__cap.p-border
			.shroom__stem.shroom--lactarius__stem.p-blank
		.shroom.shroom--flammulina.p-col-center
			.shroom__cap.shroom--flammulina__cap.p-border
			.shroom__stem.shroom--flammulina__stem.p-blank
		.shroom.shroom--amanita.p-col-center
			.shroom__cap.shroom--amanita__cap.p-border
			.shroom__stem.shroom--amanita__stem.p-blank
		.shroom.shroom--psilocybin.p-col-center
			.shroom__cap.shroom--psilocybin__cap.p-border
			.shroom__stem.shroom--psilocybin__stem.p-blank
			
              
            
!

CSS

              
                /* Multi-screen Mural illustration for JSConf EU
 * Aspect ratio - 48:9
 * Splitted into three parts of 16:9
 * by ilithya | 2019 */

$mural_w: 1920px; // Resize entire mural by editing only this variable, and check FYI below.
$mural_h: ($mural_w / (48 / 9));

$size: round($mural_w / 24); // Resizes all illustration components.

$border: round($size / 38);
$border_sm: round($border / 2);

$wall_h: round($mural_h / 1.5);

$hand_w: $size;
$hand_finger: ($hand_w / 4);
$hand_h: round($hand_w - ($hand_finger / 1.65));
$string_w: $size;

$helmet_w: round($size * 1.75);
$astronaut_w: round($helmet_w * 4.2);
$rainbow: round($size * 4);
$mountains_w: round($size * 5.2);
$planet: round($size * 4.5);
$shrooms_w: round($size * 2.6);

$c_ink: #292929; // Blackish	
$c_01: #efefe2; // Gray 
$c_02: #6f6ef1; // Purple
$c_03: #fff; // White
$c_04: #70bdff; // Blue
$c_05: #92cecc; // Blue-Green 
$c_06: #69e790; // Green
$c_07: #fc6e81; // Pink 
$c_08: #ff5ba5; // Dark Pink
$c_09: #f87d47; // Orange
$c_10: #eeef6e; // Yellow 	
$c_11: #fed352; // Dark Yellow
$c_12: #64a2a0; // Dark Green
$c_13: #70e7db; // Aqua 

$z_index: (
	wall: 120,
	hand: 140,
	finger: 30,
	fingerskin: 40,
	thumb: -10,
	stars: 0,
	string: 100,
	mug_handle: -10,
	laptop_bottom: -10,	
	comet: 10,
	comet_hide: -90,
	nucleus: 20,
	rainbow: 30,
	mountains: 30,
	helmet: 80,
	neck_top: 70,
	neck_bottom: 60,
	body: 50,
	plants: 30,
	leaf: 40,
	planet: 30,
	shrooms: 30,
);

$color: (
	bg_top: $c_12,
	bg_bottom: $c_02,
	finger_01: $c_04,
	finger_02: $c_06,
	finger_03: $c_09,
	mug: $c_06,
	mic: $c_13,
	butter: $c_11,
	syrup: $c_09,
	pancakes: $c_11,
	laptop: $c_13,
	speechbubble: $c_03,
	bottle: $c_06,
	comet: $c_10,
	comet_tail: $c_07,
	comet_tailbottom: $c_02,
	rainbow: $c_07,
	mountain: $c_11,
	mountain_lg: $c_09,
	helmet: $c_05,
	ear: $c_10,
	helmet_necktop: $c_10,
	helmet_neckbottom: $c_11,
	body: $c_05,
	flower: $c_ink,
	leaf: $c_08,
	leaf_even: $c_08,
	planet: $c_07,
	lactarius_cap: $c_08,
	flammulina_cap: $c_10,
	amanita_cap: $c_06,
	psilocybin_cap: $c_09,
);

@function z_index($name) {
  @if map-has-key($z_index, $name) {
    @return map-get($z_index, $name);  
  }
};

@function color($name) {
  @if map-has-key($color, $name) {
    @return map-get($color, $name);  
  }
};

@mixin size($w, $h: $w) {
  width: $w;
  height: $h;
}

body {
	background-color: hotpink;
	margin: 0;
}

div,
div::before,
div::after {
	box-sizing: border-box;
}

// PATTERNS (UTILITY)
.p-sketch {
	background-color: $c_01;
	border: $border solid $c_ink;
}

.p-blank {
	background-color: $c_03;
	border: $border solid $c_ink;	
}

.p-border {
	border: $border solid $c_ink;
}

.p-border-sm {
	border: $border_sm solid $c_ink;
}

.p-circle {
	border-radius: 50%;
}

.p-radius-10 {
	border-radius: 10%;
}

.p-col-center {
	display: flex;
	align-items: center;
	flex-direction: column;
}

.p-xy-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.p-backface {
	backface-visibility: hidden;
}

// ILLUSTRATION
.mural {
	@include size($mural_w, $mural_h);
	position: relative; // To place wall
	overflow: hidden;
		
	&__bg {
		$stars: $border_sm;

		background-color: color(bg_bottom);
		background-image: 
		// Switch to a gradient colored background by editing the currentcolor: 
			// linear-gradient(180deg, transparent 0%, currentcolor 100%), 
			radial-gradient($c_ink $stars, transparent 0),
			radial-gradient($c_ink $stars, transparent 0);
		position: absolute;
		top: 0;
		left: 0;
		z-index: z_index(stars);
		
		// Background to animate
		&::before {
			content: '';
			display: block;
			background-color: color(bg_top);
			background-image: 
			// Switch to a gradient colored background by editing the currentcolor: 
				// linear-gradient(180deg, transparent 0%, currentcolor 100%), 
				radial-gradient($c_ink $stars, transparent 0),
				radial-gradient($c_ink $stars, transparent 0);
			opacity: 0;
			will-change: opacity;
			animation: spacecolor 120s ease-in-out infinite alternate;
			
			@at-root {
				@keyframes spacecolor {
					50% {
						opacity: 0;
					}
					100% {
						opacity: 1;
					}
				}
			}
		}
	}	
			
	&__bg,
	&__bg::before {
		$stars_gap: round($size / 1.9);

		@include size(100%);
		background-position:
			round($stars_gap / -12) round($stars_gap / 3),
			round($stars_gap / 2.4) round($stars_gap * 0.75); 
    	background-size:
		// Switch to a gradient colored background: 
			// 100%, 
			// $stars_gap $stars_gap, 
			$stars_gap $stars_gap;
	}
}

.wall {
	@include size(60%, $wall_h);
	overflow: hidden; // To avoid folds out of place
	position: absolute;
	top: 0;
	z-index: z_index(wall);
	
	&__fold {
		&::before,
		&::after {
			@include size(100%);
			border-bottom: $border_sm solid $c_ink;
			content: '';
			position: absolute;
		}
		
		&::before {
			bottom: 6.6%;
		}
		
		&::after {
			bottom: 10.6%;
		}
	}
	
	$wall_deg: 10deg;
	$wall_y: round($wall_h * -0.73);
	$fold_lg_gap: 6%;
	$fold_lg_deg: 3deg;
	$fold_sm_gap: 12%;
	$fold_sm_deg: 6deg;

	&--left {
		left: ($border * -1);
		transform: rotateZ(($wall_deg * -1)) translateY($wall_y);

		.wall__fold {
			&::before {
				left: $fold_lg_gap;
				transform: rotateZ($fold_lg_deg);
			}

			&::after {
				left: $fold_sm_gap;
				transform: rotateZ($fold_sm_deg);
			}
		}
	}

	&--right {
		right: ($border * -1);
		transform: rotateZ($wall_deg) translateY($wall_y);

		.wall__fold {
			&::before {
				right: $fold_lg_gap;
				transform: rotateZ(($fold_lg_deg * -1));
			}

			&::after {
				right: $fold_sm_gap;
				transform: rotateZ(($fold_sm_deg * -1));
			}
		}
	}

	&--center {
		$wall_center_w: (($size * 3) - $hand_finger - $border);

		@include size($wall_center_w, $size);
		margin-left: ($wall_center_w / -2);
		top: round($size / -1.15);
		left: 50%;
	}
}

.hands {
	$hands_w: round($hand_w * 3);

	@include size($hands_w, $hand_h);
	display: flex;
	justify-content: space-between;
	margin-left: ($hands_w / -2);
	position: absolute;
	top: ($hand_w / -3.5);
	left: 50%;
	z-index: z_index(hand);
}
.hand {
	@include size(round($hand_w - ($border * 2.7)), $hand_h);
	position: relative; // To place thumb

	$hand_radius: round($hand_w / 8.666);
	
	&--01 {
		.hand__finger,
		.hand__finger::after {
			background-color: color(finger_01);
		}
	}
	
	&--02 {
		.hand__finger,
		.hand__finger::after {
			background-color: color(finger_02);
		}
	}
	
	&--03 {
		.hand__finger,
		.hand__finger::after {
			background-color: color(finger_03);
		}
	}

	&__finger {
		width: $hand_finger;
		border-radius: $hand_radius;
		float: left;
		position: relative; // To place finger's skin
		
		&--02,
		&--03,
		&--04 {
			margin-left: ($border * -1);
		}

		$height: 3.25;

		@for $i from 1 through 4 {		
			$height: ($height - 0.25);

			&--0#{$i} {	
				height: round($hand_finger * $height);
			}
		}
		
		$fingerskin_w: ($hand_finger / 2.5);

		// Finger's Skin
		&--01,
		&--02,
		&--03 {
			&::after {
				@include size($fingerskin_w, $hand_finger);
				content: '';
				position: absolute;
				top: ($border * 3);
				right: (($fingerskin_w + $border) / -2);
				z-index: z_index(fingerskin);
			}
		}

		&--thumb {
			height: round($hand_finger * 2.2);
			position: absolute;
			left: round($hand_finger / 1.65);
			top: round($hand_finger * 1.7);
			transform: rotateZ(90deg);
			z-index: z_index(thumb);

			// Thumbnail
			&::before {
				@include size(round($fingerskin_w * 1.35), round($hand_finger / 1.3));
				@extend .p-border-sm;
				background-color: $c_10;
				border-radius: $hand_radius $hand_radius 0 0;
				content: '';
				position: absolute;
				right: ($border_sm * -1);
				top: 0;
			}
		}
	}
	
	&__mark {
		@include size(70%, round($hand_finger / 1.8));
		position: absolute;
		bottom: 0;
		left: 15%;

		&__line {
			border-bottom: $border_sm solid $c_ink;
			border-radius: $hand_radius;
			margin: $border 0 $border_sm;

			&:last-child {
				width: 80%;
				margin-left: 10%;
			}
		}
	}
}

.strings {	
	@include size(100%, round($wall_h * 1.17));
	position: absolute;
	top: 0;
	left: 0;
}	
.string {
	@include size($string_w, 100%);	
	position: absolute;
	top: 0;
	z-index: z_index(string);
			
	&__thread {
		@include size(0, 90%);
	}
	
	&--mug {
		top: -16%;
		left: round($mural_w / 12.2);
			
		&__mass {
			$mug: round($string_w / 4);

			@include size($mug, round($mug * 1.1));
			background-color: color(mug);
			border-bottom-left-radius: 20%;
			border-bottom-right-radius: 20%;
			border-bottom-width: ($border * 2);
			position: relative; // To place handle

			// Mug's Handle
			&::after {
				$mug_handle: round($mug / 1.8);

				@include size($mug_handle);
				@extend .p-border;
				@extend .p-circle;
				content: '';
				position: absolute;
				top: round($mug_handle / 7.5);
				right: round($mug_handle / -1.5);
				z-index: z_index(mug_handle);
			}
		}
	}
	
	&--phone {
		left: round($mural_w / 6.3);
		
		$phone: round($string_w / 4.5);
		
		&__mass {
			@include size($phone, round($phone * 1.5));
			border-top-width: ($border * 2);
			border-bottom-width: ($border * 2);
			justify-content: center;
		}
		
		&__text {
			$text_w: round($phone / 2);
			
			@include size($text_w, 0);
			border-bottom: $border_sm solid $c_ink;
			border-radius: $text_w;
			margin-bottom: $border;
			
			&--bottom {
				width: round($phone / 3);
			}
		}
	}
	
	&--mic {
		top: -20%;
		left: round($mural_w / 3.725);
		
		$mic: round($string_w / 10);
		
		&__mass {			
			@include size($mic, round($mic * 3.4));
			background-color: color(mic);
			border-top-width: ($border * 2);
		}
		
		&__sound {
			@include size(round($mic * 1.7));
			background-color: $c_ink;
			margin-top: ($border * -1);
		}
	}
	
	&--pancakes {
		top: -45%;
		left: round($mural_w / 2.74);

		$pancake_w: round($string_w / 3);

		&__butter {
			$butter: round($pancake_w / 3);

			@include size($butter, round($butter / 1.8));
			background-color: color(butter);
		}
		
		&__stack {
			position: relative; // To place syrup
		}
		
		&__syrup {
			width: 100%;
			align-items: flex-start;
			margin-top: ($border * -1);
			position: absolute;
			top: 0;
			left: 0;
			
			&__streak {				
				width: round($pancake_w / 7);
				background-color: color(syrup);
				border-bottom-left-radius: $pancake_w;
				border-bottom-right-radius: $pancake_w;
				margin-left: ($border_sm * -1);
				
				$streak_h: round($pancake_w / 2.7);
				
				&--01,
				&--04 {
					height: $streak_h;
				}
				
				&--02 {
					height: round($streak_h * 1.3);
				}
				
				&--03 {
					height: round($streak_h * 1.5);
				}
				
				&--05 {
					height: round($streak_h / 1.2);
				}
			}
		}
		
		&__mass {
			@include size($pancake_w, round($pancake_w / 4.5));
			background-color: color(pancakes);
			border-radius: $pancake_w;
			margin: ($border * -1) auto 0;
			
			&:nth-child(odd) {
				width: round($pancake_w * 1.08);
			}
		}
		
		&__plate {
			@include size($pancake_w, 0);
			margin-top: ($border * -1);
		}
	}
	
	&--laptop {
		top: -23.5%;
		left: round($mural_w / 1.71);
	
		$laptop_w: round($string_w / 2);
		$laptop_h: round($laptop_w / 1.3);
		
		&__mass,
		&__bottom {
			background-color: color(laptop);
		}
		
		&__mass {
			@include size($laptop_w, $laptop_h);
			border-bottom-width: ($border * 2);
			
			// Logo
			&::before {
				content: '\2665';
				display: block;
				font-size: round($laptop_w / 4);
			}
		}
		
		&__bottom {
			@include size($laptop_w, round($laptop_h / 1.5));
			transform: skewX(-30deg) translate(($laptop_w / -6), ($laptop_h * -0.65));
			position: relative;
			z-index: z_index(laptop_bottom);
		}
	}
	
	&--speechbubble {
		top: -15%;
		left: round($mural_w / 1.438);
	
		$speechbubble_w: round($string_w / 2.5);
		$speechbubble_h: round($speechbubble_w / 1.4);
		
		&__mass {
			@include size($speechbubble_w, $speechbubble_h);
			justify-content: center;
			position: relative;
			
			$triangle: round($speechbubble_w / 6);
			$triangle_border: ($triangle + $border);
			
			&::after,
			&::before {
				@include size(0);
				border: solid transparent;
				content: '';
				position: absolute;
				top: (($speechbubble_h - $triangle));
				left: 50%;
			}

			// Triangle
			&::after {
				border-top-color: color(speechbubble);
				border-width: $triangle;
				margin-left: ($triangle * -1);
			}
			
			// Triangle Border
			&::before {
				border-top-color: $c_ink;
				border-width: ($triangle_border);
				margin-top: $border_sm;
				margin-left: ($triangle_border * -1);
			}			
		}
					
		&__text {
			@include size(round($speechbubble_w / 2.4), 0);
			border-bottom: $border solid $c_ink;
			border-radius: $speechbubble_w;
			margin-top: $border_sm;
			margin-bottom: $border_sm;
			
			&--bottom {
				width: round($speechbubble_w / 3.8);
			}
		}
	}
	
	&--bottle {
		top: -35%;
		left: round($mural_w / 1.245);
	
		$bottle_w: round($string_w / 5);
		$bottle_h: round($bottle_w * 2);
		
		&__cap {
			@include size(round($bottle_w / 2.5), 0);
			border-radius: 20%;
		}
		
		&__neck {
			$neck: ($bottle_w / 1.3);
			$neck_gap: ($neck / 4);
			
			@include size($neck, 0);
			border-left: $neck_gap solid transparent;
			border-right: $neck_gap solid transparent;
			border-bottom: $neck solid $c_ink;
			margin-top: ($border_sm * -1);
			position: relative; // To place neck's overlap
			
			// Neck Overlap
			&::before {
				@include size(($neck - ($border * 2)), 0);
				content: '';
				border-left: $neck_gap solid transparent;
				border-right: $neck_gap solid transparent;
				border-bottom: $neck solid color(bottle);
				position: absolute;
				top: $border_sm;
				left: (($neck_gap * -1) + $border);
			}
		}
		
		&__mass {
			@include size($bottle_w, $bottle_h);
			background-color: color(bottle);
			border-top-left-radius: 35%;
			border-top-right-radius: 35%;
			border-bottom-width: ($border * 2);
			margin-top: (($border + $border_sm) * -1);
		}
	}
	
	$duration: 2s;//6s;
	$timing_fn: ease-in-out;
	$iteration_ct: infinite;
	$direction: alternate;
	
	&--mug,
	&--mic,
	&--laptop,
	&--bottle {
		animation: float_left $duration $timing_fn $iteration_ct $direction;
	}
	
	&--phone,
	&--pancakes,
	&--speechbubble {
		animation: float_right $duration $timing_fn $iteration_ct $direction;
	}
	
	@at-root {
		@keyframes float_left {
			50% {
				transform: translate(4%, -3%);
			}
		}

		@keyframes float_right {
			50% {
				transform: translate(-4%, 3%);
			}
		}
	}
}

.comet {
	$comet: round($size / 5.5);

	@include size($comet);
	position: absolute;
	top: round($mural_h - $comet);
	left: 0;
	z-index: z_index(comet);
	
	&__nucleus {
		@include size($comet);
		background-color: color(comet);
		border-color: color(comet_tail);
		border-radius: 50% 50% 50% 0;
		position: relative;
		z-index: z_index(nucleus);
	}

	&__tail {
		$tail_w: round($comet * 0.375);

		@include size(0);
		border-color: transparent color(comet_tail) transparent transparent;
		border-style: solid;
		border-width: $tail_w round($comet * 2.2) $tail_w 0;
		margin-left: ($comet * -2);
		position: absolute;
		top: $comet;
		left: 50%;
		transform: rotateZ(-45deg);

		$delay_tail: -1s;
		$delay_tailbottom: -1.3s;
		
		animation: float_tail 0.1s $delay_tail ease-in-out infinite alternate;
		
		@at-root {
			@keyframes float_tail {
				100% {
					transform: scale(1.07) rotateZ(-45deg);
				}	
			}
		}

		&--bottom {
			$tail_bottom: round($comet * 0.4);

			border-right-color: darken(color(comet_tailbottom), 6%);
			border-width: $tail_bottom round($comet * 5) $tail_bottom 0;
			margin-left: round($comet * -4.42);
			top: round($comet * 2);
			
			animation-delay: $delay_tailbottom;
		}
	}
	
	transform: rotateZ(20deg);
	animation: fly 80s ease-in-out infinite;
	// animation: fly 180s ease-in-out infinite;

	@at-root {
		@keyframes fly {
			3% {
				transform: translate(round($mural_w / 4), round($mural_h / -1.9)) rotateZ(20deg);
			}
			7% {
				transform: translate(round($mural_w / 2), round($mural_h / -1.3)) rotateZ(45deg);
			}
			11% {
				transform: translate(round($mural_w / 1.3), round($mural_h / -2.3)) rotateZ(75deg);
			}
			15% {
				transform: translate(round($mural_w * 1.03), 0) rotateZ(85deg);
				z-index: z_index(comet);
			}
			15.1%, 100% {
				z-index: z_index(comet_hide);
			}
		}
	}
}

.rainbow {	
	$rainbow_gap: ($rainbow / -2);
	
	@include size($rainbow);
	position: absolute;
	bottom: round($rainbow_gap / 1.08);
	left: $rainbow_gap;
	z-index: z_index(rainbow);
	transform: rotateZ(80deg);
	
	$rainbow_space: round((($rainbow / 2) / 6) - $border);
	$rainbow_border: ($rainbow_space + $border);
	$rainbow_colors: (
		$c_09, 
		$c_10, 
		$c_06, 
		$c_04,
		$c_03, 
	);
	$shadow_list: ();

	@for $i from 1 through 5 {			
		$shadow: 
			inset 0 ($rainbow_border * $i) 0 $c_ink,
			inset 0 (($rainbow_border * $i) + $rainbow_space) 0 nth($rainbow_colors, $i);
		$shadow_list: append($shadow_list, $shadow, comma);
	}
	
	box-shadow: 
		inset 0 $rainbow_space 0 color(rainbow), 
		$shadow_list,
		inset 0 ($rainbow_border * 6) 0 $c_ink;
}

.mountains {
	$mountains_h: round($mountains_w / 1.48);

	@include size($mountains_w, $mountains_h);
	position: absolute;
	bottom: round($mountains_h / -2);
	left: round($rainbow / 1.6);
	z-index: z_index(mountains);
}
.mountain {
	$mountain: round($mountains_w / 3.6);
	
	background-color: color(mountain);
	overflow: hidden; // To avoid ice out of place
	position: absolute;
	transform: rotateZ(45deg);
	
	&--sm {
		@include size($mountain);
		top: round($mountain / 1.2);
		left: round($mountain / 4.5);
	}
	
	&--lg {
		$mountain_gap: round($mountain / 2.7);
		
		@include size(round($mountain * 1.7));
		background-color: color(mountain_lg);
		top: $mountain_gap;
		right: $mountain_gap;
	}
	
	&__ice {
		@include size(100%);
		margin-top: -80%;
		margin-left: -40%;
		position: relative; // To place lines
		transform: rotateZ(-20deg);
		
		// Lines
		&::before,
		&::after {
			@include size(100%);
			border-bottom: $border_sm solid $c_ink;
			content: '';
			position: absolute;
		}
		
		&::before {
			top: 8%;
			left: -15%;
		}
		
		&::after {
			top: 14%;
			left: -30%;
		}
	}
}

.astronaut {
	@include size($astronaut_w, round($helmet_w * 1.142));
	margin-left: ($astronaut_w / -2);
	position: absolute;
	left: 50%;
	bottom: 0;
	
	$helmet_h: round($helmet_w / 1.1);
	
	&__helmet {
		@include size($helmet_w, $helmet_h);
		background-color: color(helmet);
		border-radius: round($helmet_w / 2);
		position: relative; // To place ears
		z-index: z_index(helmet);	
		
		&__visor {
			$visor_h: round($helmet_w * 0.6);

			@include size($helmet_h, $visor_h);
			border-radius: round($helmet_h / 2);
						
			// Glow
			&::before {
				$glow: round($helmet_w * 0.017);

				@include size($glow);
				@extend .p-circle;
				content: '';
				display: block;
				box-shadow: 
					round($helmet_h / 1.22) round($visor_h / 2.5) 0 round($glow * 0.4) $c_ink,
					round($helmet_h / 1.31) round($visor_h / 3.5) 0 round($glow * 1.3) $c_ink,
					round($helmet_h / 1.44) round($visor_h / 4.8) 0 $c_ink;
			}
		}	
		
		&__ear {
			$ear_w: round($helmet_w * 0.055);
			$ear_gap: ($ear_w * -1);
			
			@include size($ear_w, round($ear_w * 2.5));
			background-color: color(ear);
			border-radius: $ear_w;
			position: absolute;
			
			&--left {
				left: $ear_gap;
			}
			
			&--right {
				right: $ear_gap;
			}
		}
	}
	
	&__neck {
		border-radius: 100% / 0 0 100% 100%;
		
		&--top {
			$neck_h: round($helmet_h * 0.313);
			
			@include size(round($helmet_w / 1.3), $neck_h);	
			background-color: color(helmet_necktop);
			margin-top: round($neck_h / -1.8);
			z-index: z_index(neck_top);	
		}
		
		&--bottom {		
			$neck_h: round($helmet_h * 0.207);
			
			@include size(round($helmet_w / 1.4), $neck_h);	
			background-color: color(helmet_neckbottom);
			margin-top: round($neck_h / -2);
			z-index: z_index(neck_bottom);	
		}
	}
	
	&__body {
		$body_w: round($helmet_w * 1.4);
		$body_h: round($helmet_h * 0.5);

		@include size(round($helmet_w * 1.4), $body_h);	
		background-color: color(body);
		margin-left: ($body_w / -2);
		position: absolute;
		left: 50%;
		bottom: round($body_h / -1.5);
		z-index: z_index(body);
	}
}
.plants {
	@include size(100%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: z_index(plants);	
}
.plant {
	$plant_w: round($size * 0.24);
	$plant_h: round($plant_w * 5.4);
	$stem: round($plant_h / 1.675);
	$leaf: round($plant_w / 1.3);
	
	$duration: 2s;//6s;
	$timing_fn: ease-in-out;
	$iteration_ct: infinite;
	$direction: alternate;

	@include size($plant_w, $plant_h);
	position: absolute;
	
	&--01,
	&--02,
	&--04,
	&--06,
	&--08,
	&--09 {
		animation: float_flip $duration $timing_fn $iteration_ct $direction;
	}
	
	&--03,
	&--05,
	&--07 {
		animation: float $duration $timing_fn $iteration_ct $direction;
	}

	@at-root {
		@keyframes float {
			50% {
				transform: rotateZ(-6deg);
			}
		}
		
		@keyframes float_flip {
			50% {
				transform: rotateZ(6deg) scaleX(-1);
			}
		}
	}
	
	&__stem {
		@include size($stem);
		border-color: transparent;
		position: absolute;

		&--top {
			border-right-color: $c_ink;
			top: 1%;
			right: 6%; // FYI - Change this value if after resizing the component, the stem is no longer aligned.
			
			// Flower
			&::before {
				@include size(round($border * 2.5));
				@extend .p-circle;
				background-color: color(flower);
				content: '';
				position: absolute;
				top: round($plant_h / 20);
				right: round($plant_w / 4);
			}
		}
		
		&--bottom {
			border-left-color: $c_ink;
			bottom: 0;
			left: 0;
		}
	}
			
	&__leaf {		
		@include size($leaf);
		background-color: color(leaf);
		border-width: $border_sm;
		border-top-left-radius: $leaf;
		border-bottom-right-radius: $leaf;
		position: absolute;
		z-index: z_index(leaf);
		
		// Top
		&--01 {
			bottom: round($stem / 1.7);
			right: round($stem / -5.6);
			transform: rotateZ(-30deg);
		}
		
		&--02 {
			bottom: round($stem / 4);
			left: round($stem / 1.45);
			transform: rotateZ(20deg);
		}
		
		// Bottom
		&--03 {
			bottom: round($stem / 2);
			right: round($stem / 1.55);
			transform: rotateZ(100deg);
		}
		
		&--04 {
			top: round($stem / 3);
			left: round($stem / -4);
			transform: rotateZ(10deg);
		}
	}
	
	&--flip {
		transform: scaleX(-1);
	}
	
	@for $i from 1 through 9 {  
		@if $i % 2 == 0 {
			&--0#{$i} {
				.plant__leaf {
					background-color: color(leaf_even);
				}
			}
		}
	}
	
	// Left Part
	&--01 {
		bottom: round($stem / -2.1);
		left: 0;
	}
	
	&--02 {
		bottom: round($stem / -1.25);
		left: round($astronaut_w / 9);
	}
	
	&--03 {
		bottom: round($stem / -2.5);
		left: round($astronaut_w / 5);
	}
	
	&--04 {
		bottom: round($stem / -6.3);
		left: round(($astronaut_w / 2) - ($helmet_w / 1.2));
	}
	
	// Top Part
	&--05 {
		top: round($plant_h * -0.7);
		left: round(($astronaut_w / 2) - ($helmet_w / 2.5));
	}

	&--06 {
		top: round($plant_h * -0.5);
		right: round(($astronaut_w / 2) - ($helmet_w / 1.87));
	}
	
	// Right Part
	&--07 {
		bottom: round($stem / -2.7);
		right: round(($astronaut_w / 2) - ($helmet_w / 1.05));
	}
	
	&--08 {
		bottom: round($stem / -1.25);
		right: round(($astronaut_w / 6));
	}
	
	&--09 {
		bottom: round($stem / -6);
		right: round($leaf * 2);
	}
}

.planet {	
	@include size($planet);
	background-color: color(planet);
	position: absolute;
	right: round($shrooms_w * 1.3);
	bottom: round($planet / -1.45);
	z-index: z_index(planet);
	
	&__x {
		@include size(round($planet / 20), round($planet / 5));
		border-radius: round($planet / 16);
		position: absolute;
		top: 5%;
		left: 35%;
		
		&--left {
			transform: rotateZ(45deg) translate(-25%, 6%);
		}
		
		&--right {
			transform: rotateZ(-45deg);
		}
	}
}

.shrooms {
	@include size(round($shrooms_w * 1.1), round($shrooms_w * 0.75));
	position: absolute;
	right: 0.5%;
	bottom: 0;
	z-index: z_index(shrooms);
}
.shroom {
	position: absolute;
	bottom: 0;
	
	&__cap {
		border-bottom-width: ($border * 2);
	}
	
	&__stem {
		border-bottom: 0;
		margin-top: ($border * -1);
	}

	&--lactarius {
		$lactarius_w: round($shrooms_w * 0.49); 

		width: $lactarius_w;
		right: round($shrooms_w / 8);

		&__cap {
			$cap_h: round($lactarius_w * 0.28);
			$cap_radius: round($cap_h / 1.2);

			@include size(100%, $cap_h); 
			background-color: color(lactarius_cap);
			border-top-left-radius: $cap_radius;
			border-top-right-radius: $cap_radius;

			// Ovals
			&::before {
				$oval_sm: round($lactarius_w / 11);
				$oval_lg: round($oval_sm / 7);

				@include size($oval_sm, round($oval_sm / 2));
				@extend .p-circle;
				content: '';
				display: block;
				box-shadow: 
					round($lactarius_w / 14) round($cap_h / 2.5) 0 $oval_lg $c_ink, 
					round($lactarius_w / 2.8) round($cap_h / 7) 0 $oval_lg $c_ink, 
					round($lactarius_w / 1.56) round($cap_h / 2.2) 0 $oval_lg $c_ink, 
					round($lactarius_w / 1.3) round($cap_h / 4) 0 $oval_lg $c_ink, 
					round($lactarius_w / 1.75) round($cap_h / 9) 0 $c_ink,
					round($lactarius_w / 2.13) round($cap_h / 2.5) 0 $c_ink,
					round($lactarius_w / 5.3) round($cap_h / 6) 0 $c_ink,
					round($lactarius_w / 3.7) round($cap_h / 2.15) 0 $c_ink;
			}	
		}

		&__stem {
			$stem_w: round($lactarius_w / 5.5);
			$stem_h: round($stem_w * 7);

			@include size($stem_w, $stem_h);
		}
	}

	&--flammulina {
		$flammulina_w: round($shrooms_w * 0.223);

		width: $flammulina_w;
		left: 0;
	
		&__cap {		
			@include size($flammulina_w, round($flammulina_w / 1.15)); 
			background-color: color(flammulina_cap);
			border-top-left-radius: $flammulina_w;
			border-top-right-radius: $flammulina_w;
		}

		&__stem {
			$stem_w: round($flammulina_w / 3.7);
			$stem_h: round($stem_w * 7.5);

			@include size($stem_w, $stem_h);
		}
	}

	&--amanita {
		$amanita_w: round($shrooms_w * 0.396); 

		width: $amanita_w;
		left: round($shrooms_w / 5);

		&__cap {
			$cap_h: round($amanita_w * 0.6);

			@include size(100%, $cap_h); 
			background-color: color(amanita_cap);
			border-top-left-radius: $cap_h;
			border-top-right-radius: $cap_h;

			// Dots
			&::before {
				$dot_lg: round($amanita_w / 6.5);
				$dot_sm: round(($dot_lg / 4.5) * -1);
				$dot_color: $c_ink;

				@include size($dot_lg);
				@extend .p-circle;
				content: '';
				display: block;
				box-shadow: 
					round($amanita_w / 7) round($cap_h / 4.2) 0 $dot_sm $dot_color, 
					round($amanita_w / 4.2) round($cap_h / 1.8) 0 $dot_sm $dot_color, 
					round($amanita_w / 2.6) round($cap_h / 2.4) 0 $dot_sm $dot_color, 
					round($amanita_w / 1.43) round($cap_h / 4.5) 0 $dot_sm $dot_color, 
					round($amanita_w / 1.9) round($cap_h / 14) 0 $dot_sm $dot_color, 
					round($amanita_w / 1.31) round($cap_h / 1.75) 0 $dot_sm $dot_color, 
					round($amanita_w / 3.1) round($cap_h / 8.5) 0 $dot_color,
					round($amanita_w / 18) round($cap_h / 1.9) 0 $dot_color,
					round($amanita_w / 1.73) round($cap_h / 2.2) 0 $dot_color;
			}	
		}

		&__stem {
			$stem_w: round($amanita_w / 3.3);
			$stem_h: round($stem_w * 1.6);

			@include size($stem_w, $stem_h);
		}
	}

	&--psilocybin {
		$psilocybin_w: round($shrooms_w * 0.236);

		width: $psilocybin_w;
		right: 0;

		&__cap {		
			$cap_top_h: round($psilocybin_w / 4);

			@include size($psilocybin_w); 
			background-color: color(psilocybin_cap);
			border-top-left-radius: $psilocybin_w;
			border-top-right-radius: $psilocybin_w;
			margin-top: round($cap_top_h - ($border * 1.5)); // To fit inside parent container
			position: relative; // To place cap and gills

			// Top Cap
			&::before {
				$cap_top_w: round($psilocybin_w / 2);

				@include size($cap_top_w, $cap_top_h);
				@extend .p-border;
				background-color: color(psilocybin_cap);
				border-top-left-radius: $cap_top_w;
				border-top-right-radius: $cap_top_w;
				border-bottom: 0;
				content: '';
				margin-left: ($cap_top_w / -2);
				position: absolute;
				top: round(($cap_top_h - ($border * 1.5)) * -1);
				left: 50%;
			}	

			// Gills
			&::after {
				$gill_gap: (($psilocybin_w - ($border * 1.4)) / 9);

				@include size($border_sm, round($psilocybin_w / 4));
				content: '';
				margin-left: ($border_sm * -1);
				position: absolute;
				bottom: 0;
				left: 0;

				$shadow_list: ();

				@for $i from 1 through 8 {		
					$shadow: ($gill_gap * $i) 0 0 $c_ink;

					$shadow_list: append($shadow_list, $shadow, comma);
				}

				box-shadow: $shadow_list;
			}
		}

		&__stem {
			$stem_w: round($psilocybin_w / 3.3);
			$stem_h: round($stem_w * 4);

			@include size($stem_w, $stem_h);
		}
	}	
}

// DEVPHASE
/* This class was created only for testing during development phase.
 * The 3 multi-screen feature must fit the full aspect ratio of 48:9. *
 * Each screen must have a 16:9 aspect ratio. */
.dev-grid {
	@include size(100%, $mural_h);
	display: grid;
	grid-template-areas: "a b c";
	opacity: 0.7;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
	
	&__01 {
		grid-area: a;
		background-color: pink;
	}
	
	&__02 {
		grid-area: b;
		background-color: peachpuff;
	}
	
	&__03 {
		grid-area: c;
		background-color: pink;
	}
}

              
            
!

JS

              
                /* 
 * PURE CSS MULTI-SCREEN MURAL ILLUSTRATION FOR JSCONF EU
 * Be patient and wait for the easter egg animations: comet and day/night shift.
 * Resizable mural with 1 SCSS edit.
 *
 * Inspired by street art, skate and pop art cultures. As well as by the conference itself — community, diversity, growth...
 *
 * The mural was used as a screensaver in 2 sets of 3 screens during breaks between talks in one of the conference's tracks for 2 full days. 
 *
 * Watch videos from the mural's actual installation here:
 * https://twitter.com/ilithya_net/status/1135122255468466177
 * https://twitter.com/ilithya_net/status/1134755581636567040
 *
 * And photos:
 * https://twitter.com/ilithya_net/status/1136973406300250112
 *
 * Don't know JSConf EU?
 * https://2019.jsconf.eu/
 *
 * Did you know that JSConf EU had also a sister conference happening a day before — CSSconf EU?
 * https://2019.cssconf.eu/
 *
 * By ilithya | 2019
 */
              
            
!
999px

Console