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.

            
              <!--Chrome  -->
<main id="canvas" class="">
<?xml version="1.0" encoding="UTF-8"?>
<svg id="winter-man" viewBox="0 0 345 601" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="winter-man-wrap" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="">
            <g id="right-leg" class="legs right" transform="translate(48.000000, 304.000000)">
                <rect id="Rectangle-Copy-13" fill="#1A1A1A" x="6" y="0" width="118" height="287"></rect>
                <path d="M63.5,296.51698 C98.5700816,296.51698 127,274.219081 127,246.713227 C127,219.207374 98.5700816,228.51698 63.5,228.51698 C28.4299184,228.51698 3.55271368e-14,219.207374 3.55271368e-14,246.713227 C3.55271368e-14,274.219081 28.4299184,296.51698 63.5,296.51698 Z" id="Oval-Copy-12" fill="#361010" transform="translate(63.500000, 261.758490) scale(1, -1) translate(-63.500000, -261.758490) "></path>
            </g>
            <g id="left-leg" class="legs" transform="translate(172.000000, 304.000000)">
                <rect id="Rectangle-Copy-12" fill="#1A1A1A" x="3" y="0" width="118" height="287"></rect>
                <path d="M63.5,296.51698 C98.5700816,296.51698 127,274.219081 127,246.713227 C127,219.207374 98.5700816,228.51698 63.5,228.51698 C28.4299184,228.51698 3.55271368e-14,219.207374 3.55271368e-14,246.713227 C3.55271368e-14,274.219081 28.4299184,296.51698 63.5,296.51698 Z" id="Oval-Copy-11" fill="#361010" transform="translate(63.500000, 261.758490) scale(1, -1) translate(-63.500000, -261.758490) "></path>
            </g>
            <path d="M31.25,172.8125 C101.75,101.0625 242.75,101.0625 313.25,172.8125 C383.75,244.5625 314.75,435 305,458.8125 C222.75,499 130.75,499 44,458.8125 C30.75,440 -39.25,244.5625 31.25,172.8125 Z" id="body" fill="#100E24"></path>
            <g id="face" transform="translate(107.000000, 77.000000)">
                <path d="M65.4142404,1.13686838e-13 L127.41424,1.13686838e-13 C132.67345,45.0371576 129.340117,82.0371576 117.41424,111 C105.573428,139.756259 88.073428,153.762365 64.9142404,153.018319 C41.7550528,153.762365 24.2550528,139.756259 12.4142404,111 C0.488364121,82.0371576 -2.84496921,45.0371576 2.4142404,0 L65.4142404,0 Z" id="Combined-Shape-Copy-2" fill="#F0CEBB"></path>
                <ellipse id="Oval" fill="#F0B695" cx="65" cy="46.5" rx="17" ry="8.5"></ellipse>
                <path d="M66,55 C76.6666667,54.3333333 82,51.5 82,46.5 C82,41.5 76.6666667,38.6666667 66,38 L66,55 Z" id="Oval-Copy" fill="#F0C4AA"></path>
                <ellipse id="Oval" fill="#F0C8B1" cx="106.5" cy="34.5" rx="12.5" ry="8.5"></ellipse>
                <ellipse id="Oval" fill="#F0C8B1" cx="23.5" cy="34.5" rx="12.5" ry="8.5"></ellipse>
                <g id="cheeks" transform="translate(11.000000, 26.000000)">
                    <g id="Group-Copy-2" transform="translate(83.000000, 0.000000)"></g>
                    <g id="Group-Copy-3"></g>
                </g>
                <g id="nose" transform="translate(48.000000, 38.000000)"></g>
            </g>
            <path d="M173,82 C214.973641,82 236.828481,91.8407114 236.828481,66 C236.828481,28.1684946 213.973641,0 172,0 C130.026359,0 106,28.1684946 106,66 C106,89 131.026359,82 173,82 Z" id="hat" fill="#7B2A2A"></path>
            <g id="eye-brow" transform="translate(132.000000, 80.000000)" fill="#613A15">
                <path d="M73.0669126,13.1075618 C81.5418801,13.1075618 83.6905722,17.9336328 83.6905722,13.1075618 C83.6905722,8.28149081 80.3614735,1.24344979e-14 71.886506,1.24344979e-14 C63.4115385,1.24344979e-14 53,8.28149081 53,13.1075618 C53,17.9336328 64.5919451,13.1075618 73.0669126,13.1075618 Z" id="Oval"></path>
                <path d="M20.0669126,13.1075618 C28.5418801,13.1075618 30.6905722,17.9336328 30.6905722,13.1075618 C30.6905722,8.28149081 27.3614735,1.24344979e-14 18.886506,1.24344979e-14 C10.4115385,1.24344979e-14 1.77635684e-15,8.28149081 1.77635684e-15,13.1075618 C1.77635684e-15,17.9336328 11.5919451,13.1075618 20.0669126,13.1075618 Z" id="Oval-Copy-7" transform="translate(15.345286, 7.626241) scale(-1, 1) translate(-15.345286, -7.626241) "></path>
            </g>
            <path d="M172.531746,246.090857 C207.479098,246.090857 257,186.545429 237,127 C195,159 206.947352,141.875853 172,141.875853 C137.052648,141.875853 137.052648,159 108,127 C84,172 137.584394,246.090857 172.531746,246.090857 Z" id="beard" fill="#613A15"></path>
            <path d="M47,409.951782 C63.0162577,409.951782 76,398.982759 76,385.451782 C76,371.920806 63.0162577,380.951782 47,380.951782 C30.9837423,380.951782 18,371.920806 18,385.451782 C18,398.982759 30.9837423,409.951782 47,409.951782 Z" id="right-mit" fill="#7B2A2A"></path>
            <path d="M299,409.951782 C315.016258,409.951782 328,398.982759 328,385.451782 C328,371.920806 315.016258,380.951782 299,380.951782 C282.983742,380.951782 270,371.920806 270,385.451782 C270,398.982759 282.983742,409.951782 299,409.951782 Z" id="left-mit" fill="#7B2A2A"></path>
            <path d="M175,160 C185.769553,160 193,158.983085 193,154.840949 C193,150.698814 185.769553,153 175,153 C164.230447,153 154,150.698814 154,154.840949 C154,158.983085 164.230447,160 175,160 Z" id="mouth" fill="#914620"></path>
        </g>
    </g>
