Center the demo

dabblet.css

div {	
  width: 279px;	
  height: 270px;	
}
div.blaat{
  mask-image: url(http://imgh.us/component.svg);
}
/* Center the demo */
html, body { 
  height: 100%; 
}
body {	
  display: flex;	
  justify-content: center;	
  align-items: center;
}

dabblet.html

<div class="blaat">
<img src="http://media.nu.nl/m/eg2xnfwafjhj_wd1280.jpg" width="280px" height="280px">
</div>

<div>
<svg version="1.1" id="subhomes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 419.6 408.2" xml:space="preserve">

    <defs>        <clipPath id="myClippingPath">            <path class="st0" d="M140.6,25.6C78.7,54.4,28.3,106.8,9.3,169.6c-12.6,41.6-9.4,81.4,6.2,114.8c23,49.2,72.9,84.5,139.3,90.9	c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.3,0.7,0.2,1.1l-8.6,28.5c40.3,3.6,81.4-4.9,119-22.4c65.9-30.7,120.9-89.3,142.2-159.8	c14.4-47.7,11-93.1-6.3-130.2C379.2,43.6,331.3,8.7,267.6,2.6C224.2-1.6,180.1,7.2,140.6,25.6"/>        </clipPath>    </defs>    <!-- the element you want to apply the clipPath to can be any SVG element -->    <g id="my-graphic" clip-path="url(#myClippingPath)">        <image width="100%" height="100%"     xlink:href="http://lorempixel.com/400/400" />    </g>

</svg>

</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}