2e:null 2f:["$","title",null,{"children":"Web animation API | Michael Bricknell | Observable"}] 34:T15d1,styles = html``35:T1a3b,svg2 = { const el = html``; if (fillType === "pattern") { const tempSvg = fillPattern.animate ? animatePattern(fillPattern) : pattern(fillPattern); const patternEl = tempSvg.querySelector("pattern"); patternEl.setAttribute("id", fillPattern.id); el.querySelector("defs").appendChild(patternEl); if (fillPattern.animate) { const anims = patternEl.querySelectorAll("animateTransform, animate"); const rect = el.querySelector(`rect[fill='url(#${fillPattern.id})']`); if (rect && anims.length) { rect.addEventListener("mouseover", () => anims.forEach((a) => a.beginElement()) ); rect.addEventListener("mouseout", () => anims.forEach((a) => a.endElement()) ); } } } if (!animate) { el.querySelectorAll("[class*='fx-dash-'], [class*='fx-pulse-']").forEach( (el) => { el.style.animationPlayState = "paused"; } ); } return el; }36:[{"id":"73d3b47e2ce7dda3ddc0e552517f02105079d3e836c25541d186bd1458765f52bd79f96316f3926f1c1fc97ab7dc5fd65ab01253b03b03273158e0f98d4a2a2e","href":"https://static.observableusercontent.com/files/73d3b47e2ce7dda3ddc0e552517f02105079d3e836c25541d186bd1458765f52bd79f96316f3926f1c1fc97ab7dc5fd65ab01253b03b03273158e0f98d4a2a2e","name":"old-style.svg","type":"image/svg+xml","lastModified":1767571996409.203,"size":39572},{"id":"468a8f989a0d9dda213224520ad5916368399bb041f96296c4a634d15d2c205ab6ade825b3c9566b40ef62195d69f464cd53e1a686c606558f0a9db5f34f358b","href":"https://static.observableusercontent.com/files/468a8f989a0d9dda213224520ad5916368399bb041f96296c4a634d15d2c205ab6ade825b3c9566b40ef62195d69f464cd53e1a686c606558f0a9db5f34f358b","name":"old-style@1.svg","type":"image/svg+xml","lastModified":1774188414584.348,"size":39604},{"id":"fbb730cc60b0d2463e4e6885c6510c8b2f9fc51925b8fe7377b7bf6149c1d627822c25640136ff32a36ec591e1c32227faf3c5e1ce070d0aa84a182e01bbf1e3","href":"https://static.observableusercontent.com/files/fbb730cc60b0d2463e4e6885c6510c8b2f9fc51925b8fe7377b7bf6149c1d627822c25640136ff32a36ec591e1c32227faf3c5e1ce070d0aa84a182e01bbf1e3","name":"cropped.png","type":"image/png","lastModified":1777037919793.875,"size":856537}] 32:{"id":"9ce682b50931493f","slug":"web-animation-api","title":"Web animation API","thumbnail":"14ae47394c66dbad19083ddc15d47fd5bfa0343922f83267a737c598d62cc848","access_level":"public","create_time":"$D2026-01-05T00:12:58.759Z","update_time":"$D2026-04-30T11:12:14.823Z","view_time":null,"first_public_time":"$D2026-01-10T12:51:38.679Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":405,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"},{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Web animation API","cells":[{"id":0,"value":"# Web animation API","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"import { patterns, pattern, animatePattern } from \"@mbrickmaps/mapas\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"animatePattern","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"viewof animate = Inputs.toggle({ label: \"animate\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"viewof showTexture = Inputs.toggle({ label: \"texture\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"viewof fillType = Inputs.radio([\"color\", \"pattern\"], {\n label: \"fill type\",\n value: \"color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"viewof fillColor = Inputs.color({ label: \"color\", value: \"#e74c3c\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"viewof fillPattern = Inputs.select(patterns, {\n label: \"pattern\",\n format: (d) => d.id\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"activeFill = fillType === \"color\" ? fillColor : `url(#${fillPattern.id})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"textureUrl = await FileAttachment(\"cropped.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"svg = {\n const text = await FileAttachment(\"old-style@1.svg\").text();\n\n setTimeout(() => {\n const anim = document.querySelector(\"#g13\").animate(keyframes2, {\n duration: 60000,\n iterations: Infinity\n });\n }, 100); //wait until it loads\n\n return html`${text}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"currentFps = {\n let lastTime = performance.now();\n let frameCount = 0;\n\n function measure() {\n frameCount++;\n const now = performance.now();\n const delta = now - lastTime;\n\n if (delta > 0 && frameCount > 1) {\n // Skip first frame\n return 1000 / delta;\n }\n\n lastTime = now;\n requestAnimationFrame(measure);\n return 60; // Default assumption\n }\n\n requestAnimationFrame(measure);\n return measure();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"keyframes = {\n let keyframes = [];\n for (let i = 0; i <= 60; i++) {\n keyframes.push({\n transform: `rotate(${i * 6}deg)`, // 360/60 = 6 degrees per step\n transformOrigin: \"center\",\n transformBox: \"fill-box\",\n offset: i / 60,\n easing: i < 60 ? \"cubic-bezier(0.5, 0, 0.5, 1)\" : undefined // ease on each segment\n });\n }\n return keyframes;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"keyframes2 = {\n const frames = [];\n frames.push({\n transform: `rotate(0deg)`,\n transformOrigin: \"center\",\n transformBox: \"fill-box\",\n offset: 0\n });\n\n for (let i = 0; i < 60; i++) {\n const stepStart = i / 60;\n const stepEnd = (i + 1) / 60;\n const targetAngle = (i + 1) * 6;\n\n // Hold at current position most of the time\n frames.push({\n transform: `rotate(${i * 6}deg)`,\n transformOrigin: \"center\",\n transformBox: \"fill-box\",\n offset: stepStart + (stepEnd - stepStart) * 0.85, // hold until 85%\n easing: \"linear\"\n });\n\n // Quick snap to next position\n frames.push({\n transform: `rotate(${targetAngle}deg)`,\n transformOrigin: \"center\",\n transformBox: \"fill-box\",\n offset: stepEnd,\n easing: \"ease-out\" // slight deceleration at landing\n });\n }\n\n return frames;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"