<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="st1" d="M178.6 348.5l1547-221-750.5 1079.9-333.6-362.7-179.3 120.9L433 632z"/>
        <path class="st1" 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="st2" d="M147.4 260.9l1547-221-750.6 1080-333.6-362.8L430.9 878l-29.2-333.6z"/>
      <path class="st3" 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="st3" 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="st3" 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;


.st0{
    fill:$shadow;
    opacity:0.5;
} 
.st2{fill: $white;} 
.st3{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: calc(50% - 112.5px);
    top: 150px;
    color: $lightblue;
    letter-spacing: 4.3px;
    display: none;
  }
  button {
    position: absolute;
    left: calc(50% - 50px);
    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%;
    motion-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% {
      motion-offset: 0;
      opacity: 0;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      motion-offset: 100%;
      transform: rotate(30deg);
    }
  }
}
/* Only in Chrome */


/* Inspiration from https://dribbble.com/shots/2508561-Invitation-Sent */

$('svg').click(function(){
    $('.wrapper').toggleClass('active'); 
    if($('.wrapper').hasClass('active')) {
      $(this).fadeOut(1000);
      $('h2').delay(1000).fadeIn(100);
    }   
});

$('button').click(function(){
    $('svg').fadeIn(300);
  if($('.wrapper').hasClass('active')) {
      $('.wrapper').removeClass('active');
    $('h2').fadeOut(250);
    }   
});


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js