2e:null 2f:["$","title",null,{"children":"DOM to SVG workbench | dleeftink | Observable"}] 34:T6a9,card = html``35:T5c5,card2 = html``36:T1491,viewof options = { const tabs = html` ` const readValues = () => { const elms = tabs.querySelectorAll('input,select'); return Array.from(elms).reduce((a, c) => { if (c.type === 'range') { a[c.id] = c.valueAsNumber; } else { a[c.id] = c.value; } return a; }, {}); }; tabs.oninput = e => { e && e.preventDefault(); tabs.value = readValues(); }; tabs.value = readValues(); return tabs; }37:T63f,{ let svg = d3.create('svg').attr('width',512).attr('height',140) let filter = new svgFilter() let noise = filter .append('turbulence') .attr('type', 'fractalNoise') .attr('baseFrequency', 0.1) .attr('numOctaves', 5) .attr('seed',20) .attr('stitchTiles','stitch') .attr('result','noise') let morph = filter .append('morphology') .in('noise') .attr('operator','dilate') .attr('radius',64) .attr('result','morph') let edges = filter .append('convolve') .in('morph') .attr('preserveAlpha', 'true') .attr('kernelMatrix', `-1 -1 -1 -1 8.01 -1 -1 -1 -1`) .attr('result','edges') /* let light = filter //new svgFilter() .append('diffuse') .attr('lighting-color','#fff') .attr('surfaceScale',10) .attr('in','morph') .attr('result','light') d3.select(light, 'feDiffuseLighting').node().append('feDistantLight').attr('azimuth', 45).attr('elevation', 71)*/ /* let filtID = 'filter' let filter = svg.append('defs') .append('filter') .attr('id',filtID) .append("feTurbulence") .attr('type', 'turbulence') .attr('baseFrequency', 0.04) .attr('numOctaves', 5) .attr('result','noise') .attr('stitchTiles','stitch')*/ svg.append('defs').append(()=>filter.filter.node()) svg.append('rect').attr('width','100%').attr('height','100%').attr('filter',filter)//'url(\#'+filtID+')') return html`${format(svg.node().outerHTML).replace('DiffuseLightning','DiffuseLighting')}`.outerHTML }38:T412,fontline = async (cssFont) => { var fontFile = await fetch(cssFont).then(d => d.text()); var fontList = document .createElement("style"); fontList .innerText = fontFile; document.head .appendChild(fontList); let fontMeta = Array .from(fontList.sheet.rules) .map(d => { d = d.style; return { [ d.fontFamily.replace(/"/g, "")]: { weight: d.fontWeight, style: d.fontStyle, src: d.src, display: d.fontDisplay, range: d.unicodeRange, uri: d.src.replace(/.*url\(['"](.+?)['"].*/g, "$1")}}; }); let fontData = Promise.all( fontMeta.map(f => toDataURL(f[Object.keys(f)].uri))) .then(r => r.map((d, i) => { fontList.sheet.rules[i].style.src = `url(${d}) format('${d.split(/(font\/|;)/g)[2]}')` return fontList.sheet.rules[i] })) .then( d=> Object.assign( { font: Object.keys(fontMeta[0])}, { meta:fontMeta }, { data: [...d].map(f=>f.cssText).join('\n')}) ) return fontData }39:[] 32:{"id":"c5e4189fb20fbcf5","slug":"svg-workbench","title":"DOM to SVG workbench","thumbnail":"5a8c1ad92d1822a89978a9588ef8ac3ae28be8fea3ba9cd645021a09a8003e14","access_level":"unlisted","create_time":"$D2022-03-17T21:44:12.677Z","update_time":"$D2024-04-12T09:56:09.040Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"10e70264ea4e147e","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":"starter_2024"},"version":8669,"publish_version":8669,"role":null,"authored":false,"authors":[{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}],"members":[{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"DOM to SVG workbench","cells":[{"id":0,"value":"# DOM to SVG workbench\n## Print layouting using the web","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":493,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2045,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8400,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8662,"value":"filthy('brightness(300%)')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7580,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8148,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8180,"value":"{ let target = document.querySelector(\"#target\");\n let colorise = document.querySelector(\"#huePhase\");\n \n target.setAttribute('baseFrequency',`${options.xFreq/options.xScale} ${options.yFreq/options.yScale}`);\n target.setAttribute('type',options.type)\n colorise.setAttribute(\"values\", options.colorPhase)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7200,"value":"{ let upd = width\n let elm = html`\n

\n Code signature\n Using this function is easy. Just make sure that you pass some data.\n b\n c\n d`\n \n document.body.appendChild(elm) \n let raw = ds.elementToSVG(elm);\n document.body.removeChild(elm);\n \n // remove empty groups\n [...raw.querySelectorAll('g')].forEach(d=>d.innerHTML.length === 0 ? d.remove() : '') \n\n let svg = html`${format(new XMLSerializer().serializeToString(raw))}`;\n\n return svg //d3.select(xml).select('#div1').node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6920,"value":"lead = {\n let elm = md`# Code signature\nUsing this function is easy.\n\n~~~ javascript\nimport { code,sig } from \"dleeftink\"\nlet code = new Code\n code.pack({data:array})\n~~~\n~~~ javascript\nlet output = code;\nreturn ouput;\n~~~\n`\n\nd3.select(elm).style('text-align','left')\n await elm\n .querySelectorAll('code')\n .forEach(el => { hs\n .highlightElement(el) });\n \n document.body.appendChild(elm) \n let svg = ds.elementToSVG(elm)\n document.body.removeChild(elm) \n \n let xml = html`${format(new XMLSerializer().serializeToString(svg))}`\n\n return xml //d3.select(xml).select('#div1').node()\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6700,"value":"fontain({font:'https://fonts.cdnfonts.com/css/kraboudja'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6694,"value":"fontain = async ({font}) => {\n \n let fontLoad = font ? \n await fontline(font): \n { font: ['Arial'], data:'' }\n\n let fontData = \n html`