Untitled

dabblet.css

img {
	position: relative;
	font-size: 0;
}

img::before {
	content: attr(alt);
	display: grid;
	place-content: center;
	width: 100%;
	height: 100%;
	background: #f1f1f1;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	box-sizing: border-box;
}

img::after, img::before {
	padding: 1em;
	xmin-height: 10em;
	color: black;
	font-size: 16px;
}

img::after {
	content: attr(alt);
	transform: translate(-100%, -100%);
	display: inline-block;
}

dabblet.html

<img alt="Image description mmmmmmmmm mmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmm mmmmm mmmmmmmmmmmmm mmmmmmmmm mmmmmmmmmmmm mmmmm" src="">

<hr>
<style>
	svg.box {
		width: 320px;
		height: 240px;
	}
</style>
<svg viewBox="-5 -5 330 250" class="box">
	<style>
		path {
			stroke: #f06;
			stroke-width: 10px;
			fill: url(#img1);
	</style>
	<defs>
  		<pattern id="img1" patternUnits="userSpaceOnUse" width="320" height="240">
    		<image xlink:href="https://picsum.photos/320/240/" x="0" y="0" />
  		</pattern>
	</defs>
	<path d="M 20 0 h 280 a 20 20 0 0 1 20 20 v 190 l -160 30 l -160 -30 v -190 a 20 20 0 0 1 20 -20 z"></path>
</svg>

dabblet.js

// alert('Hello world!');

settings.json

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