Skip to content

Instantly share code, notes, and snippets.

@adriancmiranda
Created February 27, 2018 19:44
Show Gist options
  • Save adriancmiranda/4cab5c26c446c9be6e30fd9930a2c4e5 to your computer and use it in GitHub Desktop.
Save adriancmiranda/4cab5c26c446c9be6e30fd9930a2c4e5 to your computer and use it in GitHub Desktop.
Landscape Circle SVG
<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>
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')
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
$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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment