<div class="wrapper">
<button>reset</button>
<h2>Sent!</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1250">
<g id="Layer_3">
<g class="st0">
<path class="shadow" d="M178.6 348.5l1547-221-750.5 1079.9-333.6-362.7-179.3 120.9L433 632z"/>
<path class="shadow" d="M975.1 1241.8c-9.6 0-18.8-4-25.3-11.1l-313.6-341-154.8 104.4c-10.1 6.8-23 7.8-34 2.5-11-5.2-18.4-15.9-19.5-28l-28.2-322.2-246.7-275c-8.5-9.5-11.1-22.8-6.7-34.7 4.3-11.9 14.9-20.5 27.5-22.3l1547-221c13.5-1.9 27 4.3 34.1 16 7.2 11.6 6.8 26.5-1 37.7l-750.6 1080c-6 8.6-15.5 14-25.9 14.7h-2.3zM641.5 810.3c9.3 0 18.6 3.8 25.3 11.1l304.5 331.2 681-979.9L247.2 373.4 458.6 609c5 5.5 8 12.6 8.7 20l24.1 275.4 130.9-88.3c5.8-3.9 12.5-5.8 19.2-5.8z"/>
</g>
<path class="white" d="M147.4 260.9l1547-221-750.6 1080-333.6-362.8L430.9 878l-29.2-333.6z"/>
<path class="darkblue" d="M943.8 1154.3c-9.6 0-18.8-4-25.3-11.1l-313.6-341-154.8 104.3c-10.1 6.8-23 7.8-34 2.5-11-5.2-18.4-15.9-19.5-28l-28.2-322.2-246.7-275c-8.5-9.5-11.1-22.8-6.7-34.7 4.3-11.9 14.9-20.5 27.5-22.3l1547-221c13.5-1.9 27 4.3 34.1 16s6.8 26.5-1 37.7L972 1139.5c-6 8.6-15.5 14-25.9 14.7-.7.1-1.5.1-2.3.1zM610.2 722.7c9.3 0 18.6 3.8 25.3 11.1L940.1 1065l681-979.9L216 285.8l211.4 235.6c5 5.5 8 12.6 8.7 20l24.1 275.4L591 728.6c5.8-4 12.5-5.9 19.2-5.9z"/>
<path class="darkblue" d="M401.7 563.2c-7.5 0-14.6-4.5-17.5-11.9-3.8-9.7 1-20.5 10.7-24.3L1687.5 22.4c9.7-3.8 20.5 1 24.3 10.7 3.8 9.7-1 20.5-10.7 24.3L408.5 561.9c-2.2.9-4.5 1.3-6.8 1.3z"/>
<path class="darkblue" d="M422.6 871.8c-6.3 0-12.4-3.1-16-8.9-5.5-8.8-2.8-20.4 6.1-25.8L1655.3 66c8.8-5.5 20.4-2.8 25.8 6 5.5 8.8 2.8 20.4-6 25.8L432.5 868.9c-3.1 2-6.5 2.9-9.9 2.9z"/>
</g>
</svg>
</div>
@import url(https://fonts.googleapis.com/css?family=Dosis);
$lightblue: #168590;
$darkblue: #233752;
$lightgray: #F1F1F1;
$white: #ffffff;
$shadow: #999999;
.shadow {
fill:$shadow;
opacity:0.5;
}
.white {fill: $white;}
.darkblue {fill: $darkblue;}
body {
background-color: $lightgray;
font-family: 'Dosis', sans-serif;
}
.wrapper {
width: 200px;
height: 200px;
margin: auto;
padding-right: 100px;
text-transform: uppercase;
h2 {
position: absolute;
font-size: 90px;
left: 50%;
transform: translateX(-50%);
top: 150px;
color: $lightblue;
letter-spacing: 4.3px;
display: none;
}
button {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: $darkblue;
border: 2px solid $darkblue;
cursor: pointer;
color: $white;
padding: 10px 20px;
text-transform: uppercase;
font-family: 'Dosis', sans-serif;
font-size: 18px;
transition:all .25s ease-in-out;
&:hover {
background-color: transparent;
color: $lightblue;
}
&:focus {outline:0;}
}
svg {
cursor: pointer;
width: 100%;
offset-path: path("M180.3,318.3c0,0,19.8-73.6,84.7-73.2c89,0.4,120.5,149.7-29.5,149.7c-91,0-125.2-66.1-120-108.9c7.3-60,38.2-104,124.4-142.1C311.1,112.2,699.2,6.3,699.2,6.3");
transform: rotate(60deg);
transition: margin .25s ease-in-out;
.st0 {
transition: opacity .25s ease-in-out;
}
&:hover {
margin-top: -10px;
.st0 {
opacity: 0;
}
}
}
&.active {
svg {
animation: plane 1s ease-in;
}
}
@keyframes plane {
0% {
offset-distance: 0;
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
offset-distance: 100%;
transform: rotate(30deg);
}
}
}
View Compiled
/* Only in Chrome for now */
/* Inspiration from https://dribbble.com/shots/2508561-Invitation-Sent */
var $plane = $('svg');
var $wrapper = $('.wrapper');
var $sent = $('h2');
$plane.click(function(){
$wrapper.toggleClass('active');
$(this).fadeOut(1000);
$sent.delay(1000).fadeIn(100);
});
$('button').click(function(){
$plane.fadeIn(300);
$wrapper.removeClass('active');
$sent.fadeOut(250);
});
This Pen doesn't use any external CSS resources.