Polygon

by dumptyd

HTML

<svg>
  <defs>
    <clipPath id="polygon"><polygon /></clipPath>
  </defs>
  <image width="200" height="250" xlink:href="https://picsum.photos/200/200/?random=2" clip-path="url(#polygon)" />
  Sorry, your browser does not support inline SVG.
</svg>

CSS

body { padding: 2rem; }
svg { height: 300px; width: 300px; }

JavaScript

/* 
w = width
h = height
wp = width percent
hp = height percent
offset = padding
*/
function generatePolygonCoords(w, h, wp = 60, hp = 30, offset = 10) {
  const [mulX, mulY] = [wp / 100, hp / 100];

  let points = [
    [0, 0],
    [w * mulX, 0],
    [w, h * mulY],
    [w, h],
    [w - (w * mulX), h],
    [0, h - (h * mulY)]
  ];
  if (offset) {
    points = points.map(p => p.map(c => c + offset));
  }
  const pointsStr = points.map(p => p.join(',')).join(' ');
  document.querySelector('polygon').setAttribute('points', pointsStr);
}

generatePolygonCoords(200, 250);