css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <div class="egg_cup">

	<div class="dino">
		<div class="arm"></div>
		<div class="arm"></div>
		<div class="body"></div>
		<div class="eyes">
			<div class="eye"></div>
			<div class="eye"></div>
		</div>
		<div class="mouth">
			<div class="nose">
				<div class="nostril"></div>
				<div class="nostril"></div>
			</div>
			<div class="teeth"></div>
		</div>
	</div>

	<div class="egg_top">
		<div class="egg_wrap">
			<div class="egg_shell"></div>
		</div>

		<div class="egg_crack">
			<i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>
		</div>

		<div class="dots">
			<div class="dot"></div>
			<div class="dot"></div>
			<div class="dot"></div>
		</div>

	</div>
	<div class="egg_bottom">

		<div class="egg_wrap">
			<div class="egg_shell"></div>
		</div>

		<div class="egg_crack">
			<i></i><i></i><i></i><i></i><i></i><i></i>
			<i></i><i></i><i></i><i></i><i></i><i></i>

			<div class="egg_crack_cover"></div>
		</div>

		<div class="dots">
			<div class="dot"></div>
			<div class="dot"></div>
			<div class="dot"></div>
			<div class="dot"></div>
		</div>
	</div>
</div>
            
          
!
            
              @keyframes egg_top
	0%
		transform: translate(0, 0) rotate(0deg)
	100%
		transform: translateY(-200%) translateX(-50%) rotate(-90deg)
		opacity: 0
@keyframes dino_move
	0%
		transform: translateX(-50%) translateY(0px)
	100%
		transform: translateX(-50%) translateY(-30px)
@keyframes egg_crack
	0%
		width: 272px
	100%
		width: 0px

html, body
	width: 100%
	height: 100%
body
	background: #f6e58d
	*
		position: absolute
		&:before, &:after
			content: ''
			position: absolute
.dino
	top: 2em
	left: 50%
	transform: translateX(-50%)
	width: 12em
	height: 14em
	animation: dino_move 0.3s ease-in forwards
	animation-delay: 2s
	.eyes
		left: 50%
		transform: translateX(-50%)
		width: 3.3em
		height: 3em
		.eye
			box-sizing: border-box
			top: 0
			width: 60%
			height: 100%
			border-radius: 100%
			background: #00a185
			&:before
				top: 0.6em
				left: 50%
				width: 0.4em
				height: 1.8em
				transform: translateX(-50%)
				background: #34495f
				border-radius: 4px
			&:nth-child(1)
				left: 0
			&:nth-child(2)
				right: 0
	.mouth
		top: 1.3em
		left: 50%
		transform: translateX(-50%)
		width: 4.8em
		height: 4.8em
		background: #00a185
		border-radius: 100%
		overflow: hidden
		&:before
			top: -50%
			left: 50%
			transform: translateX(-50%)
			width: 160%
			height: 100%
			background: #40b39d
			border-radius: 100%
		.nose
			top: 0.8em
			left: 50%
			width: 60%
			height: 1em
			transform: translateX(-50%)
			&:before, &:after
				top: 0
				width: 1em
				height: 1em
				background: #00a185
				border-radius: 100%
			&:before
				left: 0
			&:after
				right: 0
			.nostril
				top: 0.15em
				width: 0.75em
				height: 1em
				background: #40b39d
				border-radius: 100%
				z-index: 1
				&:nth-child(1)
					left: 0.3em
					transform: rotate(45deg)
				&:nth-child(2)
					right: 0.3em
					transform: rotate(-45deg)
		.teeth
			width: 50%
			height: 3.1em
			left: 50%
			top: 0
			transform: translateX(-50%)
			z-index: -1
			&:before, &:after
				top: 0
				width: 53%
				height: 100%
				background: #f8ebad
				border-radius: 100%
			&:before
				left: 0
			&:after
				right: 0
	.body
		top: 5em
		left: 50%
		transform: translateX(-50%)
		width: 8em
		height: 8.5em
		background: #40b39d
		border-radius: 100%
		overflow: hidden
		&:before
			top: 2em
			left: 50%
			transform: translateX(-50%)
			width: 50%
			height: 110%
			background: #7bd19c
			border-radius: 100%
	.arm
		top: 5.5em
		width: 4em
		height: 2em
		&:before
			top: 0
			width: 1.8em
			height: 2em
			border-radius: 100%
			background: #00a185
		&:after
			top: 0
			width: 0
			height: 0
			border-top: 1em solid transparent
			border-bottom: 1em solid transparent
		&:nth-child(1)
			left: 0
			transform: rotate(10deg)
			&:before
				left: 0
			&:after
				left: 1em
				border-left: 6em solid #00a185
		&:nth-child(2)
			right: 0
			transform: rotate(-10deg)
			&:before
				right: 0
			&:after
				right: 1em
				border-right: 6em solid #00a185
