Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                %main{:ontouchstart => true}
	.container
		%input#bulbasaur{:type => "checkbox", :name => "pokemon"}
		%input#ivysaur{:type => "checkbox", :name => "pokemon"}
		%input#venusaur{:type => "checkbox", :name => "pokemon"}
		%input#charmander{:type => "checkbox", :name => "pokemon"}
		%input#charmeleon{:type => "checkbox", :name => "pokemon"}
		%input#charizard{:type => "checkbox", :name => "pokemon"}
		%input#squirtle{:type => "checkbox", :name => "pokemon"}
		%input#wartortle{:type => "checkbox", :name => "pokemon"}
		%input#blastoise{:type => "checkbox", :name => "pokemon"}
		%label.bulbasaur.hover{:for => "bulbasaur"}
			- 6.times do
				%div
					%div
		%label.ivysaur.hover{:for => "ivysaur"}
			- 7.times do
				%div
					%div
		%label.venusaur.hover{:for => "venusaur"}
			- 10.times do
				%div
					%div
			%div
				- 2.times do
					%div
		%label.charmander.hover{:for => "charmander"}
			- 4.times do
				%div
					%div
		%label.charmeleon.hover{:for => "charmeleon"}
			- 4.times do
				%div
					%div
		%label.charizard.hover{:for => "charizard"}
			- 5.times do
				%div
					%div
		%label.squirtle.hover{:for => "squirtle"}
			- 4.times do
				%div
					%div
		%label.wartortle.hover{:for => "wartortle"}
			- 6.times do
				%div
					%div
		%label.blastoise.hover{:for => "blastoise"}
			- 5.times do
				%div
					%div
		.bulbasaur.magnify
			- 6.times do
				%div
					%div
		.ivysaur.magnify
			- 7.times do
				%div
					%div
		.venusaur.magnify
			- 10.times do
				%div
					%div
			%div
				- 2.times do
					%div
		.charmander.magnify
			- 4.times do
				%div
					%div
		.charmeleon.magnify
			- 4.times do
				%div
					%div
		.charizard.magnify
			- 5.times do
				%div
					%div
		.squirtle.magnify
			- 4.times do
				%div
					%div
		.wartortle.magnify
			- 6.times do
				%div
					%div
		.blastoise.magnify
			- 5.times do
				%div
					%div
		.bulbasaur.animate
			- 6.times do
				%div
					%div
		.ivysaur.animate
			- 7.times do
				%div
					%div
		.venusaur.animate
			- 10.times do
				%div
					%div
			%div
				- 2.times do
					%div
		.charmander.animate
			- 4.times do
				%div
					%div
		.charmeleon.animate
			- 4.times do
				%div
					%div
		.charizard.animate
			- 5.times do
				%div
					%div
		.squirtle.animate
			- 4.times do
				%div
					%div
		.wartortle.animate
			- 6.times do
				%div
					%div
		.blastoise.animate
			- 5.times do
				%div
					%div
		%label.bulbasaur.label{:for => "bulbasaur"} bulbasaur
		%label.ivysaur.label{:for => "ivysaur"} ivysaur
		%label.venusaur.label{:for => "venusaur"} venusaur
		%label.charmander.label{:for => "charmander"} charmander
		%label.charmeleon.label{:for => "charmeleon"} charmeleon
		%label.charizard.label{:for => "charizard"} charizard
		%label.squirtle.label{:for => "squirtle"} squirtle
		%label.wartortle.label{:for => "wartortle"} wartortle
		%label.blastoise.label{:for => "blastoise"} blastoise
		.bg
              
            
!

CSS

              
                $pokemon: bulbasaur, ivysaur, venusaur, charmander, charmeleon, charizard, squirtle, wartortle, blastoise;
$colors: #78d9ad, #81bbc6, #8cc7c3, #efaf84, #ef8b78, #f4af63, #84c5d6, #75a4db, #94b7e1;

