Skip to content

Instantly share code, notes, and snippets.

@rafszul

rafszul/index.html

Created February 16, 2017 01:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rafszul/da0495c5595bf2702c3371003b5094b5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rafszul/da0495c5595bf2702c3371003b5094b5 to your computer and use it in GitHub Desktop.
Download ZIP
V-day plane SVG animation
Raw
index.html
<!-- <h1>SVG with CSS animations </h1> -->
<div class="scene">
<span class="chem-trail">
<svg class="heart" viewBox="0 0 32 29.6">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
</span>
<span class="cloud cloud--small">
<svg class="heart" viewBox="0 0 32 29.6">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
</span>
<span class="cloud cloud--very_small">
<svg class="heart" viewBox="0 0 32 29.6">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
</span>
<svg xmlns="http://www.w3.org/2000/svg" id="plane" class="plane" viewBox="0 0 104 47" x="0" y="0" width="104" height="47" background-color="#ffffff00">
<g id="avion">
<!-- body -->
<path d="M20 36C25 38 69 43 80 40 92 38 106 33 104 21 103 13 95 13 90 9 85 5 79 2 76 1 70-1 65 0 60 2 57 3 25 14 23 13 21 12 12 2 9 3 5 4 1 5 1 6 2 7 15 34 20 36Z" fill="#A94CAF"/>
<!-- bottom -->
<path d="M23 36C28 37 69 43 80 40 88 38 98 34 102 29 82 32 22 36 23 36Z" stroke="#ffffff00" stroke-width="1" fill="#41228E"/>
<!-- wing-shadow -->
<path d="M42 39C48 40 60 40 67 40 71 32 72 26 72 26L44 29C44 29 44 35 42 39Z" stroke="#ffffff00" stroke-width="1" fill="#0c3b4d"/>
<!-- tail-shadow -->
<path d="M7 16C7 16 9 20 10 22 13 27 16 13 16 13L7 16Z" stroke="#ffffff00" stroke-width="1" fill="41228E"/>
<!-- wing -->
<path d="M40 29C40 29 41 34 34 42 27 51 48 46 58 39 74 28 72 25 72 25L40 29Z" stroke="#ffffff00" stroke-width="1" fill="#7B3B8C"/>
<!-- tail -->
<path d="M5 14C5 14 6 15 3 19 1 22 10 20 13 17 19 11 17 11 17 11L5 14Z" stroke="#ffffff00" stroke-width="1" fill="#7B3B8C"/>
<path d="M90 10C88 8 83 4 80 3 78 3 68 7 68 8 70 12 80 8 90 10Z" stroke="#ffffff00" stroke-width="1" fill="#0c3b4d"/>
<path d="M89 9C87 7 82 3 79 2 77 2 67 6 67 7 69 11 79 7 89 9Z" stroke="#ffffff00" stroke-width="1" fill="#afe2ff"/>
</g>
</svg>
<span class="cloud cloud--medium">
<svg class="heart" viewBox="0 0 32 29.6">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
</span>
<span class="cloud cloud--large">
<svg class="heart" viewBox="0 0 32 29.6">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
</span>
</div>
<div class="ground">
<svg class="tree tree-1" viewBox="0 0 44.286 97.726" xml:space="preserve">
<g transform="translate(-254.28396,-123.72577)">
<path stroke="#3B8686" d="M277.609,125.043l10.893,28.928h-4.643l7.857,16.25l-5.179,0.179l8.214,15.536l-5.536,0.179l8.571,17.857 l-16.428,0.536l0.536,16.429l-12.321-0.357l0.893-16.429l-15.357,0.179l8.75-16.964l-6.607,0.357l9.643-16.964l-5.893-0.178 l8.036-16.429l-4.286-0.179L277.609,125.043z"/>
</g>
</svg>
<svg class="tree tree-2" viewBox="0 0 44.286 97.726" xml:space="preserve">
<g transform="translate(-254.28396,-123.72577)">
<path stroke="#3B8686" d="M277.609,125.043l10.893,28.928h-4.643l7.857,16.25l-5.179,0.179l8.214,15.536l-5.536,0.179l8.571,17.857 l-16.428,0.536l0.536,16.429l-12.321-0.357l0.893-16.429l-15.357,0.179l8.75-16.964l-6.607,0.357l9.643-16.964l-5.893-0.178 l8.036-16.429l-4.286-0.179L277.609,125.043z"/>
</g>
</svg>
<svg class="tree tree-3" viewBox="0 0 44.286 97.726" xml:space="preserve">
<g transform="translate(-254.28396,-123.72577)">
<path stroke="#3B8686" d="M277.609,125.043l10.893,28.928h-4.643l7.857,16.25l-5.179,0.179l8.214,15.536l-5.536,0.179l8.571,17.857 l-16.428,0.536l0.536,16.429l-12.321-0.357l0.893-16.429l-15.357,0.179l8.75-16.964l-6.607,0.357l9.643-16.964l-5.893-0.178 l8.036-16.429l-4.286-0.179L277.609,125.043z"/>
</g>
</svg>
<svg class="tree tree-2" viewBox="0 0 44.286 97.726" xml:space="preserve">
<g transform="translate(-254.28396,-123.72577)">
<path stroke="#3B8686" d="M277.609,125.043l10.893,28.928h-4.643l7.857,16.25l-5.179,0.179l8.214,15.536l-5.536,0.179l8.571,17.857 l-16.428,0.536l0.536,16.429l-12.321-0.357l0.893-16.429l-15.357,0.179l8.75-16.964l-6.607,0.357l9.643-16.964l-5.893-0.178 l8.036-16.429l-4.286-0.179L277.609,125.043z"/>
</g>
</svg>
<svg class="tree tree-4" viewBox="0 0 44.286 97.726" xml:space="preserve">
<g transform="translate(-254.28396,-123.72577)">
<path stroke="#3B8686" d="M277.609,125.043l10.893,28.928h-4.643l7.857,16.25l-5.179,0.179l8.214,15.536l-5.536,0.179l8.571,17.857 l-16.428,0.536l0.536,16.429l-12.321-0.357l0.893-16.429l-15.357,0.179l8.75-16.964l-6.607,0.357l9.643-16.964l-5.893-0.178 l8.036-16.429l-4.286-0.179L277.609,125.043z"/>
</g>
</svg>
<div class="dirt"></div>
<p class="whoami">Forked with ♥ from <a href="http://codepen.io/lionelB/pen/gckDu" target="_blank">@b_lionel</a> by rbnhmll</p>
</div>
Raw
script.js
/* Look Ma', No JS ! */
Raw
style.css
html{
font-size:62.5%;
}
body{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
background: linear-gradient(RGBA(255, 234, 182, .25), rgba(220,241,255, 1));
font: 300 1.6em/1.4em Helvetica, Arial, "sans-serif";
overflow: hidden;
}
h1{
padding:30vh;
text-align:center;
}
.scene { position:relative;
display:block;
margin:0 auto;
width:75%;
height:400px;
}
.plane,
.cloud{
position:absolute;
}
/*plane animation*/
.plane{
animation-duration: 1s;
animation-name: anim-plane;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function:linear;
animation-fill-mode:forwards;
display:block;
margin:0 auto;
transform: translateY(80px);
left:30%;
}
@keyframes anim-plane{
to{
transform:translateY(95px);
}
}
/* Cloud Animation */
@keyframes fade{
0%{ opacity: 0;}
10%{ opacity: 1;}
90%{ opacity:1;}
100%{ opacity:0;}
}
@keyframes move{
from{
left:100%;
}
to{
left:0px;
}
}
.cloud{
animation-duration: 10s;
animation-name:move, fade;
animation-direction: normal;
animation-iteration-count:infinite;
animation-timing-function:linear;
animation-fill-mode:both;
display:block;
height:40px;
width:53px;
margin:0 auto;
}
.chem-trail .heart {
fill: #41228E;
animation-duration:.5s;
top: 145px;
left: 40%;
transform: scaleX(0.1) scaleY(0.1);
animation: stream .25s ease infinite;
}
@keyframes stream{
from{
left: 20%;
opacity: 1;
}
to{
left: 0%;
opacity: 0;
}
}
.cloud--very_small {
animation-duration:15s;
top:95px;
transform: scaleX(0.1) scaleY(0.1);
}
.cloud--small{
animation-duration:8s;
top:45px;
transform: scaleX(0.3) scaleY(0.3);
}
.cloud--medium{
animation-duration:5s;
animation-delay:1s;
top:75px;
transform: scaleX(0.6) scaleY(0.6);
}
.cloud--large{
animation-duration:3s;
animation-delay:2.5s;
top:175px;
transform: scaleX(0.8) scaleY(0.8);
}
.whoami{
color: rgba(0, 0, 0,.25);
font-size: 10px;
padding-top:3em;
text-align:center;
}
.heart {
fill: #FF8FE5;
position: relative;
top: 5px;
width: 50px;
}
.cloud--very_small .heart {
animation: pulse .75s ease infinite;
}
.cloud--small .heart {
animation: pulse 1s ease infinite;
}
.cloud--medium .heart {
animation: pulse 1.5s ease infinite;
}
.cloud--large .heart {
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.ground {
background: #8BC34A;
position: relative;
}
.dirt {
background: #9E7E44;
height: 3px;
}
.tree {
height: 25px;
fill: #3B8686;
position: absolute;
}
.tree-1 {
top: -20px;
left: 0;
transform: scale(.8);
animation: tree_zoom 6.1s ease infinite;
}
.tree-2 {
top: -15px;
left: 0%;
transform: scale(1.25);
animation: tree_zoom 4.2s ease infinite;
}
.tree-3 {
top: -10px;
left: 0%;
transform: scale(1.6);
animation: tree_zoom 2.6s ease infinite;
}
.tree-4 {
top: -5px;
left: 0%;
transform: scale(2);
animation: tree_zoom 1.4s ease infinite;
}
@keyframes tree_zoom {
from {
left: 100%;
}
to {
left: 0%;
}
}
Raw
v-day-plane-svg-animation.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment