Logo sketch

index.slim

.logo <var>Beam</var>works

logo-sketch.markdown

Logo sketch

A Pen by Nick Matantsev on CodePen.

License.

style.less

@fgColor: #2980B9;
//@fgColor: #2C3E50;
//@fgColor: #E74C3C;
@bgColor: #ECF0F1;

html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: @bgColor;
  text-align: center;
  height: 100%;
  
  &::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 95%;
  }
}

.logo {
  @stripe: 1px;
  @stripeOff: 3px;
  
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-family: 'Days One', sans-serif;
  font-size: 50px;
  letter-spacing: -4px;
  color: @fgColor;
  white-space: nowrap;
  
  > var {
    font-style: normal;
    display: inline-block;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: -1px;
      bottom: -4px;
      background: repeating-linear-gradient(
        0,
        @bgColor,
        @bgColor @stripe,
        rgba(255, 255, 255, 0) @stripe,
        rgba(255, 255, 255, 0) @stripe+@stripeOff
      );
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Days+One" rel="stylesheet" />