Converts absolute SVG coordinates to relative ones in order to create a responsive SVG mask that can be applied using CSS clip-path

absoluteToRelativePath.js

"M78,0 L78.8918331,0.216238031 C80.7796201,0.673959707 82.3332983,2.08608489 83.0043945,3.9000001 C83.0192652,3.94019419 83.0330484,3.98600042 83.0457442,4.03741878 L83.0390876,7.96097867 C83.0390545,20.7025492 93.3365052,31 106.039054,31 L268.960946,31 C281.663495,31 291.960946,20.7025492 291.960946,8 C291.960946,7.99147462 291.95879,6.71458263 291.954479,4.16932405 C291.954323,4.07746778 291.970341,3.98630146 292.001801,3.9000001 C292.667785,2.07301174 294.211271,0.676168263 296.108167,0.216238031 L297,0 L335,0 C357.09139,-4.05812251e-15 375,17.90861 375,40 L375,772 C375,794.09139 357.09139,812 335,812 L40,812 C17.90861,812 2.705415e-15,794.09139 0,772 L0,40 C-2.705415e-15,17.90861 17.90861,4.05812251e-15 40,0 L78,0 Z"
	.split(' ')
	.reduce((acc, entry) => {

		// Remove the first character from a string
		const removeChars = (str = '') => str.replace(/^[A-Z]/g,'')

		// Divide a value with the current divider
		const divide = (dividers) => (value, index) => value / dividers[index]

		// Replace current old value with the new value in current original value
		const replace = (originalValues, oldValues) => (newValue, index) => originalValues[index].replace(oldValues[index], newValue)

		// Check if item is null, undefined or empty
		const empty = (item) => (item == null || item.trim() === '')

		// Width and height of the SVG
		const size = [375, 812]

		// Split into x and y
		const original = entry.split(',')

		// Remove chars from x and y
		const cleaned = original.map(removeChars)

		// Check if x or y is empty
		const isEmpty = cleaned.some(empty)

		// Do nothing when the entry contains empty x and y value
		if (isEmpty === true) {
			acc.push(entry)
			return acc
		}

		// Convert x and y to floats so we can divide them
		const converted = cleaned.map(parseFloat)

		// Divide x and y by the size of the SVG so we get values between 0 and 1
		const divided = converted.map(divide(size))

		// Replace old x and y with new x and y based on the original values to re-include the first character
		const replaced = divided.map(replace(original, cleaned))

		// Rebuild SVG coordinate declaration
		const next = replaced.join(',')

		acc.push(next)
		return acc

	}, [])
	.join(' ')

this was very helpful, thanks!