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

              
                <svg hidden xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<symbol id="sun" viewBox="0 0 128 128">
		<circle cx="64" cy="63.997" fill="#fedb41" r="39.247" />
		<g fill="#fea832">
			<path d="M95.247 65.747A1.749 1.749 0 0193.5 64 29.53 29.53 0 0064 34.5a1.75 1.75 0 010-3.5 33.035 33.035 0 0133 33 1.749 1.749 0 01-1.753 1.747zM64 16.75a47.252 47.252 0 018.5.781c.038-.545.063-1.1.063-1.658C72.562 8.072 64 1.747 64 1.747s-8.563 6.325-8.563 14.126c0 .562.026 1.113.064 1.658A47.243 47.243 0 0164 16.75zM64 111.244a47.343 47.343 0 008.5-.78c.038.544.063 1.095.063 1.657 0 7.8-8.562 14.126-8.562 14.126s-8.563-6.324-8.563-14.126c0-.562.026-1.113.064-1.657a47.335 47.335 0 008.498.78zM97.409 30.588a47.349 47.349 0 015.457 6.562c.413-.358.82-.73 1.217-1.127 5.517-5.517 3.934-16.043 3.934-16.043s-10.526-1.58-16.043 3.934c-.4.4-.769.8-1.127 1.217a47.349 47.349 0 016.562 5.457zM30.591 97.406a47.232 47.232 0 006.562 5.457c-.358.413-.73.82-1.127 1.217-5.517 5.517-16.043 3.934-16.043 3.934S18.4 97.488 23.917 91.971c.4-.4.8-.769 1.217-1.127a47.291 47.291 0 005.457 6.562zM111.247 64a47.335 47.335 0 01-.78 8.5 23.71 23.71 0 001.657.064c7.8 0 14.126-8.563 14.126-8.563s-6.325-8.562-14.126-8.562c-.562 0-1.113.025-1.657.063a47.343 47.343 0 01.78 8.498zM16.753 64a47.335 47.335 0 00.78 8.5c-.544.038-1.1.064-1.657.064C8.075 72.56 1.75 64 1.75 64s6.325-8.562 14.126-8.562c.562 0 1.113.025 1.657.063a47.343 47.343 0 00-.78 8.499zM97.409 97.406a47.349 47.349 0 01-6.562 5.457c.358.413.73.82 1.127 1.217 5.517 5.517 16.043 3.934 16.043 3.934s1.583-10.526-3.934-16.043c-.4-.4-.8-.769-1.217-1.127a47.291 47.291 0 01-5.457 6.562zM30.591 30.588a47.349 47.349 0 00-5.457 6.562c-.413-.358-.82-.73-1.217-1.127-5.517-5.517-3.934-16.043-3.934-16.043s10.526-1.58 16.043 3.934c.4.4.769.8 1.127 1.217a47.291 47.291 0 00-6.562 5.457z" />
		</g>
	</symbol>
	<symbol id="moon" viewBox="0 0 512 512">
		<path d="M512 256c0 68.38-26.63 132.67-74.98 181.02S324.38 512 256 512s-132.67-26.63-181.02-74.98C26.63 388.67 0 324.38 0 256S26.63 123.33 74.98 74.98 187.62 0 256 0s132.67 26.63 181.02 74.98S512 187.62 512 256z" fill="#eef9ff" />
		<path d="M512 256c0 68.38-26.63 132.67-74.98 181.02S324.38 512 256 512V0c68.38 0 132.67 26.63 181.02 74.98S512 187.62 512 256z" fill="#bfe0ef" />
		<path d="M253.613 275.509l-27.753-11.391c-6.19 15.082-20.724 24.827-37.026 24.827-22.056 0-40-17.944-40-40s17.944-40 40-40c16.737 0 31.841 10.555 37.584 26.266l28.176-10.301c-10.051-27.493-36.478-45.965-65.76-45.965-38.598 0-70 31.402-70 70s31.402 70 70 70c28.522 0 53.949-17.049 64.779-43.436z" fill="#bee3ed" />
		<circle cx="311.907" cy="114.316" fill="#8fc2d8" r="52.333" />
		<g fill="#bee3ed">
			<path d="M334.91 415c0 28.86-23.47 52.33-52.33 52.33-9.7 0-18.78-2.65-26.58-7.27-15.4-9.11-25.75-25.9-25.75-45.06s10.35-35.95 25.75-45.06c7.8-4.62 16.88-7.27 26.58-7.27 28.86 0 52.33 23.47 52.33 52.33zM148.466 399.126a20.76 20.76 0 01-15.906-1.656c-10.131-5.488-13.909-18.194-8.421-28.325L97.76 354.857c-13.366 24.676-4.165 55.625 20.512 68.992 7.55 4.089 15.82 6.167 24.172 6.167a51.1 51.1 0 0014.572-2.134c13.031-3.875 23.773-12.591 30.248-24.545l-26.379-14.288a20.758 20.758 0 01-12.419 10.077zM144.351 128.364c-1.568-5.275-.988-10.846 1.633-15.685s6.97-8.368 12.245-9.937a20.471 20.471 0 0115.685 1.633 20.472 20.472 0 019.937 12.246l28.756-8.549c-3.852-12.957-12.519-23.638-24.404-30.076s-25.568-7.862-38.522-4.01c-26.746 7.952-42.037 36.18-34.085 62.926z" />
		</g>
		<path d="M413.108 228.202l-1.869 29.941c11.603.724 20.452 10.753 19.729 22.355a20.943 20.943 0 01-7.092 14.494c-4.222 3.726-9.632 5.579-15.264 5.234l-1.869 29.941c1.088.068 2.173.102 3.253.102 12.445 0 24.317-4.477 33.73-12.784 10.23-9.028 16.333-21.5 17.183-35.119 1.755-28.112-19.689-52.41-47.801-54.164zM302.688 234.07h30v29.75h-30z" fill="#8fc2d8" />
		<path d="M41 233.219h30v29.75H41z" fill="#bee3ed" />
		<path d="M401 151.649h30v29.75h-30zM376.084 373.625h30v29.75h-30zM334.91 415c0 28.86-23.47 52.33-52.33 52.33-9.7 0-18.78-2.65-26.58-7.27v-90.12c7.8-4.62 16.88-7.27 26.58-7.27 28.86 0 52.33 23.47 52.33 52.33z" fill="#8fc2d8" />
	</symbol>
	<symbol id="cow" viewBox="0 0 512 512">
		<path d="M503.882 323.064a8.108 8.108 0 01-6.619-3.405c-1.079-1.5-26.119-37.333-11.079-83.111 14.143-43.02 1.317-63.889-7.587-72.5-10.897-10.548-24.714-11.988-33.556-8.762-4.214 1.544-8.889-.619-10.429-4.837-1.54-4.214.627-8.885 4.841-10.425 16.373-5.992 36.627-1.016 50.445 12.341 11.635 11.258 28.635 37.821 11.73 89.254-12.5 38.044 8.643 68.294 8.857 68.595 2.611 3.651 1.762 8.726-1.889 11.337a8.085 8.085 0 01-4.714 1.513z" fill="#dbd9dc" />
		<g fill="#dc646e">
			<path d="M362.421 338.556c-.413 0-.833-.032-1.254-.095-4.429-.687-7.468-4.837-6.786-9.274l1.611-10.413c.683-4.437 4.754-7.456 9.278-6.79 4.429.686 7.468 4.837 6.786 9.274l-1.611 10.413c-.619 4.016-4.079 6.885-8.024 6.885zM397.453 340.338a8.126 8.126 0 01-7.825-5.968l-4.063-14.73c-1.198-4.329 1.349-8.802 5.675-9.996 4.302-1.19 8.802 1.337 9.992 5.671l4.063 14.73c1.198 4.329-1.349 8.802-5.675 9.996a8.01 8.01 0 01-2.167.297z" />
		</g>
		<path d="M421.927 305.359c-51.707 42.286-102.434-1.258-102.434-1.258l85.503-35.894 16.931 37.152z" fill="#e6828c" />
		<path d="M471.366 186.429c-.858-16.232-10.668-43.229-47.746-56.889-54.286-20-137.143 21.161-243.131-1.657-13.735-2.957-26.432-9.533-37.255-18.492l-.334-.277c-20.665-17.107-51.279-18.577-71.612-1.077a57.826 57.826 0 00-4.161 3.958L4.435 177.849a16.254 16.254 0 00-3.908 15.26l3.679 14.103c1.897 7.273 8.598 12.303 16.114 12.167 25.274-.456 44.007-2.846 57.963-6.198 35.556 53.028 89.337 84.487 89.337 84.487l1.016 106.667-23.852 5.963a16.252 16.252 0 00-11.477 10.628l-2.333 6.999c-1.462 4.387 1.803 8.917 6.427 8.917h30.663c5.435 0 10.51-2.716 13.524-7.238l8.398-12.597a24.375 24.375 0 003.831-9.951l16.62-96.813c117.013 21.964 133.945-22.057 194.558-27.814l36.91 73.143v47.069l-19.719 7.251a16.255 16.255 0 00-10.28 10.28l-2.585 7.754c-1.462 4.387 1.803 8.917 6.427 8.917h28.682a16.253 16.253 0 0014.919-9.803l8.677-20.066a40.634 40.634 0 003.338-16.128v-53.161c0-3.939-.583-7.883-2.102-11.518-4.593-10.99-8.057-38.2-8.057-63.378.002-29.122 12.192-37.927 10.161-76.36z" fill="#dbd9dc" />
		<path d="M157.461 252.969c-8.596-8.596-27.201-31.281-38.931-53.597-2.743-5.219-9.838-6.429-14.03-2.282a67.468 67.468 0 01-26.218 16.091c35.556 53.028 89.337 84.487 89.337 84.487 0-29.461-4.402-38.943-10.158-44.699z" fill="#c9c6ca" />
		<g fill="#6f6571">
			<path d="M423.62 129.54c-22.266-8.203-49.415-6.088-80.919-2.348 13.22 33.784-23.038 54.986-25.748 58.221-17.338 20.694 8.987 57.123 40.635 41.651 22.857-11.175 52.826-38.603 62.984-15.238 9.119 20.973 24.262 32.056 41.957 35.221 3.089-18.206 10.452-30.056 8.836-60.618-.857-16.232-10.667-43.229-47.745-56.889zM271.717 134.392c-28.112 1.458-58.562.524-91.228-6.509-13.736-2.957-26.432-9.533-37.255-18.493l-.334-.277c-20.665-17.107-51.279-18.577-71.612-1.077a58.036 58.036 0 00-4.161 3.958L4.435 177.849a16.254 16.254 0 00-3.908 15.26l3.679 14.103c1.897 7.273 8.598 12.302 16.114 12.167 25.274-.456 44.007-2.846 57.963-6.198 14.902 22.225 32.978 40.598 48.981 54.517 32.495-15.777 20.702-47.564 35.507-72.014 23.313-38.498 93.123 1.572 108.946-61.292z" />
		</g>
		<path d="M50.455 216.058c0-24.302-12.221-45.237-29.893-55.15L4.435 177.849a16.254 16.254 0 00-3.908 15.26l3.679 14.103c1.898 7.273 8.598 12.303 16.114 12.167 11.299-.204 21.224-.812 30.065-1.702.012-.543.07-1.072.07-1.619z" fill="#e6828c" />
		<g fill="#5d5360">
			<path d="M168.635 404.334l-23.852 5.963a16.256 16.256 0 00-11.478 10.628l-2.333 7c-1.462 4.387 1.803 8.918 6.427 8.918h30.663a16.253 16.253 0 0013.524-7.238l7.951-11.927-20.902-13.344zM415.75 436.842h28.682a16.253 16.253 0 0014.919-9.803l4.23-9.781-21.675-14.618-19.719 7.251a16.255 16.255 0 00-10.28 10.28l-2.585 7.753c-1.462 4.388 1.803 8.918 6.428 8.918z" />
		</g>
		<circle cx="73.08" cy="152.549" r="8.127" fill="#4b3f4e" />
		<path d="M.527 193.109l1.427 5.47c6.748-1.944 11.592-7.003 11.592-12.997 0-4.286-2.516-8.07-6.387-10.617l-2.723 2.884a16.252 16.252 0 00-3.909 15.26z" fill="#dc646e" />
		<path d="M75.967 77.813c-3.044 7.777-5.5 22.716 11.377 36.696a11.714 11.714 0 0010.671 2.27c5.216-1.462 12.225-5.395 15.953-15.841.814-2.279-.286-4.947-2.593-5.678-11.851-3.758-23.145-13.501-28.828-18.978-2.106-2.03-5.514-1.193-6.58 1.531z" fill="#faebc8" />
		<path d="M217.905 205.307c-13.185 2.755-22.989 13.538-20.317 24.635 3.302 13.714 31.058 8.94 42.667 27.937 8.381 13.714 23.365 23.873 36.826 14.73 13.46-9.143 30.745-24.707 2.793-48-19.81-16.508-44.953-22.857-61.969-19.302z" fill="#5d5360" />
		<path d="M78.261 75.573c-.979.413-1.855 1.118-2.294 2.24-3.044 7.777-5.501 22.716 11.377 36.696a11.717 11.717 0 0010.671 2.27 22.433 22.433 0 007.732-3.943c-18.486-10.752-25.138-27.348-27.486-37.263z" fill="#f5dcb4" />
		<path d="M108.711 103.558l2.455 13.586c1.887 10.446 10.591 16.468 19.348 13.311 10.341-3.728 22.741-10.801 27.962-23.958 1.343-3.383-.505-7.428-3.705-8.452-6.715-2.148-19.745-4.881-40.108-3.365-3.959.295-6.761 4.4-5.952 8.878z" fill="#5d5360" />
		<path d="M212.87 293.836l-2.433 16.407c117.014 21.964 133.945-22.058 194.558-27.814l-6.959-11.759c-8-13.517-24.601-19.598-39.255-13.945-32.73 12.628-64.016 33.635-126.984 23.494-9.043-1.455-17.583 4.556-18.927 13.617z" fill="#c9c6ca" />
		<path d="M127.264 267.697c12.483-6.061 18.407-14.494 21.837-23.955-9.378-11.058-21.863-27.803-30.57-44.371-2.744-5.22-9.838-6.429-14.03-2.282a67.48 67.48 0 01-26.218 16.091c14.901 22.225 32.977 40.598 48.981 54.517z" fill="#5d5360" />
	</symbol>
