Responsive SVG mask with Twig

responsive-svg-mask.twig

{# 1 / viewbox axxis #}
{% set svgScaleX = 1/385.932 %}
{% set svgScaleY = 1/400 %}

<svg width="0" height="0" style="position: absolute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.932 400">
	<defs>
		<clipPath id="svg_mask-author" clipPathUnits="objectBoundingBox">
			<polygon transform="scale({{svgScaleX}} {{svgScaleY}})" points="115.34 395.26 150.56 400 181.75 398.05 156.4 397.1"/>
			<polygon transform="scale({{svgScaleX}} {{svgScaleY}})" points="369.79 351.46 369.89 373.08 368.74 398.01 371.04 370.81 371.04 339.25 369.79 306.47"/>
			<polygon transform="scale({{svgScaleX}} {{svgScaleY}})" points="373.19 290.36 373.29 311.98 373.19 326.02 374.44 309.71 374.44 278.15 374 266.46"/>
			<polygon transform="scale({{svgScaleX}} {{svgScaleY}})" points="211.63 .98 225.64 .04 209.28 0 177.81 2.33 166.19 3.64 190.07 2.67"/>
			<path transform="scale({{svgScaleX}} {{svgScaleY}})" d="M384.709,228.924c-0.639-0.144-1.836,0.419-2.161,1.005c-0.741,1.337,0.498,2.74,2.702,3.328 C386.29,230.832,386.165,229.253,384.709,228.924z"/>
		</clipPath>
	</defs>
</svg>