@function rand($min, $max) {
  @return random($max - $min) + $min;
}

//////////////////////////////////
// Avatars
//////////////////////////////////
$w: 		120px;    // Overall width

@function sketchAvatar() {
  $n: 	  60;     // Number of points
  $lower: -80;    // Lower variance
  $upper: 80;     // Upper variance

  $points: ();

  @for $i from 0 through $n {
    $points: append($points, ($w / 2) * (1 + cos((2 * pi() * $i / $n))) + (rand($lower, $upper) / 100) ($w / 2) * (1 + sin((2 * pi() * $i / $n))), comma);
  } 
  
  @return $points;
}

.user {
	width: $w;
	height: $w;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;

	.identity {
		position: relative;
		width: 100%;

		img {
				display: block;
          width: 100%;
			}

			&.sketch {
				background: #fff;
				border: 2px solid #fff;
				border-radius: 50%;
				bottom: 0;
				box-shadow: 0 1px 2px rgba(0,0,0,.4);
				height: 40px;
				position: absolute;
				right: 0;
				width: 40px;
			}
		}
  
  // Generate a bunch of unique shapes
  @for $i from 1 to 11 {
    $points: sketchAvatar();
    
  	&:nth-child(#{$i}) {
      img { 
        -moz-clip-path: polygon($points);
        -ms-clip-path: polygon($points);
        -o-clip-path: polygon($points);
        -webkit-clip-path: polygon($points); 
      }
    }
  }
}