@mixin e($top, $left, $bottom, $right, $width, $height, $color) {
	position: absolute;
	top: $top;
	left: $left;
	bottom: $bottom;
	right: $right;
	width: $width;
	height: $height;
	background: $color;
}
@mixin t($width, $height, $color) {
	position: relative;
	width: $width;
	height: $height;
	margin: 0 auto;
	background: $color;
}
@mixin f($color) {
	position: relative;
	width: 100%;
	height: 100%;
	background: $color;
}
@mixin p($gap) {
	&:before {
		left: $gap;
	}
	&:after {
		right: $gap;
	}
}
@mixin g($a, $b, $num) {
	&:nth-child(#{$a}) {
		left: $num;
		clip-path: polygon(0 0, 100% 100%, 0 100%);
	}
	&:nth-child(#{$b}) {
		right: $num;
		clip-path: polygon(100% 0, 100% 100%, 0 100%);
	}
}
@mixin m($a, $b, $num) {
	&:nth-child(#{$a}) {
		left: $num;
	}
	&:nth-child(#{$b}) {
		right: $num;
	}
}
@mixin n($a, $b, $num) {
	&:nth-child(#{$a}) {
		padding-left: $num;
	}
	&:nth-child(#{$b}) {
		padding-right: $num;
	}
}
@mixin a($a, $b, $num) {
	&:nth-child(#{$a}) {
		clip-path: polygon(0 0, #{100% - $num} 0%, 100% 100%, 0% 100%);
	}
	&:nth-child(#{$b}) {
		clip-path: polygon($num 0, 100% 0, 100% 100%, 0% 100%);
	}
}

*, *:before, *:after { box-sizing: border-box; }
* { user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none; }
html, body { height: 100%; }

body {
	margin: 0;
	font-family: -apple-system, "Mona Sans", system-ui, sans-serif;
	font-size: 14px;
}

@for $i from 1 through length($colors) {
	.#{nth($pokemon, $i)} {
		background: nth($colors, $i)
	}
}

main {
	animation: bgColor 9s linear 0.5s forwards, bgEnd 1s linear 9.5s forwards;
	will-change: background;
	display: none;
	background: #849896;
	width: 100%;
	height: 100%;
	.container {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		align-content: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 25vw;
		height: 25vw;
		min-width: 300px;
		min-height: 300px;
		@media only screen and (max-height: 25vw) {
			width: 18vw;
			height: 18vw;
		}
		.bg {
			will-change: background-color;
			position: absolute;
			top: calc(50% - 50vh);
			left: calc(50% - 50vw);
			width: 100vw;
			height: 100vh;
			z-index: -1;
		}
		> .hover, > .animate, > .magnify, > .label, > input {
			opacity: 0;
			visibility: hidden;
		}
		> .hover, > .animate, > .magnify {
			display: block;
			overflow: hidden;
			&:before, &:after, div:before, div:after {
				content: "";
				display: block;
			}
		}
		> .label {
			will-change: opacity, transform, visibility, background-color;
			transform: translateY(100%) translateY(12px);
			transition: transform 0.125s ease-out, opacity 0.5s linear 0.125s, visibility 0 linear 0.5s, background-color 0.25s ease-out;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: calc(100% + 12px);
			left: 0;
			width: 100%;
			height: 1vw;
			min-height: 28px;
			border-radius: 0.5vw;
			color: white;
			font-weight: 500;
			letter-spacing: 1px;
			text-transform: uppercase;
		}
		> .magnify, > .animate {
			transform-origin: center center;
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 0.5vw;
		}
		> .animate {
			will-change: opacity, transform, visibility;
			z-index: 12;
			@supports(animation-fill-mode: forwards) {
				animation-fill-mode: forwards, linear;
				animation-timing-function: linear, linear;

				@for $i from 1 through length($pokemon) {
					&.#{nth($pokemon, $i)} {
						animation-delay: #{($i - 1) + 0.5}s, #{($i - 1) + 1.5}s;
						@if $i == 1 {
							animation-name: spinInFirst, spinOut;
							animation-duration: 1s, 1s;
						} @else if $i == length($pokemon) {
							animation-name: spinIn, fadeOut;
							animation-duration: 1s, 0.5s;
						} @else {
							animation-name: spinIn, spinOut;
							animation-duration: 1s, 1s;
						}
					}
				}
			}
		}
		> .magnify {
			will-change: opacity, transform, visibility, z-index, border-radius;
			opacity: 0;
			visibility: hidden;
			transform: scale(0.34);
			border-radius: 1.5vw;
			transition: transform 0.125s ease-out, border-radius 0.25s linear, z-index 0 linear 0.5s, opacity 0.125s linear 0.125s, visibility 0 linear 0.5s;
			
			&.bulbasaur {
				transform-origin: left top;
			}
			&.ivysaur {
				transform-origin: center top;
			}
			&.venusaur {
				transform-origin: right top;
			}

			&.charmander {
				transform-origin: left center;
			}
			&.charmeleon {
				transform-origin: center center;
			}
			&.charizard {
				transform-origin: right center;
			}

			&.squirtle {
				transform-origin: left bottom;
			}
			&.wartortle {
				transform-origin: center bottom;
			}
			&.blastoise {
				transform-origin: right bottom;
			}
		}
		> .hover {
			will-change: opacity, visibility;
			cursor: pointer;
			position: relative;
			z-index: 10;
			width: calc(100% / 3);
			height: calc(100% / 3);
			animation: fadeIn 1s linear 9.5s forwards;
			&:nth-of-type(1) {
				border-top-left-radius: 0.5vw;
			}
			&:nth-of-type(3) {
				border-top-right-radius: 0.5vw;
			}
			&:nth-of-type(7) {
				border-bottom-left-radius: 0.5vw;
			}
			&:nth-of-type(9) {
				border-bottom-right-radius: 0.5vw;
			}
		}
		> input {
			will-change: opacity, visibility;
			animation: fadeIn 1s linear 9.5s forwards;
			appearance: none;
			cursor: pointer;
			display: block;
			position: absolute;
			z-index: 11;
			width: calc(100% / 3);
			height: calc(100% / 3);
			border: 0;
			margin: 0;
			padding: 0;
			background: transparent;

			&#bulbasaur {
				top: 0;
				left: 0;
			}
			&#ivysaur {
				top: 0;
				left: calc(100% / 3);
			}
			&#venusaur {
				top: 0;
				left: calc(100% / 3 * 2);
			}

			&#charmander {
				top: calc(100% / 3);
				left: 0;
			}
			&#charmeleon {
				top: calc(100% / 3);
				left: calc(100% / 3);
			}
			&#charizard {
				top: calc(100% / 3);
				left: calc(100% / 3 * 2);
			}

			&#squirtle {
				top: calc(100% / 3 * 2);
				left: 0;
			}
			&#wartortle {
				top: calc(100% / 3 * 2);
				left: calc(100% / 3);
			}
			&#blastoise {
				top: calc(100% / 3 * 2);
				left: calc(100% / 3 * 2);
			}

			@for $i from 1 through length($pokemon) {
				&##{nth($pokemon, $i)} {
					&:hover, &:focus, &:active, &:checked {
						~ .label.#{nth($pokemon, $i)} {
							transform: none;
							opacity: 1;
							visibility: visible;
							transition: transform 0.25s cubic-bezier(.25,1.15,.4,1.15), background-color 0.25s ease-out;
						}
					}
					&:active, &:checked {
						~ .label.#{nth($pokemon, $i)} {
							background: rgba(white, .1);
						}
					}
					&:checked {
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: 12;
						~ .bg {
							background-color: darken(nth($colors, $i), 15%);
						}
						~ .magnify.#{nth($pokemon, $i)} {
							transition: transform 0.25s cubic-bezier(.25,1.15,.4,1.15), border-radius 0.25s linear;
							z-index: 10;
							opacity: 1;
							border-radius: 0.5vw;
							visibility: visible;
							transform: none;
						 }
					}
				}
			}
		}
	}
}
.warning {
	margin: 0 auto;
	max-width: 500px;
	padding: 12px;
	line-height: 1.4;
}