</svg>

<div class="sky"></div>
<div class="mountain--L"></div>
<div class="mountain--S"></div>
<svg class="cow">
	<use xlink:href="#cow"></use>
</svg>
<div class="house">
	<div class="door"></div>
	<div class="window"></div>
</div>
<svg class="sun">
	<use xlink:href="#sun"></use>
</svg>
<svg class="moon">
	<use xlink:href="#moon"></use>
</svg>
              
            
!

CSS

              
                $sky-day: #5bb1f6;
$sky-night: #0d1427;

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	position: relative;
}

.sky {
	height: 200%;
	width: 125%;
	position: absolute;
	top: 0;
	left: -12.5%;
	border-radius: 50%;
	background: linear-gradient(
		$sky-day,
		$sky-day 50%,
		$sky-night 50%,
		$sky-night
	);
}

.sun,
.moon {
	position: absolute;
	left: 50vw;
	transform: translatex(-50%);
	height: 15vmin;
	width: 15vmin;
	top: 100vh;
}

.mountain--L,
.mountain--S {
	position: absolute;
	bottom: 0;
	opacity: 0.9;
}

.mountain--L {
	right: 10vw;
	border-bottom: 25vmin solid #99b;
	border-right: 16vmin solid transparent;
	border-left: 16vmin solid transparent;
}

