2c:null 2d:["$","title",null,{"children":"Animated SVG (2D) from X3D Meshes | Christophe Yamahata | Observable"}] 32:Td4f,viewof playAnimation = { const previous = this ? this.value : null; const prevAnimate = previous?.animate ?? true; const prevSpeed = previous?.speed ?? 1; const prevPhase = previous?.phase ?? 0.5; const speeds = [0.5, 1, 2]; const speedLabels = ["0.5×", "1×", "2×"]; const prevSpeedIndex = Math.max(0, speeds.indexOf(prevSpeed)); const animateInput = Inputs.toggle({ label: "Animate", value: prevAnimate }); const speedSlider = htl.html``; const speedDisplay = htl.html`${speedLabels[prevSpeedIndex]}`; const speedContainer = htl.html`

Speed: ${speedSlider} ${speedDisplay}

`; const phaseSlider = htl.html``; const phaseDisplay = htl.html`${Number(prevPhase).toFixed(1)}`; const phaseContainer = htl.html`

Position (0 = X3D #1, 1 = X3D #2): ${phaseSlider} ${phaseDisplay}

`; const container = htl.html`

${animateInput}

${speedContainer}

${phaseContainer}

`; function updateState() { const isAnimating = animateInput.value; phaseSlider.disabled = isAnimating; phaseContainer.style.opacity = isAnimating ? "0.35" : "1"; phaseContainer.style.pointerEvents = isAnimating ? "none" : "auto"; speedSlider.disabled = !isAnimating; speedContainer.style.opacity = isAnimating ? "1" : "0.35"; speedContainer.style.pointerEvents = isAnimating ? "auto" : "none"; } function dispatch() { const speedIndex = Number(speedSlider.value); const currentPhase = Number(phaseSlider.value); speedDisplay.textContent = speedLabels[speedIndex]; phaseDisplay.textContent = currentPhase.toFixed(1); updateState(); container.value = { animate: animateInput.value, speed: speeds[speedIndex], phase: currentPhase }; container.dispatchEvent( new CustomEvent("input", { bubbles: true }) ); } animateInput.addEventListener("input", dispatch); speedSlider.addEventListener("input", dispatch); phaseSlider.addEventListener("input", dispatch); updateState(); container.value = { animate: animateInput.value, speed: speeds[Number(speedSlider.value)], phase: Number(phaseSlider.value) }; return container; }33:T15a3,animation = { async function loadVertices(fileAttachment) { const text = await fileAttachment.text(); const pointMatch = text.match(/point\s*=\s*(['"])(.*?)\1/s); const values = pointMatch[2] .replace(/,/g, " ") .trim() .split(/\s+/) .filter(Boolean) .map(Number); const coords = []; for (let i = 0; i + 2 < values.length; i += 3) { coords.push([values[i], values[i + 1], values[i + 2]]); } return coords; } async function loadX3D(fileAttachment) { const text = await fileAttachment.text(); const pointMatch = text.match(/point\s*=\s*(['"])(.*?)\1/s); const values = pointMatch[2] .replace(/,/g, " ") .trim() .split(/\s+/) .filter(Boolean) .map(Number); const vertices = []; for (let i = 0; i + 2 < values.length; i += 3) { vertices.push([values[i], values[i + 1], values[i + 2]]); } const indexMatch = text.match(/coordIndex\s*=\s*(['"])(.*?)\1/s) || text.match(/coordIndex\s*=\s*([^\s>]+)/s); const rawIndices = (indexMatch[2] || indexMatch[1]) .replace(/,/g, " ") .trim() .split(/\s+/) .filter(Boolean) .map(Number); const faces = []; let currentFace = []; for (const idx of rawIndices) { if (idx === -1) { if (currentFace.length >= 3) faces.push(currentFace); currentFace = []; } else { currentFace.push(idx); } } if (currentFace.length >= 3) faces.push(currentFace); return { vertices, faces }; } const [a, bVertices] = await Promise.all([ loadX3D(x3d_1), loadVertices(x3d_2) ]); const b = { vertices: bVertices }; if (a.vertices.length !== b.vertices.length) { throw new Error("The two meshes have different vertex counts."); } let minX = Infinity, maxX = -Infinity; let minY = Infinity, maxY = -Infinity; for (const vertices of [a.vertices, b.vertices]) { for (const v of vertices) { if (Number.isFinite(v[0])) { minX = Math.min(minX, v[0]); maxX = Math.max(maxX, v[0]); } if (Number.isFinite(v[1])) { minY = Math.min(minY, v[1]); maxY = Math.max(maxY, v[1]); } } } const H = svgHeight; const pad = 20; const dataWidth = maxX - minX || 1; const dataHeight = maxY - minY || 1; const scale = (H - 2 * pad) / dataHeight; const W = Math.round(dataWidth * scale + 2 * pad); const ox = (W - dataWidth * scale) / 2; const oy = (H - dataHeight * scale) / 2; const svgNS = "http://www.w3.org/2000/svg"; const svg = document.createElementNS(svgNS, "svg"); svg.setAttribute("viewBox", `0 0 ${W} ${H}`); svg.style.cssText = `height:${H}px;width:auto;max-width:100%;background:white;display:block;margin:0 auto;`; const polygons = []; if (filled) { for (const face of a.faces) { if ( face.length >= 3 && face.every(i => Number.isInteger(i) && i >= 0 && i < a.vertices.length ) ) { const polygon = document.createElementNS(svgNS, "polygon"); polygon.setAttribute("fill", Color); polygon.setAttribute("stroke", Color); svg.appendChild(polygon); polygons.push({ polygon, face }); } } } const edgeSet = new Set(); for (const face of a.faces) { for (let i = 0; i < face.length; i++) { const u = face[i]; const v = face[(i + 1) % face.length]; if ( Number.isInteger(u) && Number.isInteger(v) && u >= 0 && v >= 0 && u < a.vertices.length && v < a.vertices.length ) { edgeSet.add(u < v ? `${u},${v}` : `${v},${u}`); } } } const edges = Array.from(edgeSet, edge => { const comma = edge.indexOf(","); return [ Number(edge.slice(0, comma)), Number(edge.slice(comma + 1)) ]; }); const path = document.createElementNS(svgNS, "path"); path.setAttribute("stroke", Color); path.setAttribute("stroke-width", "0.6"); path.setAttribute("fill", "none"); svg.appendChild(path); const n = a.vertices.length; const px = new Float32Array(n); const py = new Float32Array(n); function draw(t) { for (let i = 0; i < n; i++) { const va = a.vertices[i]; const vb = b.vertices[i]; const x = va[0] + (vb[0] - va[0]) * t; const y = va[1] + (vb[1] - va[1]) * t; px[i] = ox + (x - minX) * scale; py[i] = H - oy - (y - minY) * scale; } // Update fill polygons if enabled if (filled) { for (const { polygon, face } of polygons) { let points = ""; for (const i of face) { points += `${px[i]},${py[i]} `; } polygon.setAttribute("points", points); } } let d = ""; for (const [i, j] of edges) { d += `M${px[i].toFixed(1)},${py[i].toFixed(1)}L${px[j].toFixed(1)},${py[j].toFixed(1)}`; } path.setAttribute("d", d); } if (!playAnimation.animate) { draw(playAnimation.phase); return svg; } let animationId; const startTime = performance.now(); function frame(currentTime) { const elapsed = (currentTime - startTime) / 1000; const speed = playAnimation.speed || 1; const t = (1 - Math.cos(Math.PI * ((elapsed * speed) % 2))) / 2; draw(t); animationId = requestAnimationFrame(frame); } draw(playAnimation.phase); animationId = requestAnimationFrame(frame); invalidation.then(() => cancelAnimationFrame(animationId)); return svg; }34:[{"id":"470b8c7fe49e0fb6ee2fec87950b0f2f7510db98625db5c41c711701fb5acbcd16ee98628e2d4b9d360d347c7408a2611e010888e32ad004b63a316ea8361678","href":"https://static.observableusercontent.com/files/470b8c7fe49e0fb6ee2fec87950b0f2f7510db98625db5c41c711701fb5acbcd16ee98628e2d4b9d360d347c7408a2611e010888e32ad004b63a316ea8361678","name":"swatman_flexure_2D_01.x3d","type":"application/octet-stream","lastModified":1791654616493,"size":2149814},{"id":"99dfecbc1bb4a9951893dd6b800db7d62a71b9bb4113ac501d45f19a63aed4565ad3a508cea8edd44040d1e42ea4e5181db3cd259ec47d8f18fd885ad801a231","href":"https://static.observableusercontent.com/files/99dfecbc1bb4a9951893dd6b800db7d62a71b9bb4113ac501d45f19a63aed4565ad3a508cea8edd44040d1e42ea4e5181db3cd259ec47d8f18fd885ad801a231","name":"swatman_flexure_2D_02.x3d","type":"application/octet-stream","lastModified":1791654625364,"size":2148642}] 30:{"id":"c02158d10eb45a72","slug":"animated-svg-2-d-from-x3-d-meshes","title":"Animated SVG (2D) from X3D Meshes","thumbnail":"0ca2a9e38e60cfe0de5368c79ece9b70faadc818bd72487e4c3b594a00694652","access_level":"public","create_time":"$D2026-10-10T10:07:16.838Z","update_time":"$D2026-10-10T17:51:41.734Z","view_time":null,"first_public_time":"$D2026-10-10T17:41:12.516Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","bio":""},"version":481,"publish_version":481,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"bio":""}],"members":[{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a4317cf9df48c2f1","slug":"sandbox","title":"Sandbox","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"titling":"auto","title":"Animated SVG (2D) from X3D Meshes","cells":[{"id":1,"value":"# Animated SVG (2D) from X3D Meshes\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"This notebook translates 2D Finite Element Method (FEM) simulation outputs from **FreeCAD 1.0** into a vector animation. By parsing two distinct warp states exported as **X3D** files, it morphs the mesh geometries smoothly within an interactive **SVG** loop.\n\nWhile dedicated WebGL frameworks like *Three.js* offer higher performance for heavy 3D rendering, this SVG approach provides a simple solution for embedding interactive simulations directly into web documents.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof Color = Inputs.color({\n label: \"Color\",\n value: \"#466b86\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof filled = Inputs.toggle({\n label: html`Fill mesh
(slower)`,\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof svgHeight = Inputs.range([400, 800], {\n value: 600,\n step: 100,\n label: \"SVG Height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"x3d_1 = FileAttachment(\"swatman_flexure_2D_01.x3d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"x3d_2 =FileAttachment(\"swatman_flexure_2D_02.x3d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"