Landscape Circle SVG

index.html

<svg viewBox="0 0 500 500">
	<g class="scene1">
		<defs>
			<clipPath id="circle">
				<circle class="mask" cx="250" cy="250" r="100" />
			</clipPath>
			<clipPath id="ground">
				<rect x="50" y="50" width="400" height="260" />
			</clipPath>
		</defs>
	
		<g clip-path="url(#circle)">
			<rect class="bg" x="0" y="0" width="500" height="500" />
			
			<g clip-path="url(#ground)">
				<rect class="sky3" x="50" y="130" width="350" height="70" />
				<rect class="sky2" x="50" y="200" width="350" height="50" />
				<rect class="sky1" x="50" y="250" width="350" height="50" />
				
				<g class="mountain" transform="translate(150 185)">
					<polygon class="mountain-left" points="100,0 100,120 0,120" />
					<polygon class="mountain-right" points="100,0 200,120 100,120" />
					<polygon class="mountain-top-left" points="100,0 100,30 75,30" />
					<polygon class="mountain-top-right" points="100,0 125,30 100,30" />
				</g>
			</g>
			
			<g class="tree tree1" transform="translate(150 255)">
				<polygon class="tree-left" points="15,0 15,50 0,50" />
				<polygon class="tree-right" points="15,0 15,50 30,50" />
			</g>
			
			<g class="tree tree2" transform="translate(180 255)">
				<polygon class="tree-left" points="15,0 15,50 0,50" />
				<polygon class="tree-right" points="15,0 15,50 30,50" />
			</g>
			
			<g class="tree tree3" transform="translate(210 255)">
				<polygon class="tree-left" points="15,0 15,50 0,50" />
				<polygon class="tree-right" points="15,0 15,50 30,50" />
			</g>
			
			<g class="tree tree4" transform="translate(240 255)">
				<polygon class="tree-left" points="15,0 15,50 0,50" />
				<polygon class="tree-right" points="15,0 15,50 30,50" />
			</g>
			
			<g class="tree tree5" transform="translate(270 255)">
				<polygon class="tree-left" points="15,0 15,50 0,50" />
				<polygon class="tree-right" points="15,0 15,50 30,50" />
			</g>
			
			<g class="tree tree6" transform="translate(300 255)">
				<polygon class="tree-left" points="15,0 15,50 0,50" />
				<polygon class="tree-right" points="15,0 15,50 30,50" />
			</g>
			
			<g class="tree tree7" transform="translate(330 255)">
				<polygon class="tree-left" points="15,0 15,50 0,50" />
				<polygon class="tree-right" points="15,0 15,50 30,50" />
			</g>

			<rect class="ground" x="100" y="300" width="350" height="10" />
		</g>
	</g>
</svg>

landscape-circle-svg.markdown

Landscape Circle SVG

Hand crafted SVG animated with GSAP. Inspired by https://dribbble.com/shots/3100915-Coastal-Mountain-View

A Pen by Tim Rijkse on CodePen.

License.

script.babel

const tl = new TimelineMax({
	repeat: -1,
	repeatDelay: 2
})

const svg = document.querySelector('svg')

const scene1 = {
	wrapper: svg.querySelector('.scene1'),
	mask: svg.querySelector('.scene1 .mask'),
	ground: svg.querySelector('.scene1 .ground'),
	sky1: svg.querySelector('.scene1 .sky1'),
	sky2: svg.querySelector('.scene1 .sky2'),
	sky3: svg.querySelector('.scene1 .sky3'),
	tree1: svg.querySelector('.scene1 .tree1'),
	tree2: svg.querySelector('.scene1 .tree2'),
	tree3: svg.querySelector('.scene1 .tree3'),
	tree4: svg.querySelector('.scene1 .tree4'),
	tree5: svg.querySelector('.scene1 .tree5'),
	tree6: svg.querySelector('.scene1 .tree6'),
	tree7: svg.querySelector('.scene1 .tree7'),
	mountain: svg.querySelector('.scene1 .mountain'),
	mountain1: svg.querySelector('.scene1 .mountain-left'),
	mountain2: svg.querySelector('.scene1 .mountain-right')
}

tl.from(scene1.mask, 1, {
	attr: {
		r: 0
	},
	ease: Elastic.easeOut.config(3, 1)
})

tl.from(scene1.ground, 0.5, {
	autoAlpha: 0,
	attr: {
		y: '+=200'
	},
	transformOrigin: 'left center',
	ease: Power4.easeOut
}, 0.1)

tl.staggerFrom([scene1.sky1, scene1.sky2, scene1.sky3], 0.5, {
	autoAlpha: 0,
	skewY: 0,
	attr: {
		y: '+=90'
	},
	transformOrigin: 'center bottom',
	ease: Elastic.easeOut.config(1, 3)
}, 0.075, 0.25)

tl.staggerFrom([scene1.tree1, scene1.tree2, scene1.tree3, scene1.tree4, scene1.tree5, scene1.tree6, scene1.tree7], 0.5, {
	rotation: 45,
	scale: 0,
	transformOrigin: 'bottom center',
	ease: Back.easeOut.config(2, 1.55)
}, 0.05, 0.4)

tl.staggerFrom([scene1.mountain], 0.75, {
	y: '+=50',
	skewX: -200,
	scale: 0,
	transformOrigin: 'bottom center',
	ease: Back.easeOut.config(1, .2)
}, 0.0125, 0.5)

tl.to(scene1.mask, 1, {
	attr: {
		r: 0
	},
	transformOrigin: 'center center',
	ease: Back.easeIn.config(2, 1.55)
}, '+=3')

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>

style.scss

$red: #E9214F;
$burnt-sienna: #F06B4B;
$goldenrod: #F6DA71;
$scooter: #349597;
$midnight-express: #20283B;
$marzipan: #FCDC9F;
$fruit-salad: #49934E;
$goblin: #3D7C42;
$chambray: #44557E;
$port-gore: #384668;
$white: #ffffff;
$silver-sand: #BBBBBB;

body {
	background-color: $midnight-express;
}

svg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 500px;
	backface-visibility: hidden;
}

.scene1 {
	.bg {
		fill: $scooter;
	}
	
	.ground {
		fill: $marzipan;
	}
	
	.sky1 {
		fill: $goldenrod;
	}
	
	.sky2 {
		fill: $burnt-sienna;
	}
	
	.sky3 {
		fill: $red;
	}
	
	.tree-left {
		fill: $fruit-salad;
	}
	
	.tree-right {
		fill: $goblin;
	}
	
	.mountain-left {
		fill: $chambray;
	}
	
	.mountain-right {
		fill: $port-gore;
	}
	
	.mountain-top-left {
		fill: $white;
	}
	
	.mountain-top-right {
		fill: $silver-sand;
	}
}