.mountain--S {
	right: 5vw;
	border-bottom: 13vmin solid #99b;
	border-right: 8vmin solid transparent;
	border-left: 8vmin solid transparent;
}

.house {
	left: 5vw;
	bottom: 0;
	position: absolute;
	height: 10vmin;
	width: 14vmin;
	background: #999;

	&::before {
		content: "";
		display: block;
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translatex(-50%);
		height: 0;
		width: 0;
		border-bottom: 5vmin solid #999;
		border-right: 9vmin solid transparent;
		border-left: 9vmin solid transparent;
	}

	.door {
		position: absolute;
		height: 60%;
		width: 25%;
		left: 15%;
		bottom: 0;
		background: #ba262c;

		&::after {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			left: 10%;
			transform: translatey(-50%);
			background: #000;
			height: 0.5vmin;
			width: 0.5vmin;
			border-radius: 50%;
		}
	}

	.window {
		position: absolute;
		height: 37.5%;
		width: 25%;
		right: 15%;
		bottom: 50%;
		transform: translatey(50%);

		&::before,
		&::after {
			content: "";
			display: block;
			background: #000;
			position: absolute;
		}

		&::before {
			height: 0.3vmin;
			width: 100%;
			left: 0;
			top: 50%;
			transform: translatey(-50%);
		}

		&::after {
			width: 0.3vmin;
			height: 100%;
			top: 0;
			left: 50%;
			transform: translatex(-50%);
		}
	}
}

