JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<script src="https://cdn.jsdelivr.net/npm/svg-path-commander/dist/svg-path-commander.min.js"></script>
ORIGINAL paths
<svg width="10%" viewBox="0 0 101345 69750" class="original">
<path d="M47578 8517L49125 10645H52219L49125 6387L50672 4259L55313 10646H58407L50672 0L42938 10645H46032L47578 8517Z"></path><path d="M36844 23293L38391 25421H41485L38391 21163L39938 19035L44579 25422H47673L39938 14776L32204 25421H35298L36844 23293Z"></path><path d="M47578 16905L49125 14777H52219L49125 19035L50672 21163L55313 14776H58407L50672 25422L42938 14777H46032L47578 16905Z"></path><path d="M58313 23293L59860 25421H62954L59860 21163L61407 19035L66048 25422H69142L61407 14776L53673 25421H56767L58313 23293Z"></path><path d="M26109 38069L27656 40197H30750L27656 35939L29203 33811L33844 40198H36938L29203 29552L21469 40197H24563L26109 38069Z"></path><path d="M36844 31681L38391 29553H41485L38391 33811L39938 35939L44579 29552H47673L39938 40198L32204 29553H35298L36844 31681Z"></path><path d="M58313 31681L59860 29553H62954L59860 33811L61407 35939L66048 29552H69142L61407 40198L53673 29553H56767L58313 31681Z"></path><path d="M69047 38069L70594 40197H73688L70594 35939L72141 33811L76782 40198H79876L72141 29552L64407 40197H67501L69047 38069Z"></path><path d="M15375 52845L16922 54973H20016L16922 50715L18469 48587L23110 54974H26204L18469 44328L10735 54973H13829L15375 52845Z"></path><path d="M26109 46457L27656 44329H30750L27656 48587L29203 50715L33844 44328H36938L29203 54974L21469 44329H24563L26109 46457Z"></path><path d="M36844 52845L38391 54973H41485L38391 50715L39938 48587L44579 54974H47673L39938 44328L32204 54973H35298L36844 52845Z"></path><path d="M69047 46457L70594 44329H73688L70594 48587L72141 50715L76782 44328H79876L72141 54974L64407 44329H67501L69047 46457Z"></path><path d="M79782 52845L81329 54973H84423L81329 50715L82876 48587L87517 54974H90611L82876 44328L75142 54973H78236L79782 52845Z"></path><path d="M4640 67621L6187 69749H9281L6187 65491L7734 63363L12375 69750H15469L7734 59104L0...

JavaScript

import SVGPathCommander from 'https://cdn.jsdelivr.net/npm/svg-path-commander/dist/svg-path-commander.esm.min.js';

//take paths of original svg
const svg = document.querySelector('.original');
const pathsElements = Array.from(svg.children);
const paths = pathsElements.map(path => path.getAttribute("d"))

//calulcate total bounding box of the paths
const bbox = getBBox(paths)
//transform each path 

//this works
//const transformedPaths = paths.map(path => transformPath(path, {rotate :40 ,origin: [ bbox.cx, bbox.cy]}))

//this works as well
//onst transformedPaths = paths.map(path => transformPath(path, {flipX :true ,origin: [ bbox.cx, bbox.cy]}))

//this seems to work now
const transformedPaths = paths.map(path => transformPath(path, {scale :0.5 ,origin: [ bbox.cx, bbox.cy]}))


//update transformed svg with transformed paths
transformedPaths.forEach(function(path,i) {
document.querySelector(".transformed").innerHTML += `<path d="${path}" />`
})


//utilities
function transformPath(pathString, { flipX, flipY, rotate, scale, scaleX, scaleY, x, y, origin}) {
    const pathCommander = new SVGPathCommander(pathString)
    if (flipX) pathCommander.transform({rotate: [0, 180, 0], origin: origin });
    if (flipY) pathCommander.transform({ rotate: [180, 0, 0], origin: origin });
    if (rotate) pathCommander.transform({ rotate, origin: origin });
    if (scale || scaleX || scaleY) pathCommander.transform({ origin: origin, scale: [scaleX || scale || 1, scaleY || scale || 1] });
    if (x || y) pathCommander.transform({ translate: [x, y] });
    return pathCommander.toString()
 }

function getBBox(paths) {
       return SVGPathCommander.getPathBBox(
            paths.map(path => path).join(' '))
}