@supports(-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) {
	main {
		display: flex;
	}
	.warning {
		display: none;
	}
}

.bulbasaur {
	> div {
		&:nth-child(1) {
			@include t(62.5%, 9.375%, #75b87e);
			clip-path: polygon(0 0, 100% 0, 94.375% 100%, 5.625% 100%);
			div {
				@include t(12.5%, 100%, #639868);
			}
		}
		&:nth-child(2) {
			@include e(9.375%, 50%, auto, auto, 21.09%, 10.16%, #3c8a5d);
			&:before {
				@include e(84.62%, -66.67%, auto, auto, 33.33%, 69.23%, #3c8a5d);
			}
			&:after {
				@include e(200%, -11.11%, auto, auto, 48.15%, 100%, #3c8a5d);
			}
		}
		&:nth-child(3) {
			@include e(56.25%, 45%, auto, auto, 10%, 4%, none);
			&:before {
				@include e(0, 0, auto, auto, 16%, 100%, #5aaa84);
			}
			&:after {
				@include e(0, auto, auto, 0, 16%, 100%, #5aaa84);
			}
		}
		&:nth-child(4), &:nth-child(5) {
			@include e(31.25%, auto, auto, auto, 24.22%, 25.39%, white);
			padding-top: 2.34%;
			div {
				@include f(#bd414f);
				&:before {
					@include e(auto, 0, 0, auto, 100%, 26.67%, #d6616d);
				}
				&:after {
					@include e(25%, auto, auto, auto, 32.61%, 50%, white);
				}
			}
		}
		@include m(4, 5, 8%);
		@include n(4, 5, 6.25%);
		@include a(4, 5, 21%);
		&:nth-child(4) {
			div {
				&:after {
					left: 30.4%;
				}
			}
		}
		&:nth-child(5) {
			div {
				&:after {
					right: 30.4%;
				}
			}
		}
		&:nth-child(6) {
			@include e(62.5%, 12.5%, auto, auto, 75%, 16%, #944368);
			padding: 8% 9% 0;
			div {
				@include f(#ce779f);
			}
			&:before, &:after {
				@include e(0, auto, auto, auto, 8%, 30%, white);
			}
			@include p(6%);
		}
	}
}
.ivysaur {
	> div {
		&:nth-child(1) {
			@include t(75%, 11.5%, #d87289);
			clip-path: polygon(0 0, 100% 0, 89.5% 100%, 10.5% 100%);
			div {
				@include t(64.58%, 100%, #6ba470);
			}
		}
		&:nth-child(2) {
			@include e(11.5%, 40.625%, auto, auto, 31.25%, 19.92%, none);
			z-index: 2;
			&:before {
				@include e(0, 0, auto, auto, 100%, 100%, #317d94);
			clip-path: polygon(0 0, 100% 0, 63.75% 100%, 36.25% 100%);
			}
			&:after {
				@include e(84.31%, -20%, auto, auto, 30%, 43.14%, #317d94);
				clip-path: polygon(0 0, 100% 0, 71% 100%, 29% 100%);
			}
		}
		&:nth-child(3) {
			@include e(32.59%, 21.68%, auto, auto, 56.64%, 32.25%, #81bbc6);
			z-index: 1;
			clip-path: polygon(0 0, 100% 0, 68% 100%, 32% 100%);
		}
		&:nth-child(4) {
			@include e(57.42%, 44.5%, auto, auto, 11%, 3.91%, none);
			z-index: 1;
			&:before, &:after {
				@include e(0, auto, auto, auto, 18%, 100%, #6b9aa5);
			}
			@include p(0);
		}
		&:nth-child(5), &:nth-child(6) {
			@include e(33.59%, auto, auto, auto, 27.34%, 20.31%, white);
			z-index: 0;
			div {
				@include f(#c64552);
				&:before {
					@include e(auto, 0, 0, auto, 100%, 30.77%, #e14e5a);
				}
				&:after {
					@include e(0, auto, auto, auto, 30%, 82.69%, #3c292b);
				}
			}
		}
		@include m(5, 6, 6.25%);
		@include n(5, 6, 7.8125%);
		&:nth-child(5) {
			div {
				&:after {
					left: 40%;
				}
			}
		}
		&:nth-child(6) {
			div {
				&:after {
					right: 40%;
				}
			}
		}
		&:nth-child(7) {
			@include e(60.55%, 10%, auto, auto, 80%, 16.41%, #944368);
			padding: 9.375% 10.55% 0; 
			div {
				@include f(#ce779f);
			}
			&:before, &:after {
				@include e(0, auto, auto, auto, 11.71%, 40.48%, white);
			}
			@include p(7.32%);
		}
	}
}
.venusaur {
	> div {
		&:nth-child(1) {
			@include t(100%, 25%, #e1808e);
			&:before {
				@include e(0, 9.375%, auto, auto, 5.47%, 21.875%, #f4d3d3);
			}
			&:after {
				@include e(32.8125%, 17.1875%, auto, auto, 7.8125%, 31.25%, #f4d3d3);
			}
			div {
				@include e(0, auto, auto, 11.72%, 10.9375%, 43.75%, #f4d3d3);
			}
		}
		&:nth-child(2) {
			@include e(0, 28.9%, auto, auto, 42.2%, 21.95%, #8c7152);
			padding: 5.47% 0 6.25%;
			div {
				@include f(#7b634a);
			}
		}
		&:nth-child(3) {
			@include e(25%, 0, auto, auto, 100%, 7.8125%, #81a884);
			div {
				@include e(0, 25.4%, auto, auto, 49.2%, 310%, #81a884);
				clip-path: polygon(0 0, 100% 0, 100% 83.87%, 93% 100%, 7% 100%, 0 83.87%);
			}
		}
		&:nth-child(4) {
			@include e(0, 0, auto, auto, 100%, 100%, none);
			&:before {
				@include e(21.95%, 22.7%, auto, auto, 54.6%, 3.1%, #759a78);
			}
			&:after {
				@include e(21.95%, 47.7%, auto, auto, 4.6%, 19.53%, #759a78);
			}
		}
		&:nth-child(5), &:nth-child(6) {
			@include e(14.8%, auto, auto, auto, 15.625%, 18.4%, #8cc7c3);
			div {
				@include e(auto, auto, 0, auto, 65%, 80.85%, #bd5f6d);
			}
		}
		@include m(5, 6, 0);
		&:nth-child(5) {
			clip-path: polygon(72.5% 0, 82.5% 12.77%, 100% 100%, 0 100%, 0 0);
			div {
				left: 0;
				clip-path: polygon(84.62% 0, 100% 10.53%, 100% 100%, 0 100%, 0 0);
			}
		}
		&:nth-child(6) {
			clip-path: polygon(27.5% 0, 100% 0, 100% 100%, 0 100%, 17.5% 12.77%);
			div {
				right: 0;
				clip-path: polygon(15.38% 0, 100% 0, 100% 100%, 0 100%, 0 10.53%);
			}
		}
		&:nth-child(7), &:nth-child(8) {
			@include e(45%, auto, auto, auto, 19.14%, 19.14%, white);
			padding: 0 4.3% 3.125%;
			overflow: hidden;
			div {
				@include f(#c65563);
				&:before {
					@include e(0, 32.14%, auto, auto, 35.72%, 78.05%, white);
				}
				&:after {
					@include e(auto, auto, 0, auto, 75%, 21.95%, #db5e6d);
				}
			}
			&:after {
				@include e(-2%, -2%, auto, auto, 104%, 104%, #86c0bd);
			}
		}
		@include m(7, 8, 5.47%);
		&:nth-child(7) {
			div {
				&:after {
					left: 0;
				}
			}
			&:after {
				clip-path: polygon(0 0, 100% 0, 100% 73.47%, 0 30.61%);
			}
		}
		&:nth-child(8) {
			div {
				&:after {
					right: 0;
				}
			}
			&:after {
				clip-path: polygon(0 0, 100% 0, 100% 30.61%, 0 73.47%);
			}
		}
		&:nth-child(9) {
			@include e(67.97%, 43%, auto, auto, 14%, 2.73%, none);
			z-index: 1;
			&:before, &:after {
				@include e(0, auto, auto, auto, 19.44%, 100%, #6b9a99);
			}
			@include p(0);
		}
		&:nth-child(10) {
			@include e(69.14%, 0, auto, auto, 100%, 10.94%, #864244);
			clip-path: polygon(39.84% 35.71%, 60.16% 35.71%, 62.5% 0, 100% 0, 100% 100%, 0 100%, 0 0, 37.5% 0);
			&:before, &:after {
				@include e(0, auto, auto, auto, 7.03%, 60.71%, white);
			}
			@include p(4.69%);
		}
		&:nth-child(11) {
			@include e(79.3%, 0, auto, auto, 100%, 6.64%, #9c7b94);
			div {
				@include e(auto, auto, 0, auto, 16.41%, 64.71%, none);
				&:nth-child(1) {
					left: 7.8125%;
				}
				&:nth-child(2) {
					right: 7.8125%;
				}
				&:before, &:after {
					@include e(0, auto, auto, auto, 38.1%, 100%, white);
				}
				@include p(0);
			}
		}
	}
}

.charmander {
	> div {
		&:nth-child(1), &:nth-child(2) {
			@include e(12.89%, auto, auto, auto, 21.875%, 33.2%, #1e2c31);
			padding: 7.42% 6.25% 5.47%;
			div {
				@include f(#182226);
			}
			&:before {
				@include e(auto, 0, 0, auto, 100%, 27.06%, #396d7e);
			}
			&:after {
				@include e(4.71%, auto, auto, auto, 37.5%, 37.65%, white);
			}
		}
		@include m(1, 2, 9%);
		&:nth-child(1) {
			&:after {
				right: 12.5%;
			}
		}
		&:nth-child(2) {
			&:after {
				left: 12.5%;
			}
		}
		&:nth-child(3) {
			@include e(55.08%, 42.5%, auto, auto, 15%, 6.25%, none);
			&:before, &:after {
				@include e(auto, auto, auto, auto, 23%, 100%, #d39873);
			}
			@include p(0);
		}
		&:nth-child(4) {
			@include e(64.45%, 11%, auto, auto, 78%, 24.22%, #a26f8e);
			padding: 11.33% 8.2% 0;
			&:before, &:after {
				@include e(0, auto, auto, auto, 10.5%, 32.26%, white);
			}
			@include p(7%);
			div {
				@include f(#cb98c0);
				&:before, &:after {
					@include e(auto, auto, 0, auto, 11.25%, 48.48%, white);
				}
				@include p(6.25%);
			}
		}
	}
}
.charmeleon {
	> div {
		&:nth-child(1), &:nth-child(2) {
			@include e(18.36%, auto, auto, auto, 26.95%, 23.83%, white);
			&:before {
				@include e(0, auto, auto, auto, 15.94%, 68.85%, white);
				z-index: 1;
			}
			&:after {
				@include e(0, auto, auto, auto, 24.64%, 88.52%, #231a1e);
			}
			div {
				@include f(#3c5668);
				&:before {
					@include e(auto, 0, 0, auto, 100%, 16.39%, #47657b);
				}
			}
		}
		@include g(1, 2, 8.59%);
		@include n(1, 2, 7.8125%);
		&:nth-child(1) {
			&:before {
				left: 39.13%;
			}
			&:after {
				left: 49.28%;
			}
		}
		&:nth-child(2) {
			&:before {
				right: 39.13%;
			}
			&:after {
				right: 49.28%;
			}
		}
		&:nth-child(3) {
			@include e(29.69%, 42.2%, auto, auto, 15.6%, 32.42%, none);
			&:before, &:after {
				@include e(0, auto, auto, auto, 10%, 38.55%, #d67d6b);
			}
			@include p(0);
			div {
				@include e(auto, 10%, 0, auto, 80%, 15.66%, none);
				&:before, &:after {
					@include e(0, auto, auto, auto, 15.625%, 100%, #d67d6b);
				}
				@include p(0);
			}
		}
		&:nth-child(4) {
			@include e(61.33%, 7.42%, auto, auto, 85.16%, 23.44%, #a26f8e);
			padding: 11.72% 8.6% 0;
			clip-path: polygon(37.61% 25.42%, 62.39% 25.42%, 65.14% 0, 100% 0, 100% 100%, 0 100%, 0 0, 34.86% 0);
			&:before, &:after {
				@include e(0, auto, auto, auto, 10.1%, 31.67%, white);
			}
			@include p(5.5%);
			div {
				@include f(#cb98c0);
				&:before, &:after {
					@include e(auto, auto, 0, auto, 8.57%, 50%, white);
				}
				@include p(8.57%);
			}
		}
	}
}
.charizard {
	> div {
		&:nth-child(1) {
			@include t(100%, 9.77%, #f1633c);
			&:before, &:after {
				@include e(0, auto, auto, auto, 22.27%, 100%, #f9b365);
			}
			@include p(11.33%);
		}
		&:nth-child(2), &:nth-child(3) {
			@include e(25.39%, auto, auto, auto, 26.95%, 18.36%, white);
			&:before {
				@include e(0, auto, auto, auto, 21.74%, 63.83%, white);
				z-index: 1;
			}
			&:after {
				@include e(0, auto, auto, auto, 21.74%, 87.23%, #1e2a2e);
			}
			div {
				@include f(#2b3c42);
				&:before {
					@include e(auto, 0, 0, auto, 100%, 21.28%, #3c565d);
				}
			}
		}
		@include g(2, 3, 8.6%);
		&:nth-child(2) {
			padding-left: 7.8125%;
			padding-right: 3.91%;
			&:before, &:after {
				left: 44.93%;
			}
		}
		&:nth-child(3) {
			padding-left: 3.91%;
			padding-right: 7.8125%;
			&:before, &:after {
				right: 44.93%;
			}
		}
		&:nth-child(4) {
			@include e(30.08%, 35.55%, auto, auto, 28.9%, 19.53%, none);
			&:before, &:after {
				@include e(0, auto, auto, auto, 9.46%, 70%, #e7a660);
			}
			@include p(0);
			div {
				@include e(auto, 23%, 0, auto, 54%, 30%, none);
				&:before, &:after {
					@include e(0, auto, auto, auto, 15%, 100%, #d09454);
				}
				@include p(0);
			}
		}
		&:nth-child(5) {
			@include e(62.5%, 5.86%, auto, auto, 88.28%, 24.22%, #a77191);
			padding: 13.67% 7.8125% 0;
			&:before, &:after {
				@include e(0, auto, auto, auto, 11.5%, 40.32%, white);
			}
			@include p(4.42%);
			div {
				@include f(#cb98c0);
				&:before, &:after {
					@include e(auto, auto, 0, auto, 11.29%, 55.56%, white);
				}
				@include p(6%);
			}
		}
	}
}

.squirtle {
	> div {
		&:nth-child(1), &:nth-child(2) {
			@include e(23.44%, auto, auto, auto, 21.875%, 30.47%, white);
			div {
				@include f(#331e29);
				&:before {
					@include e(auto, 0, 0, auto, 100%, 26.92%, #91526d);
				}
			}
			&:before {
				@include e(5.13%, auto, auto, auto, 35.71%, 24.36%, white);
				z-index: 1;
			}
			&:after {
				@include e(5.13%, auto, auto, auto, 35.71%, 79.49%, black);
			}
		}
		@include m(1, 2, 7.8125%);
		@include n(1, 2, 5.47%);
		&:nth-child(1) {
			&:before, &:after {
				left: 44.64%;
			}
		}
		&:nth-child(2) {
			&:before, &:after {
				right: 44.64%;
			}
		}
		&:nth-child(3) {
			@include e(60.56%, 44.92%, auto, auto, 10.16%, 3.91%, none);
			&:before, &:after {
				@include e(0, auto, auto, auto, 23%, 100%, #70a7b5);
			}
			@include p(0);
		}
		&:nth-child(4) {
			@include e(64.45%, 6.64%, auto, auto, 86.72%, 15.23%, #994b78);
			clip-path: polygon(44.14% 30.77%, 55.86% 30.77%, 63.96% 0, 100% 0, 100% 100%, 0 100%, 0 0, 36.04% 0);
			padding: 7.42% 9% 0;
			div {
				@include f(#d084ad);
			}
		}
	}
}
.wartortle {
	> div {
		&:nth-child(1), &:nth-child(2) {
			@include e(25.78%, auto, auto, auto, 26.56%, 31.25%, white);
			&:before {
				@include e(5%, auto, auto, auto, 52.94%, 22.5%, white);
				z-index: 1;
			}
			&:after {
				@include e(16.25%, auto, auto, auto, 26.47%, 65%, #261915);
			}
			div {
				@include f(#70473f);
				&:before {
					@include e(auto, 0, 0, auto, 100%, 27.5%, #7e4f47);
				}
			}
		}
		@include m(1, 2, 8.2%);
		@include n(1, 2, 8.2%);
		@include a(1, 2, 30.88%);
		&:nth-child(1) {
			&:before {
				left: 47%;
			}
			&:after {
				left: 57.35%;
			}
		}
		&:nth-child(2) {
			&:before {
				right: 47%;
			}
			&:after {
				right: 57.35%;
			}
		}
		&:nth-child(3) {
			@include e(51.17%, 0, auto, auto, 100%, 5.86%, none);
			&:before, &:after {
				@include e(0, auto, auto, auto, 8.2%, 100%, #6892c3);
			}
			@include p(0);
		}
		&:nth-child(4) {
			@include e(61.33%, 45.3125%, auto, auto, 9.375%, 4.3%, none);
			&:before, &:after {
				@include e(0, auto, auto, auto, 25%, 100%, #6590c0);
			}
			@include p(0);
		}
		&:nth-child(5) {
			@include e(66.41%, 10.9375%, auto, auto, 78.125%, 13.67%, #994b78);
			clip-path: polygon(43% 28.57%, 57% 28.57%, 61% 0, 100% 0, 100% 100%, 0 100%, 0 0, 39% 0);
			padding: 6.64% 12.89% 0;
			&:before, &:after {
				@include e(0, auto, auto, auto, 9%, 48.57%, white);
			}
			@include p(4%);
			div {
				@include f(#d084ad);
			}
		}
		&:nth-child(6) {
			@include e(auto, 0, 0, auto, 100%, 9.77%, #e1d1af);
			div {
				@include e(0, 20%, auto, auto, 60%, 100%, #546165);
				clip-path: polygon(0 0, 100% 0, 93.5% 100%, 6.5% 100%);
			}
		}
	}
}
.blastoise {
	&:before {
		@include e(auto, 0, 0, auto, 100%, 25%, #e1d1af);
	}
	&:after {
		@include t(51.5625%, 8.2%, #a58b6d);
		clip-path: polygon(0 0, 100% 0, 96.2% 100%, 3.8% 100%);
	}
	> div {
		&:nth-child(1), &:nth-child(2) {
			@include e(22.66%, auto, auto, auto, 29.3%, 21.48%, white);
			div {
				@include f(#635142);
				&:before {
					@include e(auto, 0, 0, auto, 100%, 16.36%, #7b6552);
				}
			}
			&:before {
				@include e(0, auto, auto, auto, 12%, 63.64%, white);
				z-index: 1;
			}
			&:after {
				@include e(0, auto, auto, auto, 16%, 90.91%, #312921);
			}
		}
		@include g(1, 2, 7.8125%);
		&:nth-child(1) {
			padding-left: 11.72%;
			padding-right: 6.64%;
			&:before {
				left: 45.33%;
			}
			&:after {
				left: 50.67%;
			}
		}
		&:nth-child(2) {
			padding-left: 6.64%;
			padding-right: 11.72%;
			&:before {
				right: 45.33%;
			}
			&:after {
				right: 50.67%;
			}
		}
		&:nth-child(3) {
			@include e(32.03%, 37.11%, auto, auto, 25.78%, 29.69%, none);
			&:before, &:after {
				@include e(0, auto, auto, auto, 12.12%, 40.79%, #89acd3);
			}
			@include p(0);
			div {
				@include e(auto, 8%, 0, auto, 84%, 7.89%, #84a4c8);
				&:before, &:after {
					@include e(-100%, auto, auto, auto, 23.64%, 100%, #7b9abd);
				}
				@include p(-11.82%);
			}
		}
		&:nth-child(4) {
			@include e(69.53%, 5.08%, auto, auto, 89.84%, 17.58%, #6b4b4a);
			&:before, &:after {
				@include e(0, auto, auto, auto, 10%, 31.11%, white);
			}
			@include p(11.74%);
		}
		&:nth-child(5) {
			@include e(69.53%, 5.08%, auto, auto, 89.84%, 17.58%, none);
			padding: 8.98% 10.55% 0;
			&:before, &:after {
				@include e(auto, auto, 0, auto, 6.09%, 24.44%, white);
			}
			@include p(0);
			div {
				@include f(#b76b7e);
				&:before, &:after {
					@include e(auto, auto, 0, auto, 13.07%, 50%, white);
				}
				@include p(0);
			}
		}
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		visibility: hidden;
	}
	to {
		opacity: 1;
		visibility: visible;
	}
}
@keyframes fadeOut {
	from {
		opacity: 1;
		visibility: visible;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes bgColor {
	0% { background: #849896; }

	// bulbasaur
	11.11% { background: darken(#78d9ad, 15%); }

	// ivysaur
	22.22% { background: darken(#81bbc6, 15%); }

	// venusaur
	33.33% { background: darken(#8cc7c3, 15%); }

	// charmander
	44.44% { background: darken(#efaf84, 15%); }

	// charmeleon
	55.56% { background: darken(#ef8b78, 15%); }

	// charizard
	66.67% { background: darken(#f4af63, 15%); }

	// squirtle
	77.78% { background: darken(#84c5d6, 15%); }

	// wartortle
	88.89% { background: darken(#75a4db, 15%); }

	// blastoise
	100% { background: darken(#94b7e1, 15%); }
}
@keyframes bgEnd {
	from { background: darken(#94b7e1, 15%); }
	to { background: #849896; }
}

// https://goo.gl/ykjfsj
@keyframes spinInFirst { 
  0% { opacity: 0; visibility: hidden; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.9% { opacity: 0; visibility: hidden; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25% { opacity: 1; visibility: visible; transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  27.85% { transform: matrix3d(0.162, -0.338, 0, 0, 0.338, 0.162, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30.66% { transform: matrix3d(0.471, -0.426, 0, 0, 0.426, 0.471, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30.71% { transform: matrix3d(0.477, -0.426, 0, 0, 0.426, 0.477, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.51% { transform: matrix3d(0.74, -0.328, 0, 0, 0.328, 0.74, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.56% { transform: matrix3d(0.744, -0.325, 0, 0, 0.325, 0.744, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.31% { transform: matrix3d(0.897, -0.171, 0, 0, 0.171, 0.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.34% { transform: matrix3d(0.898, -0.169, 0, 0, 0.169, 0.898, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.16% { transform: matrix3d(0.972, -0.032, 0, 0, 0.032, 0.972, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.19% { transform: matrix3d(0.973, -0.031, 0, 0, 0.031, 0.973, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.97% { transform: matrix3d(1, 0.058, 0, 0, -0.058, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  42.04% { transform: matrix3d(1.001, 0.059, 0, 0, -0.059, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  47.57% { transform: matrix3d(1.011, 0.115, 0, 0, -0.115, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  47.67% { transform: matrix3d(1.011, 0.115, 0, 0, -0.115, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  61.29% { transform: matrix3d(1.003, 0.032, 0, 0, -0.032, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  62.69% { transform: matrix3d(1.003, 0.024, 0, 0, -0.024, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75% { transform: matrix3d(1, -0.005, 0, 0, 0.005, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  77.7% { transform: matrix3d(1, -0.005, 0, 0, 0.005, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { opacity: 1; visibility: visible; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

// https://goo.gl/orG4SL
@keyframes spinIn { 
  0% { opacity: 0; visibility: hidden; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.9% { opacity: 0; visibility: hidden; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25% { opacity: 1; visibility: visible; transform: matrix3d(0, -1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30.71% { transform: matrix3d(0.746, -0.666, 0, 0, 0.666, 0.746, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.56% { transform: matrix3d(0.916, -0.401, 0, 0, 0.401, 0.916, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.34% { transform: matrix3d(0.983, -0.185, 0, 0, 0.185, 0.983, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.19% { transform: matrix3d(0.999, -0.032, 0, 0, 0.032, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  42.04% { transform: matrix3d(0.998, 0.059, 0, 0, -0.059, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  47.67% { transform: matrix3d(0.994, 0.113, 0, 0, -0.113, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  62.69% { transform: matrix3d(1, 0.024, 0, 0, -0.024, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  77.7% { transform: matrix3d(1, -0.005, 0, 0, 0.005, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { opacity: 1; visibility: visible; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

// https://goo.gl/ar1WZ9
@keyframes spinOut { 
  0% { opacity: 1; visibility: visible; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.9% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30.71% { transform: matrix3d(0.666, 0.746, 0, 0, -0.746, 0.666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.56% { transform: matrix3d(0.401, 0.916, 0, 0, -0.916, 0.401, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.34% { transform: matrix3d(0.185, 0.983, 0, 0, -0.983, 0.185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.19% { opacity: 1; visibility: visible; transform: matrix3d(0.032, 0.999, 0, 0, -0.999, 0.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  42.04% { opacity: 0; visibility: hidden; transform: matrix3d(-0.059, 0.998, 0, 0, -0.998, -0.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  47.67% { transform: matrix3d(-0.113, 0.994, 0, 0, -0.994, -0.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  62.69% { transform: matrix3d(-0.024, 1, 0, 0, -1, -0.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  77.7% { transform: matrix3d(0.005, 1, 0, 0, -1, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { opacity: 0; transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}
              
            
!

JS

              
                
              
            
!
999px

Console