A CodePen by Tim Pietrusky. Skynet - The final logo for my project. [Original background image](http://visuellegedanken.de/2012-11-01/sportplatz/) by Martin Wolf. I transformed Martins image into a blurry background with Photoshop.

index.html

<section>
  <h1>Skynet</h1>
</section>

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

script.js

/**
  Skynet
  
  The final logo for my project. 
  
  Original background image by Martin Wolf
  http://visuellegedanken.de/2012-11-01/sportplatz/
  
  I transformed Martins image into a 
  blurry background with Photoshop. 
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Unica+One);

$height: 10em;
$color-alpha: rgba(darken(#81c4b3, 2%), .85);
$color-beta: #fff;
$color-gamma: rgba($color-alpha, .5);
$color-delta: rgba(255, 255, 255, .4);

body {
  margin:0;
  overflow-x:hidden;
  background: #666;
  font-size:1.5em;
}

h1 {
  position:relative;
  font: 5em "Unica One", sans-serif;
  line-height:2em;
  margin:0;
  color:inherit;
  @include transition(
    transform .25s ease-in
  );
    
  &:before {
    position:absolute;
    bottom:-3%;
    left:0;
    opacity:.1;
    font-size:5em;
  }
}


section {
  position:absolute;
  top:50%;
  left:50%;
  margin:(-$height/2) 0 0 -50%;
  height: $height;
  width: 100%;
  text-align:center;
  background:$color-alpha;
  color:$color-beta;
  
  &:before,
  &:after {
    position:absolute;
    content:'';
    left:0;
    top:-1em;
    width:50%;
    height:2em;
    z-index:2;
    background:rgba(255, 255, 255, .5);
    border-bottom-right-radius:1.5em;
    @include background(
      linear-gradient(45deg, rgba(#ccc, .5) 50%, rgba(#fff, .8) 50%),
      $color-delta
    );
  }
    
  &:after {
    left:auto;
    right:0;
    top:auto;
    bottom:-1em;
    border-bottom-right-radius:0;
    border-top-left-radius:1.5em;
    @include background(
      linear-gradient(-45deg, rgba(#ccc, .5) 50%, rgba(#fff, .8) 50%),
      $color-delta
    );
  }
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  min-width: 100%;
  min-height: 100%;
  opacity:.8;
  background:
    url(http://s.cdpn.io/1202/skynet_800x600.jpg);
  background-size:100%;
  background-position:0 50%;
  
  @include filter(grayscale(70%));
  
  &:after {
    $radius:18em;
    position:fixed;
    top:50%;
    left:50%;
    width:$radius;
    height:$radius;
    content:'';
    margin:(-$radius/2) 0 0 (-$radius/2);
    border-radius:50%;
    background:rgba(255, 255, 255, .45);
    box-shadow:
        0 0 0 .5em rgba(255, 255, 255, .5),
        0 0 0 1.5em rgba(255, 255, 255, .5)
    ;
  }
}