.cow {
	height: 8vmin;
	width: 9vmin;
	position: absolute;
	bottom: -1vmin;
	left: 30vw;
}

              
            
!

JS

              
                const animationDuration = 5; // 1 day = 5s
const animationRepeatDelay = animationDuration;
const totalDuration = animationDuration + animationRepeatDelay;

const sunMoonSky = "10vh";
const sunMoonHide = "100vh";

const skyRotationDuration = 0.4;
const skyRotationDelay = 0.4;
var skyTimeline = gsap.timeline();
skyTimeline.to(".sky", {
	rotate: -180,
	duration: skyRotationDuration,
	delay: skyRotationDelay,
	repeat: -1,
	repeatDelay: totalDuration - skyRotationDuration
});
skyTimeline.to(".sky", {
	rotate: -360,
	duration: skyRotationDuration,
	delay: animationDuration,
	repeat: -1,
	repeatDelay: totalDuration - skyRotationDelay
});

const sunDuration = skyRotationDuration;
const sunDelay = skyRotationDelay;
var sunTimeline = gsap.timeline({ top: sunMoonSky });
sunTimeline.fromTo(
	".sun",
	{ top: sunMoonSky },
	{
		top: sunMoonHide,
		duration: sunDuration,
		delay: sunDelay - 0.5,
		repeat: -1,
		repeatDelay: totalDuration - sunDuration
	}
);
sunTimeline.fromTo(
	".sun",
	{ top: "100vh" },
	{
		top: sunMoonSky,
		duration: sunDuration,
		delay: sunDuration + animationDuration + 0.5,
		repeat: -1,
		repeatDelay: totalDuration - sunDelay,
		ease: "back.inOut"
	}
);

