Edit on
<div class="user" id="identity">
	<div class="identity">
		<img alt="" class="avatar" src="http://f.cl.ly/items/123l2x443v0Z2S0M1q2C/NZioPbNV.png">
	</div>
</div>  
<div class="user">
	<div class="identity">
		<img alt="" class="avatar" src="http://f.cl.ly/items/123l2x443v0Z2S0M1q2C/NZioPbNV.png">
	</div>
</div>  
<div class="user">
	<div class="identity">
		<img alt="" class="avatar" src="http://f.cl.ly/items/123l2x443v0Z2S0M1q2C/NZioPbNV.png">
	</div>
</div>  


@import "compass/css3";

@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}) {
      &::after {
        display: none;
        content: "#{polygon($points)};";
      }
      img {
        clip-path: url(#clip-#{$i});
        -webkit-clip-path: polygon($points);
        clip-path: polygon($points);
      }
    }
  }
}
View Compiled
var avatarStyles = window.getComputedStyle(document.querySelector(".user .avatar"))
var appliedClip = avatarStyles.getPropertyValue("clip-path");
if (/#clip/.test(appliedClip)&&!(avatarStyles.getPropertyValue("-webkit-clip-path"))) {

$(".user").each(function(i) {
 
  var path = window.getComputedStyle(this, ':after').getPropertyValue('content');
      
  svgPolygonPoints = 
    path
      .replace(/px/g, "")
      .replace(/polygon/, "")
      .replace(/\(/, "")
      .replace(/\)/, "")
      .replace(/\;/g, "")
      .replace(/\"/g, "")
      .replace(/\'/g, "");
      
  var div = $("<div>")
    .append("<svg width='0' height='0'><defs><clipPath id='clip-" + (i+1) +"'><polygon points='" + svgPolygonPoints +"' /></clipPath></defs></svg>");
  var svg = div.children("svg")[0];
  
  $("body").append(svg);
});
}
Rerun