ferry
  chimney
  waves
View Compiled
html,
body { height: 100%; text-align: center; }
$waves: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjE1NSIgaGVpZ2h0PSI4NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI4NyIgd2lkdGg9IjE1NyIgeT0iLTEiIHg9Ii0xIi8+CiAgPGcgZGlzcGxheT0ibm9uZSIgb3ZlcmZsb3c9InZpc2libGUiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIGlkPSJjYW52YXNHcmlkIj4KICAgPHJlY3QgZmlsbD0idXJsKCNncmlkcGF0dGVybikiIHN0cm9rZS13aWR0aD0iMCIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIvPgogIDwvZz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8ZyBpZD0ic3ZnXzkiPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z18xIiBjeT0iMzMuNSIgY3g9IjM0LjUiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxlbGxpcHNlIHJ5PSIyNiIgcng9IjI2IiBpZD0ic3ZnXzMiIGN5PSIzMy41IiBjeD0iNjMuODY4NDkzIiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z182IiBjeT0iMzMuNSIgY3g9IjkxLjcxODg4IiBzdHJva2Utd2lkdGg9IjEuNSIgZmlsbD0iI2ZmZiIvPgogICA8ZWxsaXBzZSByeT0iMjYiIHJ4PSIyNiIgaWQ9InN2Z183IiBjeT0iMzMuNSIgY3g9IjEyMS4wODczNzMiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSIjZmZmIi8+CiAgIDxyZWN0IGlkPSJzdmdfOCIgaGVpZ2h0PSI0NiIgd2lkdGg9IjE0MC4wMDAwMDYiIHk9IjMyLjUiIHg9IjcuNSIgc3Ryb2tlLXdpZHRoPSIxLjUiIGZpbGw9IiNmZmYiLz4KICA8L2c+CiA8L2c+Cjwvc3ZnPg==';

$colors : (
  accent: #f0cf3c,
  top-layer: #ecf0f1,
  bottom-layer: #2b2b2b
);

ferry {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 64px;
  height: 32px;
  border-radius: 3px 0 0 0;
  background-color: map-get($colors, bottom-layer);
  z-index: 1;
  animation: bop .48s ease-in-out alternate infinite;
  
  @keyframes bop {
    to {
      transform: translateY(-40%);
    }
  }
  
  box-shadow: 
    inset 0 -5px 0 0 #e74c3c,
    inset 0 -15px 0 0 #2b2b2b,
    inset 0 -17px 0 0 map-get($colors, accent);
  
  border-top: 4px solid map-get($colors, top-layer); 

  &:after {
    content: "";
    position: absolute;
    top: -18px;
    right: 0;
    display: block;
    width: 45px;
    height: 15px;
    background-color: map-get($colors, top-layer);
    z-index: 1;
    border-radius: 3px 3px 0 0;
  }
  
  &:before {
    content: "";
    position: absolute;
    transform: rotate(-25deg);
    top: -5px;
    left: -3px;
    width: 10px;
    height: 50px;
    background-color: white;
    
  }
  
  chimney {
    position: absolute;
    top: -35px;
    display: block;
    width: 17px;
    height: 22px;
    background-color: map-get($colors, accent);
    left: 32px;
    z-index: -1;
    transform: rotate(8deg);
    box-shadow: inset 0 3px 0 0 map-get($colors, bottom-layer) 
  }
  
  waves {
    position: absolute;
    bottom: -37px;
    display: block;
    width: 100px;
    height: 50px;
    background-image: url($waves);
    background-size: 133% 144%;
    animation: 
      sail 4s linear infinite;
    
    @keyframes sail {
      to {
        background-position: 400px 0;
      }
    }
    
  }
}
View Compiled
Run Pen

External CSS

  1. https://codepen.io/andersschmidt/pen/YPwwPN.scss

External JavaScript

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