.egg_cup
	width: 280px
	height: 360px
	top: 50%
	left: 50%
	margin: -180px 0 0 -140px
	&:after
		bottom: 0
		right: 5%
		width: 80%
		height: 50%
		border-radius: 100%
		transform: rotate(-24deg)
		background: rgba(black, 0.03)
		box-shadow: 5px 5px 25px rgba(black, 0.05)
		z-index: -1
	.egg_top, .egg_bottom
		left: 0
		width: 100%
		height: 100%
		&:after
			left: 0
			width: 280px
			height: 360px
			border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%
			z-index: 2
		.egg_wrap
			width: 100%
			height: 100%
			overflow: hidden
		.dot
			width: 1em
			height: 1em
			border-radius: 100%
			background: rgba(black, 0.1)
	.egg_shell
		width: 280px
		height: 360px
		background: #f9f9e3
		border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%
	.egg_top
		top: 0
		height: 40%
		transform-origin: bottom left
		animation: egg_top 0.3s ease-in forwards
		animation-delay: 2s
		&:after
			top: 0
		.egg_shell
			top: 0
		.egg_crack
			bottom: -1em
			i
				border-top: 0.8em solid #f9f9e3
				filter: drop-shadow(0 2px 0 rgba(black, 0.1))
		.dots
			.dot
				&:nth-child(1)
					top: 3em
					left: 5em
					height: 2em
					transform: rotate(45deg)
					opacity: 0.3
				&:nth-child(2)
					top: 7em
					left: 8em
					opacity: 0.5
				&:nth-child(3)
					top: 4.5em
					left: 13em
	.egg_bottom
		bottom: 0
		height: 60%
		&:after
			bottom: 0
		.egg_shell
			bottom: 0
		.egg_crack
			top: -0.6em
			&:before, &:after
				top: -0.6em
				width: 1em
				height: 1.5em
				background: #f6e58d
				z-index: 10
			&:before
				left: -0.8em
				transform: rotate(14deg)
			&:after
				right: -0.85em
				transform: rotate(-14deg)
			i
				border-bottom: 0.8em solid #f9f9e3
				filter: drop-shadow(0 -2px 0 rgba(black, 0.1))
		.dots
			.dot
				&:nth-child(1)
					top: 3em
					left: 2em
					height: 1.5em
				&:nth-child(2)
					top: 10em
					left: 6em
					opacity: 0.8
				&:nth-child(3)
					top: 4em
					left: 14em
				&:nth-child(4)
					top: 7.5em
					left: 12.5em
					width: 2.5em
					height: 4em
					transform: rotate(45deg)
					opacity: 0.5
	.egg_crack
		left: 50%
		transform: translateX(-50%)
		width: 95%
		height: 1em
		z-index: 1
		display: flex
		justify-content: center
		i
			position: relative
			width: 0
			height: 0
			margin-left: -2px
			border-left: 0.81em solid transparent
			border-right: 0.81em solid transparent
		.egg_crack_cover
			right: 0
			top: -2px
			width: 272px
			height: 1em
			background: #f9f9e3
			z-index: 1
			animation: egg_crack 1s linear forwards
			animation-delay: 1s
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console