.hills
View Compiled
$size: 300px;
$s: 300;
$outline: $s/1000;
$circle: 50%;
$color-sky: #0677BD;
$color-mountain: #9AD7CC;
$color-leaf: #27B774;
$color-trunk: #365652;
$color-clouds: #fff; 


body,html {
	height: 100%;
	background-image: linear-gradient(-80deg, #9a9 50%, #bbb 50%);
}

.hills {
	width: $size;
	height: $size;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: $size/-2;
	margin-left: $size/-2;
	border-radius: $circle;
	border: 5px solid #eee;
	background-color: $color-sky;
	animation: clouds 25s linear infinite;
	background-position: 0 0;
	background-image:
		radial-gradient(circle at 8% 40%, $color-clouds 3%, transparent 3%+$outline),
		radial-gradient(circle at 13% 37%, $color-clouds 4%, transparent 4%+$outline),
		radial-gradient(circle at 15% 40%, $color-clouds 5%, transparent 5%+$outline),
		radial-gradient(circle at 20% 38%, $color-clouds 4%, transparent 4%+$outline),

		radial-gradient(circle at 32% 16%, $color-clouds 3%, transparent 3%+$outline),
		radial-gradient(circle at 36% 16%, $color-clouds 4%, transparent 4%+$outline),
		radial-gradient(circle at 41% 16%, $color-clouds 3%, transparent 3%+$outline),

		radial-gradient(circle at 78% 7%, $color-clouds 4%, transparent 4%+$outline),
		radial-gradient(circle at 83% 10%, $color-clouds 4%, transparent 4%+$outline),
		radial-gradient(circle at 72% 8%, $color-clouds 3%, transparent 3%+$outline),
		radial-gradient(circle at 76% 12%, $color-clouds 3%, transparent 3%+$outline),

		radial-gradient(circle at 82% 47%, $color-clouds 4%, transparent 4%+$outline),
		radial-gradient(circle at 86% 45%, $color-clouds 3%, transparent 3%+$outline),
		radial-gradient(circle at 88% 48%, $color-clouds 3%, transparent 3%+$outline),
		radial-gradient(circle at 91% 46%, $color-clouds 3%, transparent 3%+$outline);
	
	&:before,
	&:after {
		content: '';
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		border-radius: inherit;
	}
	

	// tree -----
	&:after {
		animation: tree 2s linear infinite;
		background-image:
			// L-tree
			linear-gradient(80deg, $color-trunk 0.75%, transparent 0.75%+$outline),
			linear-gradient(-80deg, $color-trunk 0.75%, transparent 0.75%+$outline),
			radial-gradient(circle at 50% 95%, $color-leaf 2.1%, transparent 2.1%+$outline),
			
			// R-tree
			linear-gradient(80deg, $color-trunk 1.5%, transparent 1.5%+$outline),
			linear-gradient(-80deg, $color-trunk 1.5%, transparent 1.5%+$outline),
			radial-gradient(circle at 50% 90%, $color-leaf 4.2%, transparent 4.2%+$outline);
		
		background-position:
			// L-tree
			$size/1.67 0, $size/1.67 0, $size/10 0,
			// R-tree
			$size/1.5 0, $size/1.5 0, $size/6 0;
	}
	
	// clouds -----
	&:before {
		background-image:
			
			// R-mountain
			linear-gradient(63deg, $color-mountain 20%, transparent 20%+$outline),
			linear-gradient(-63deg, $color-mountain 20%, transparent 20%+$outline),
			// shadow
			linear-gradient(65deg, rgba(0,0,0,0.15) 11.2%, transparent 11.2%+$outline),
			linear-gradient(-65deg, rgba(0,0,0,0.15) 11.2%, transparent 11.2%+$outline),
			
			// L-mountain
			linear-gradient(63deg, $color-mountain 13%, transparent 13%+$outline),
			linear-gradient(-63deg, $color-mountain 13%, transparent 13%+$outline),
			
			// C-mountain
			linear-gradient(63deg, darken($color-mountain,9%) 24%, transparent 24%+$outline),
			linear-gradient(-63deg, darken($color-mountain,9%) 24%, transparent 24%+$outline);
		
		background-position:
			// R-mountain
			$size/1.25 0, $size/1.25 0, $size/1.52 0, $size/1.52 0, 
			// L-mountain
			$size/6.05 0, $size/6 0,
			// C-mountain
			$size/2.11 0, $size/2.1 0;
	}
}
	


@keyframes clouds {
	100% { background-position: $size 0;}
}

@keyframes tree {
	50% {
		background-position:
			// L-tree
			$size/1.67 0, $size/1.67 0, $size/(10 - 0.4) 0,
			// R-tree
			$size/1.5 0, $size/1.5 0, $size/(6 - 0.2) 0;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.