A Pen by teamgroove.

index.html

<div class="container">
 
</div>

Peek-Through-the-Background.markdown

Peek Through the Background

Was inspired by the recent CodeKit 2.0 landing page and wanted to recreate the graphic where the circuit board was being filled up. Turns out its as simple as stacking three backgrounds on top of one another.

Forked from Tim Teeling's Pen Peek Through the Background.

A Pen by teamgroove on CodePen.

License.

style.scss

html,body {
  /* Extra Styles */

  color: #425363;
  font-family: avenir, 'segoe ui', sans-serif;
}

@keyframes move {
	0% { 
		background-position: 0 60%, 0 50%;
	}
	100% { 
	  background-position: 0 60%, 100% 50%;
	}
}

.container {
  
	background-image: url('http://timteeling.com/dev/img/network.svg'), radial-gradient(200px 6000px at center, #ffffff 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0));
	background-size: 125%, 50% 100%;
  background-position: 0 60%, 0 100%;
  animation: move 15s linear infinite;
  
  /* Extra Styles */
  height: 1600px;
  /*box-shadow: inset 0 0 25px rgba(0,0,0,.5);*/
  border: 2px solid #263645;
  border-right: 0;
  border-left: 0;
  opacity: 0.3;
}


/* Extra Styles */
h1 {
  text-align: center;
  font-weight: 600;
  font-size: 1em;
}

p {
  text-align: center;
  font-size: .75em;
}

a {
  color: #ff8300;
}

$c: #58c;
$b: rgba(255,255,255,.2);
$t: rgba(255,255,255,.1);
$n: transparent;

html, body {
 
}

html {
  background-image: linear-gradient(to bottom, $c 0%, darken($c, 15%) 100%);
}

body {
  background-image: 
    linear-gradient(0deg,
      $n 0%, $n 9px,
      $b 9px, $b 10px, $n 10px, $n 19px,
      $t 19px, $t 20px, $n 20px, $n 29px,
      $t 29px, $t 30px, $n 30px, $n 39px,
      $t 39px, $t 40px, $n 40px, $n 49px,
      $t 49px, $t 50px),
    linear-gradient(-90deg,
      $n 0%, $n 9px,
      $b 9px, $b 10px, $n 10px, $n 19px,
      $t 19px, $t 20px, $n 20px, $n 29px,
      $t 29px, $t 30px, $n 30px, $n 39px,
      $t 39px, $t 40px, $n 40px, $n 49px,
      $t 49px, $t 50px);
  background-size: 50px 50px;
}