// Paths

-left = "M269.8,250.5 c-57.2,57.2-160.7,150.6-243.9,81.7c-37.7-31.3-26-83.8,14.6-105c60.7-31.7,138,2.2,182.7,45.8"
-right = "M301,317.1 c57.2-57.2,160.5-150.4,243.6-81.5c37.7,31.2,26,83.8-14.5,105c-60.7,31.7-137.9-2.3-182.6-45.8"
-top = "M318.3,269.8 C261,212.6,167.6,109.2,236.6,25.9c31.3-37.7,83.8-26,105,14.6c31.7,60.7-2.2,138-45.8,182.7"
-bttm = "M253.3,299.1 c57.2,57.2,150.4,160.5,81.5,243.6c-31.2,37.7-83.8,26-105-14.5c-31.7-60.7,2.3-137.9,45.8-182.6"
-inn = "M516,652.1 C622.7,593.2,695,479.5,695,349C695,157.9,540.1,3,349,3S3,157.9,3,349c0,129.7,71.4,242.7,177,302"

#box
  #logo
    svg(viewBox="0 0 570 570")
      path.left(d=left)
      path.right(d=right)
      path.top(d=top)
      path.bttm(d=bttm)
  #inside
    //circle
    svg(viewBox="0 0 698 655")
      path.in(d=inn)
  #outside
    //Circle
    svg(viewBox="0 0 930 930")
      circle.out(cx="465" cy="465" r="462")    
      //Filters
      filter#f1(x="-10%" y="-10%" width="220%" height="200%")
        //DropShadow
        feOffset(result="offOut" in="SourceGraphic" dx="0" dy="0")
        feColorMatrix(result = "matrixOut" in = "offOut" type = "matrix" values = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0")
        feGaussianBlur(result="blurOut" in="matrixOut" stdDeviation="10")
        feBlend(in="SourceGraphic" in2="blurOut" mode="normal")
      filter#f2(x="-10%" y="-10%" width="140%" height="140%")
        //DropShadow
        feOffset(result="offOut" in="SourceGraphic" dx="0" dy="0")
        feColorMatrix(result = "matrixOut" in = "offOut" type = "matrix" values = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0")
        feGaussianBlur(result="blurOut" in="matrixOut" stdDeviation="6")
        feBlend(in="SourceGraphic" in2="blurOut" mode="normal")
#text
  h1 GOOGLE VENTURES 
#est EST 2009
#credit dribbble shot : 
  a(href="http://dribbble.com/shots/2029996-Google-Ventures-Embroidered-Badge" target="_blank") daniel burka
#bg

// Font
@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400,700);

// Color

$r: #DE4931;
$g: #019873;
$b: #3497DA;
$y: #F8CB3B;

// Mixin

@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

// Circle Text

@for $i from 1 through 15 {
.char#{$i} {
transform: rotate(($i*16)+deg);
animation-delay: $i / 11 + 2.3+s;
}
}

// Containers

#box {
@include center;
width:700px;
height:700px;
background: rgba(51, 51, 51,0.74);
border-radius: 50%;
border: solid 8px rgba(68, 68, 68,0.6);
box-shadow: 0 0 40px rgba(0,0,0,0.6);
z-index:1;
opacity:0;
animation: show 1s 0.5s ease-in-out forwards;
}

#logo {
@include center;
width:400px;
height:400px;
opacity: 0.86;
}

#inside {
@include center;
width:500px;
height:500px;  
margin-top: -15px;
opacity: 0.6;
}

#outside {
@include center;
width:700px;
height:700px;  
opacity: 0;
animation: flash 1.5s 0.5s linear forwards;
}
// Paths
svg {width:100%;height:100%;overflow:visible;}

.left, .right, .top, .bttm {
stroke-width: 6px;
fill: none;  
opacity: 0;
stroke-dasharray: 700;
stroke-dashoffset: 700;
stroke-linecap: round;
animation: draw 0.5s cubic-bezier(.6,.23,1,1) forwards;
filter: url(#f2);
}

.top {
stroke: $r;
animation-delay: 2.05s;  
}

.left {
stroke: $y;
animation-delay: 2.7s;
}

.bttm {
stroke: $g;
animation-delay: 3.4s;
}

.right {
stroke: $b;
animation-delay: 4.05s;
}


.in, .out {
fill: none;
stroke: #CBCED3;
stroke-width: 6;
stroke-linecap: round;
}

.in {
filter: url(#f1);
padding: 20px;
opacity: 0;
stroke-dasharray: 1900;
stroke-dashoffset: 1900;
animation: draw2 2.5s 2s cubic-bezier(.6,.23,1,1) forwards;
}

.out {
filter: url(#f1);
}

// Circle Text

#text {
@include center;
margin: 202px 0 0 -235px;
border-radius: 50%;
transform: rotate(-129deg);
color: transparent;
z-index:1;
}

h1 span {
font: 44px Quicksand;
text-shadow:
-2px -2px 4px rgba(0,0,0,0.3),  
2px -2px 4px rgba(0,0,0,0.3),
-2px 2px 4px rgba(0,0,0,0.3),
2px 2px 4px rgba(0,0,0,0.3);
font-weight: 400;
height: 326px;
position: absolute;
width: 30px;
color: #FFF;
left: 0;
top: 0;
transform-origin: bottom center;
vertical-align:baseline;
opacity:0;
animation: flash 1.5s cubic-bezier(.6,.23,1,1) forwards;
}

// Bottom Text

#est {
@include center;
font: 42px Quicksand;
font-weight: 400;
letter-spacing: 4px;
color: #FFF; 
margin-top: 265px;
margin-left: 4px;
opacity: 0;
z-index: 1;
animation: flash 1s ease-in forwards;
animation-delay: 3.9s;
}

#credit {
position: absolute;
right:10px;
bottom:10px;
font: 14px Quicksand;
color: #444;
z-index: 1;
}

#credit a {
color: #444;
text-decoration: none;
}

#credit a:hover {
color:#555;
}
//
#bg {
position:absolute;
width: 100%;
height: 100%;
background:url(http://pressdsgn.com/codepen/bg01.jpg);
opacity:0;
z-index: 0;
animation: show 1.5s 1.5s ease-in-out forwards;
}

body {overflow:hidden;padding:0;margin:0;background:#151515;}

// Animations

@keyframes draw {
0% {opacity: 1;stroke-dashoffset: 700;}
100% {opacity: 1;stroke-dashoffset: 0;}
}

@keyframes draw2 {
0% {opacity: 1;stroke-dashoffset: -1900;}
100% {opacity: 1;stroke-dashoffset: 0;}
}

@keyframes flash {
0% {opacity:0;}
100% {opacity:0.7;}
}

@keyframes show {
0% {opacity:0;}
100% {opacity:1;}
}

$("h1").lettering(); //lettering.js

//Based on Artwork by Daniel Burka
//dribbble.com/shots/2029996-Google-Ventures-Embroidered-Badge

//Resources
//css-tricks.com/set-text-on-a-circle
//css-tricks.com/svg-line-animation-works
//w3schools.com/svg/svg_filters_intro.asp