<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Bubbles_in_the_park%2C_Barcelona_%284983834120%29.jpg/636px-Bubbles_in_the_park%2C_Barcelona_%284983834120%29.jpg" >
  
<svg width="0%" height="0%">
  <defs>
    <clipPath id="myClip">
      <ellipse rx="50" ry="75" 
        cx="50" cy="150" 
        transform="rotate(-30)"/>
      <polygon 
        points="350,25  379,141 469,
                141 397,195
                423,281 350,230 277,281 303,195
                231,141 321,141" />

      <circle cx="350" cy="168" r="80"/>
    </clipPath>
  </defs>
</svg>

img {
  -webkit-clip-path: url(#myClip);
  clip-path: url(#myClip);
  width: 400px;
}