A CodePen by Tim Pietrusky. MuleSoft logo - The logo of [mulesoft.com](http://mulesoft.com) as one-element. Why? I'm using MuleESB and MuleStudio right now and I love the logo. This is the result :D

index.html

<h1>MuleSoft</h1>

script.js

/**
  MuleSoft logo
  
  The logo of mulesoft.com in CSS as one-element. 
  
  Why? I'm using MuleESB and MuleStudio right now and 
  I love the logo. This is the result :D
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

style.scss

@import "compass";
body {
  background: darken(#143f50, 10%);
  color: #fff;
  font: 1em sans-serif;
}

$mule-color-alpha: #d2d3d4;
$mule-color-beta: #00bae2;
$mule-color-gamma: #00638e;
$mule-ear-size: .85em;

h1 {
  position: relative;
  font: normal 3em/1.55em sans-serif;
  padding: 0 0 0 1.25em;
  margin:.5em auto 0 auto;
  width:2em;
  
  &:hover:before {
    box-shadow:
      0 0 0 .04em darken($mule-color-alpha, 40%),
      0 0 .25em $mule-color-beta
    ;
  }
  
  /* top triangle, mule body, circle */
  &:before {
    position: absolute;
    content: '';
    left: -.5em;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    box-shadow: 0 0 0 .04em darken($mule-color-alpha, 40%);
      
    @include background(
      /* top triangle */
      linear-gradient(125deg, $mule-color-alpha 20%, transparent 20%),
      linear-gradient(-125deg, $mule-color-alpha 20%, transparent 20%),
      
      /* mule body */
      linear-gradient(105deg, transparent 92%, $mule-color-alpha 92%),
      linear-gradient(-105deg, transparent 92%, $mule-color-alpha 92%),
      linear-gradient(90deg, transparent 40%, $mule-color-alpha 40%, $mule-color-alpha 60%, transparent 60%),
      
      /* circle */
      radial-gradient(circle, $mule-color-beta 0%, $mule-color-gamma 45%, $mule-color-gamma 58%, $mule-color-alpha 60%)
    );
    
    background-position:
      /* top triangle */
      .745em 0,
      .745em 0,
        
      /* mule body */
      .625em 0,
      .865em 0,
      0 90%,
      0 0,
       
      /* circle */
      0 0
    ;
      
    background-size:
      /* top triangle */
      100% 100%,
      100% 100%,
      
      /* mule body */
      100% 100%,
      100% 100%,
      100% 30%,
      100% 100%,
      
      /* circle */
      100% 100%
    ;
      
    background-repeat:
      /* top triangle */
      repeat,
      repeat,
      
      /* mule body */
      repeat,
      repeat,
      no-repeat,
      no-repeat,
        
      /* circle */
      repeat
    ;
  }
  
  /* mule ears */
  &:after {
    position: absolute;
    content: '';
    top:.725em;
    left:-.165em;
    width: $mule-ear-size;
    height: $mule-ear-size;
    margin: (-$mule-ear-size / 2) 0 0 0;
    border-radius: 50%;
      
    @include background(
      /* left ear */
      linear-gradient(-125deg, transparent 70%, $mule-color-alpha 70%, $mule-color-alpha 100%),
      
      /* right ear */
      linear-gradient(125deg, transparent 70%, $mule-color-alpha 70%, $mule-color-alpha 100%)
    );
  }
}