const moonDuration = skyRotationDuration;
const moonDelay = skyRotationDelay;
var moonTimeline = gsap.timeline({ top: sunMoonHide });
moonTimeline.fromTo(
	".moon",
	{ top: sunMoonHide },
	{
		top: sunMoonSky,
		duration: moonDuration,
		delay: moonDelay + 0.5,
		repeat: -1,
		repeatDelay: totalDuration - moonDuration,
		ease: "back.inOut"
	}
);
moonTimeline.fromTo(
	".moon",
	{ top: sunMoonSky },
	{
		top: sunMoonHide,
		duration: moonDuration,
		delay: animationDuration - moonDuration - 0.5,
		repeat: -1,
		repeatDelay: totalDuration - moonDelay
	}
);

const windowDuration = 0.1;
const windowDelay = skyRotationDelay;
const windowLightsOn = "#f7e55c";
const windowLightsOff = "#d0edf4";
var windowTimeline = gsap.timeline({ background: windowLightsOff });
windowTimeline.fromTo(
	".window",
	{ background: windowLightsOff },
	{
		background: windowLightsOn,
		duration: windowDuration,
		delay: windowDelay + 1,
		repeat: -1,
		repeatDelay: totalDuration - windowDuration
	}
);
windowTimeline.fromTo(
	".window",
	{ background: windowLightsOn },
	{
		background: windowLightsOff,
		duration: windowDuration,
		delay: animationDuration - windowDuration,
		repeat: -1,
		repeatDelay: totalDuration - windowDelay
	}
);

              
            
!
999px

Console