A Pen by sync101.

7-Dragonballs.markdown

7 Dragonballs

In a game of Dragonballs, each player is provided with a Random Dragonball Hex to transpose to a glyph by tracing from ball 1 to ball 7. In the Original image: (http://images4.wikia.nocookie.net/__cb20120225164128/dragonball/images/thumb/6/63/Dragon_Balls_.png/1091px-Dragon_Balls_.png) the glyph would look like the mirror image of the letter G.

I love Dragonball Z! So I made the 7 dragonballs with SASS and HAML. What do you think? :)

A Pen by sync101 on CodePen.

License.

index.haml

%div.wrapper
    %div.ball
        %span.entypo-star.star-1
    %div.ball
        %span.entypo-star.star-1
        %span.entypo-star.star-2
    %div.ball
        %span.entypo-star.star-1
        %span.entypo-star.star-2
        %span.entypo-star.star-3
    %div.ball
        %span.entypo-star.star-1
        %span.entypo-star.star-2
        %span.entypo-star.star-3
        %span.entypo-star.star-4
    %div.ball
        %span.entypo-star.star-1
        %span.entypo-star.star-2
        %span.entypo-star.star-3
        %span.entypo-star.star-4
        %span.entypo-star.star-5
    %div.ball
        %span.entypo-star.star-1
        %span.entypo-star.star-2
        %span.entypo-star.star-3
        %span.entypo-star.star-4
        %span.entypo-star.star-5
        %span.entypo-star.star-6
    %div.ball
        %span.entypo-star.star-1
        %span.entypo-star.star-2
        %span.entypo-star.star-3
        %span.entypo-star.star-4
        %span.entypo-star.star-5
        %span.entypo-star.star-6
        %span.entypo-star.star-7

style.sass

@import "compass"
@import url(http://weloveiconfonts.com/api/?family=entypo)

/* entypo */
[class*="entypo-"]:before
  font-family: 'entypo', sans-serif

body
  background: #333
  
.wrapper
  height: 469px
  width: 500px
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto
  .ball
    border: 1px solid #f38b07
    border-radius: 50%
    box-shadow: 0 0 20px #fff
    width: 141px
    height: 141px
    position: absolute
    box-sizing: border-box
    background: radial-gradient(#f99003 45%, #ffd700 70%)
    overflow: hidden
    &:before
      content: ""
      height: 72px
      width: 72px
      background: linear-gradient(135deg, rgba(#FFF, 1) 20%, rgba(#FFF, 0))
      position: absolute
      border-radius: 50%
      top: 9px
      left: 13px
      z-index: 999999
    &:after
      content: ""
      position: absolute
      height: 72px
      width: 141px
      background: linear-gradient(0deg, rgba(#FFF, 1), rgba(#FFF, 0))
      transform: rotate(45deg)
      top: 50%
      left: -25%
    .entypo-star
      position: absolute
      height: 30px
      width: 30px
      text-align: center
      line-height: 30px
      color: #dc4c05
      font-size: 30px
      text-shadow: 0 0 10px #ffd700
    &:nth-child(1)
      top: 4px
      left: 81px
      .star-1
        top: 50%
        left: 50%
        margin-left: -15px
        margin-top: -15px
    &:nth-child(2)
      top: 4px
      left: 281px
      .star-1
        top: 35%
        left: 30%
      .star-2
        top: 50%
        left: 50%
    &:nth-child(3)
      top: 161px
      left: 348px
      .star-1
        top: 25%
        left: 39%
      .star-2
        top: 48%
        left: 25%
      .star-3
        top: 48%
        left: 52%
    &:nth-child(4)
      top: 320px
      left: 281px
      .star-1
        top: 27%
        left: 25%
      .star-2
        top: 27%
        left: 49%
      .star-3
        top: 54%
        left: 29%
      .star-4
        top: 54%
        left: 54%
    &:nth-child(5)
      top: 320px
      left: 81px
      .star-1
        top: 18%
        left: 40%
      .star-2
        top: 35%
        left: 61%
      .star-3
        top: 59%
        left: 51%
      .star-4
        top: 59%
        left: 28%
      .star-5
        top: 35%
        left: 20%
    &:nth-child(6)
      top: 161px
      left: 12px
      .star-1
        top: 16%
        left: 40%
      .star-2
        top: 35%
        left: 20%
      .star-3
        top: 40%
        left: 40%
      .star-4
        top: 35%
        left: 61%
      .star-5
        top: 58%
        left: 28%
      .star-6
        top: 58%
        left: 53%
    &:nth-child(7)
      top: 161px
      left: 177px
      .star-1
        top: 18%
        left: 27%
      .star-2
        top: 18%
        left: 55%
      .star-3
        top: 41%
        left: 15%
      .star-4
        top: 41%
        left: 40%
      .star-5
        top: 41%
        left: 66%
      .star-6
        top: 61%
        left: 27%
      .star-7
        top: 61%
        left: 55%