Testing clip path in images

dabblet.css

/**
 * Testing clip path in images
 */

img {
	max-width: 25%;
}
.figure1 {
	clip-path: polygon(20% 15%, 50% 0, 80% 15%,100% 50%,80% 85%, 50% 100%, 20% 85%,0 50%);
}
.figure2 {
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

.figure3 {
  clip-path: circle(35% at 50% 50%);
}

.text {
	width: 15%;
	display: inline-block;	
	clip-path: circle(35% at 50% 50%);
}

dabblet.html

<img class="figure1" src="http://www.planwallpaper.com/static/images/814342-free-wallpaper.jpg">
<img class="figure2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTod1s1WHjnKJJR8jXIJeU6L6QmhBbT1sfWOjnpQ_4-4Q8hXq_e2g">
<img class="figure3" src="http://2.bp.blogspot.com/-20Y5RpkSJBQ/UP1wZajmoQI/AAAAAAAACNM/yZJ41dsPx0E/s1600/Flower+Wallpaper+Free+Download.jpg">
<div class="text">
Texto de ejemplo al que aplicar clip-path. 
Texto de ejemplo al que aplicar clip-path. 
Texto de ejemplo al que aplicar clip-path. 
Texto de ejemplo al que aplicar clip-path. 
Texto de ejemplo al que aplicar clip-path. 
Texto de ejemplo al que aplicar clip-path. 
Texto de ejemplo al que aplicar clip-path. </div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}