<div class="container">
  <a href="#" id="night">Night Mode</a>
  <div class="contain-tatooine">

    <div class="hex">
      <div class="background">
        <div class="piece"></div>
      </div>
    </div> 

    <h2>TATOOINE</h2>
    <h3>95'</h3>

  </div>
</div>
@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,800);
// Hex SVG code:
$hex-url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwMCAyMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjEzLjQ5OSw0OS44NzYgOTkuODg3LDAgMTg2LjI4NCw0OS44NzkgMTg2LjI4NCwxNDkuNjM1IDk5Ljg4NywxOTkuNTE2IDEzLjQ5OSwxNDkuNjMgIi8+Cjwvc3ZnPg==";


body {
  background-color: #FFF5DD;
  transition: background .3s ease;
  &.night-mode{
    background: #065C7C;
  }
} 

h2,h3, a{ 
  text-align: center;
  line-height: .2;
  color: #5C4023;
  font-family: 'Open Sans', helvetica, sans-serif;
  font-weight: 800; 
  -webkit-font-smoothing: antialiased; 
  transition: color .3s ease;
  
  .night-mode &{
    color: #C3E5FF;
  }
}
h2{
  margin-top: 2em;
}

.contain-tatooine{

  width:  200px;
  height: 200px;
  margin: 25vh auto;



  .hex {
    -webkit-mask-image: url($hex-url);
    -moz-mask-image: url($hex-url);
    background-size: contain;
    width:  200px;
    height: 200px;
    margin: 0 auto;
    display: block;
    transform: scale(1.03);
    transition: filter .3s ease;
    
    .night-mode &{
      -webkit-filter: invert(100%) brightness(120%); 
    }

    &:after{
      content:'';
      display: block;
      width:  20px;
      height: 200px;
      margin-left: 3px;
      position: absolute;
      z-index: 20;
      box-shadow:inset 0 0 0 20px #5C4023;
    }

    .background{

      background-size: contain;
      background: #5C4023;
      width: 100%;
      height: 100%;
      float: left;
      position: relative; 
      z-index: 1; 


      &:after, &:before{
        content: '';
        display: block; 
        position: absolute;
        z-index: 300;
        border-radius: 100%; 
      }
      &:before{
        width: 45px;
        height: 45px;
        background: #5C4023;
        margin: 130px 48px;
      }
      &:after{
        width: 40px;
        height: 14px;
        background: #5C4023;
        margin: 145px 62px;
        border-radius: 0;
      }

      .piece{
        width: 100%;
        height: 100%;
        float: left;
        position: relative;

        -webkit-mask-image: url($hex-url);
        -moz-mask-image: url($hex-url);

        @include linear-gradient(to bottom, 
          #FCE3A6 0%,
          #FCE3A6 20%,

          #EFC035 20%,
          #EFC035 40%, 

          #E77C2E 40%, 
          #E77C2E 60%, 

          #DF492F 60%,
          #DF492F 80%,

          #5C4023 80%, 
          #5C4023 100%);  

        transform: scale(.87); 
        &:after, &:before{
          content: '';
          display: block; 
          position: absolute;
          z-index: 2;
          border-radius: 100%;
        }
        &:before{
          width: 80px;
          height: 80px;
          @include linear-gradient(#DF492F 0% , #DF492F 80% , rgba(white, 0));   
          margin: 60px 0px;
          z-index: 1;
        }
        &:after{
          width: 40px;
          height: 40px;
          background: #DF492F;
          margin: 95px 100px;
        }
      }
    }
  }

}

#night{
  position: absolute;
  top: 1.5em;
  left: 1em;
  text-decoration: none;
  padding: 1em;
  border: 1px solid;
} 
View Compiled
// Attempt to re-create https://dribbble.com/shots/1036314-Tatooine-Badge

$(function(){
  triggerNight = $('#night')
  triggerNight.on('click', function(){
    $('body').toggleClass('night-mode')
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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