37 lines
1.5 KiB
Markdown
37 lines
1.5 KiB
Markdown
# Backfrom (Project)
|
|
|
|
This project serves as repository for a SFB cookie cutter
|
|
|
|
Die Polyline-SVGs ([imprint-polyline.svg](imprint-polyline.svg), [outline-polyline.svg](outline-polyline.svg), [scale-down.svg](scale-down.svg)) wurden online erzeugt:
|
|
|
|
1. Code (reduziert auf benötigte Pfade) aus keksform.svg bei
|
|
https://observablehq.com/@dqgorelick/converting-svg-to-a-polyline reinkippen
|
|
2. Script anpassen (das vordefinierte-Scrript ist falsch und erzeugt auch keinen SVG-Code):
|
|
```js
|
|
{
|
|
const paths = document.querySelectorAll('#output-svg svg path')
|
|
// const paths = svg.children
|
|
const polylines = []
|
|
console.log(paths)
|
|
let tx = '<svg width="150mm" height="150mm" viewBox="0 0 150 150" version="1.1" id="linearized" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">';
|
|
for (let i=0; i<paths.length; i++) {
|
|
const totalLength = paths[i].getTotalLength();
|
|
const samples = 1000
|
|
const step = totalLength / samples
|
|
tx+="\n<polyline points=\"";
|
|
for (let pos=0; pos<=totalLength; pos+=step) {
|
|
let x = paths[i].getPointAtLength(pos).x.toFixed(3);
|
|
let y = paths[i].getPointAtLength(pos).y.toFixed(3);
|
|
tx = tx + `\n${x},${y}`;
|
|
}
|
|
tx+="\n\" style=\"fill:none;stroke:black;stroke-width:4\" />"
|
|
}
|
|
tx+="\n</svg>"
|
|
|
|
return html`
|
|
<h2>Run this to get your polyline</h2>
|
|
<p>Increase samples to get more definition</p>
|
|
<textarea name="paragraph_text" cols="50" rows="50">${tx}</textarea>`
|
|
}
|
|
```
|
|
3. Code ausführen |