</svg>
	<svg id="landscape" class="day" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
		<circle id="orb" cx="80" cy="10" r="5"></circle>
		 <path id="cloud" d="M14.8055985,33.9607428 C17.9258908,27.3193975 28,21 36.0879401,30.4988295 C39.0343371,28.1991257 46.4200679,29.2870407 50.8481226,35.0037815 C53.1681567,35.032072 57.3431671,33.9607428 60,37.8561187 C63.6069593,37.8561187 67.3795271,37.8561187 69.7411563,40.712478 C72.7505641,41.064412 49.5186507,41.0932641 0.0454159462,40.7990343 C-0.348188921,38.8370905 1.81663785,37.8561187 6.53989626,37.8561187 C8.70472303,34.3113307 11.2631547,34.4804213 14.8055985,33.9607428 Z" id="Rectangle"></path>
		<polygon id="mountain-two" points="55,100 90,100 72.5,65"></polygon>
		<polygon id="mt-shadow" points="80,100 90,100 72.5,65"></polygon>
		<polygon id="mt-shadow" points="95,100 100,100 90,60"></polygon>
		<polygon id="mountain-three" points="80,100 100,100 90,60"></polygon>
		<polygon id="mt-shadow" points="95,100 100,100 90,60"></polygon>
		<polygon id="mountain-one" points="60,100 100,100 80,70"></polygon>
		<polygon id="mountain-one-shadow" points="90,100 100,100 80,70"></polygon>

	</svg>
</main>
            
          
!
            
              $day: #fff0bc;
$night: #6ea4ca;

main {
	position: absolute;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	bottom: 0;
	background-color: darken($night, 45%);
	transition: all 2s ease-in-out;
	#landscape {

		position: absolute;
		bottom: 0px;
		@keyframes orb {
			from {
					transform: translate(25px, 15px);
			}

			to {
					transform: translate(-85px, 25px);
			}
		}
		@keyframes clouds {
			from {
				transform: scale(0.5) translate(200px, 20px);
			}

			to {
				transform: scale(0.5) translate(-100px, 20px);
			}
		}
		#cloud {
			transition: all 2s ease-in-out;
			fill: #1A1A1A;
			animation-name: clouds;
			animation-duration: 20s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
			position: absolute;
			top: 0;
			left: 0;
			transform: scale(0.5) translate(20px, 20px);
		}
		#mountain-one {
			fill: darken($night, 50%);
			transition: all 2s ease-in-out;
		}
		#mountain-two {
			fill: darken($night, 35%);
			transition: all 2s ease-in-out;
		}
		#mountain-three {
			fill: darken($night, 14%);
			transition: all 2s ease-in-out;
		}
		#orb {
			animation-name: orb;
			animation-duration: 25s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
			
			fill: lighten($night, 45%);
			transition: all 3s ease-in-out;
		
		}
	}

	#winter-man {
		position: absolute;
		margin: auto;
		margin-top: 30rem;
		margin-left: 5rem;
		bottom: 0;
		height: 15rem;
		.legs {
			transition: all 0.2s ease-in-out;
		}
		.left {
			transform: translate(172px, 295px);
		}
		.right {
			transform: translate(48px, 295px);
		}
	}
}
main.day {
	background-color: lighten($day, 8%);

	#landscape {
		#cloud {
			fill: #e6e6e6;
		}
		#mountain-one {
			fill: darken($day, 70%);
		}
		#mountain-two {
			fill: darken($day, 35%);
		}
		#mountain-three {
			fill: darken($day, 14%);
		}
		#orb {
			fill: darken($day, 25%);
	
		}
	}
}

            
          
!
            
              const leftLeg = document.getElementById('left-leg');
const rightLeg = document.getElementById('right-leg');
const landscape = document.getElementById('landscape');
const c = document.getElementById('canvas');

let count = 0;
window.setInterval(() => {
	if(count === 5){
	c.classList.toggle('day')		
		count = 0;
	} else {
		count++;
	}
	console.log(count);
	trudge();	
}, 1000);

const trudge = () => {
	console.log('trudging');
	leftLeg.classList.toggle('left');
	rightLeg.classList.toggle('right');
}

            
          
!
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.

Console