text:  Hexagon with clip-path by Chris Coyier (@chriscoyier) on CodePen. 200 Points by Chris Coyier (@chriscoyier) on CodePen. the Pen Sketchy Avatars by Chris Coyier (@chriscoyier) on CodePen., ""); // To get this to actually work, create a <div> instead with this inside, see below.>
  Interessting, but still too complicated for an effect that you can easilly get using transparent pictures.
  But if you want all avatars to be uniform, can you really expect all of your users to upload transparent pictures that mask the image correctly? Do you want to be hassled with making sure every time you upload your own avatar that it is masked the way it’s supposed to be? This solution is actually a lot more convenient.
  I agree…an interesting proof of concept…but complex…for present day for full cross browser support standard transparent images would be best…but for the future this is something to look at going forward…
  This and also CSS masks…look promising…but again FireFox only supports inline SVG as a mask source while the others (Chrome, Opera, Safari) can take an image mask in a PNG or JPG format…and again IE no support at all… (source: ) …
  Interesting post…thanks for sharing…
  One possible usecase for this would be to use the same created polygons as a CSS Shape on the picture to make some text flow around it, which you can’t do with a transparent picture.
  Like so:
  See the Pen MYYWrg by Karsten Buckstegge (@MrBambule) on CodePen.
  I like the comeback of CSS Tricks here. For a while things got pretty serious around here, not as many fun-but-only-vaguely-useful articles. Good to have the tricks back! :)
  It doesn’t work because you’re using JQuery. JQuery doesn’t know how to create elements in the SVG namespace, or which elements should be in the SVG namespace. Which means that it creates a bunch of elements for you which look correct in your DOM inspector — they have the correct tag names — but they are actually all
  HTMLUnknownElementin the DOM. And so you can’t actually use them as SVG content.
  In contrast, when you copy and paste that markkup into a separate file, that file will get read by the HTML5 parser, which will recognize all <svg> elements and their children as being, well,
  SVGElements.
  You have two options:
  document.createElementNS("", "svg")(and the same for their children).
  .innerHTMLproperty of the div element, or the
  .append()JQuery method, (c) extracting the SVG element from the container div.
  I use option 2 here. It gets the clip path working in Firefox:
  Nice! I’ll chalk that up as the most important thing I learned today.
  …also just updated the pen, so that it only injects the SVG elements when they are actually going to be used.
  Almost, anyway. It won’t create the SVG if the final clip path polygon function is used (hypothetical so far), or if the webkit-clip-path property is recognized (Chrome or Opera). But it still creates them for Internet Explorer, which recognizes the basic url form of clip-path as a valid style declaration, but doesn’t apply it to non-SVG elements.
  This is pretty cool. Unfortunately, 99.9% of users won’t even notice or care that the edges look different. So, you might as well do it the easy way with images/SVG.
  Nice .Very interesting , unfortunetely I have never been good in math but it doesn`t look difficult .
  Thanks for sharing this .
  svgPolygonPoints ist added to the global window object. Not very nice.
  btw, if you don’t know there is cross browser clip path generator
  Or your could try cough cough
  Nice post, good comments. I love calculated images, especially when trigonometry and randomness comes in to play.
  I don’t think this is working on Windows 8 on Chrome. I just dragged an image over the other one on codepen and it overlayed identically.
  loved it.. nice codding… you make this easy after such an explanation!