svg = html`${await file.text()}`
svg.children[0].getAttribute('d')
simplifyPath = (pathString) => {
const makerModel = makerjs.importer.fromSVGPathData(pathString);
makerjs.model.originate(makerModel);
makerjs.model.simplify(makerModel);
const svg = html`${makerjs.exporter.toSVG(makerModel)}`;
return svg.querySelector('path').getAttribute('d');
}
examplePathInput = svg.children[47].getAttribute('d')
inputLength = examplePathInput.length
html`<svg width="100%" height="100%">
<path fill="none" stroke="rgba(0,0,0,1)" stroke-width="1" d="${examplePathInput}"></path>
</svg>`
exampleOutput = simplifyPath(examplePathInput)
exampleOutputLength = exampleOutput.length
html`<svg width="100%" height="600px">
<path fill="none" stroke="rgba(0,0,0,1)" stroke-width="1" d="${exampleOutput}"></path>
</svg>`
simplifiedPaths = {
// const logo= []
let clone = svg.cloneNode(true);
let v2children = Array.from(clone.children)
for (let i=0; i < v2children.length; i++) {
let bbox = Array.from(svg.children)[i].getBBox()
let path1 = v2children[i].getAttribute('d')
let path2 = await simplifyPath(path1)
v2children[i].setAttribute("d", path2 )
v2children[i].setAttribute('transform',`translate(${bbox.x}, ${bbox.y})`)
}
return clone
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
