- var coords = [[508, 982], [618, 982], [670, 596], [581, 243], [412, 154], [331, 176], [206, 0], [59, 0], [59, 110], [243, 364], [243, 772], [346, 1103], [537, 1103]];
- var n = coords.length;
- var w = 736, h = 1103;
- var f = .05, d = Math.sqrt(w*w + h*h);
- var sw = f*d, hw = .5*sw;
- var p = +(hw*Math.sqrt(2)).toFixed(2);
- var w1 = w + 2*p, h1 = h + 2*p;

svg(viewBox=[-p, -p, w1, h1].join(' ') style=`--sw: ${+sw.toFixed(2)}px`)
  clipPath#cp
    polygon(points=coords.join(' '))
  image(xlink:href='https://pbs.twimg.com/media/DDFSsm2XYAI2-EE.jpg' width=w height=h clip-path='url(#cp)')
  polygon(points=coords.join(' '))
View Compiled
body {
	display: flex;
	margin: 0;
	height: 100vh;
	background: bisque
}

svg {
  margin: auto;
	display: block;
	width: 100%; max-height: 100vh;
}

polygon {
	fill: none;
	$c: hsl(random(360), 90%, 60%);
	stroke: rgba($c, .3);
	@supports (mix-blend-mode: multiply) { stroke: $c; }
	stroke-width: var(--sw);
	stroke-linecap: square;
	stroke-dasharray: 150, 260, 180, 130, 60, 450;
	mix-blend-mode: multiply
}

View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.