CodePen

HTML

            
              <link rel="stylesheet" href="style.css">

<div class="slingshot-logo">
  <div class="ring">
    <span></span>
  </div>
</div>

  
  <h2>Slingshot Icon by <a href="http://twitter.com/lukyvj">@LukyVj</a></h2>  
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
@mixin reset {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  float:left;
}

@mixin high{
  @include box-sizing(border-box);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Change the $size of the icon
$size: 300px;
$inner-size: $size/6.25;
$is: $inner-size;

$radius: 10 / 57 * $size;

/* Style
-------------------------------------------------------------------*/
html, body{
  overflow: hidden;
  background: #666666;
  @include high();
  @include reset();
  *{
    @include high();
  @include reset();
  }
  h2{
    text-align:center;
    position: absolute;
    width:100%;
    float:left;
    bottom: -1em;
    color: #efefef;
    
    a{color: #6BD7FD}
    
  }
}
.slingshot-logo{
  width: $size;
  height: $size;
  @include linear-gradient(45deg, #262425, #363636);
  border-radius: $radius;
  position: absolute; 
  left:0;
  right:0;
  margin:15em auto 0;


  .ring{
    content:'';
    display: block;
    width: $size - $size/2.777;
    height: $size - $size/2.777;
    margin: $size/05.555; 
    background: white;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0 0 1em rgba(black, .45);

    span{
      display: block;
      float: left;
      width: $is;
      height: $is;
      background: #27ACFC;
      box-shadow:
      $is 0 0 #BEF6E1,
      $is*2 0 0 #FFEBB0,
      $is*3 0 0 #FDB25A,

      0 $is 0 #38BCFB,
      $is $is 0 #AFEBC2,
      $is*2 $is 0 #FED38C,
      $is*3 $is 0 #FAAC3E,

      0 $is*2 0 #6BD7FD,
      $is $is*2 0 #FCE2AB,
      $is*2 $is*2 0 #FDA857,
      $is*3 $is*2 0 #F9603B,

      0 $is*3 0 #47B5FC,
      $is $is*3 0 #FCB791,
      $is*2 $is*3 0 #F26D99,
      $is*3 $is*3 0 #DD396A;
    }
  }
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // SlingShot icon
// http://lucasbonomi.com
// 2014 @LukyVj 
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................