41:null 42:["$","title",null,{"children":"SVG mask over video experiments | superstratum | Observable"}] 48:T8c2,html`

`49:[] 46:{"id":"08928b6bc7a4ae23","slug":"svg-mask-over-video-experiments","title":"SVG mask over video experiments","thumbnail":"a1dd7f47ac32216624d306c7f5f312e0b07d1d0efdc5f48e356f47cdcbf28558","access_level":"public","create_time":"$D2020-04-06T15:47:36.301Z","update_time":"$D2020-04-06T22:35:27.420Z","view_time":null,"first_public_time":"$D2020-04-06T22:32:43.991Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b61721a5ddc70e81","login":"superstratum","name":"","avatar_url":null,"tier":"starter_2024","bio":"","following":false},"version":208,"publish_version":208,"role":null,"authored":false,"authors":[{"type":"individual","id":"d1328e4b3183d6a9","login":"arthur","name":"Arthur Ostapenko","avatar_url":"https://avatars-next.observableusercontent.com/27f7589ab6c9a406aff33db1de1bc088c6e580f9f943934d699bea057488c740","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d1328e4b3183d6a9","login":"arthur","name":"Arthur Ostapenko","avatar_url":"https://avatars-next.observableusercontent.com/27f7589ab6c9a406aff33db1de1bc088c6e580f9f943934d699bea057488c740","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG mask over video experiments","cells":[{"id":0,"value":"md`# SVG mask over video experiments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n let svg = document.getElementById(\"cups\");\n let s = Snap(svg);\n let simpleCup = Snap.select('#simple-cup');\n let fancyCup = Snap.select('#fancy-cup');\n let simpleCupPoints = simpleCup.node.getAttribute('d');\n let fancyCupPoints = fancyCup.node.getAttribute('d');\n let bigCircle = s.circle(150, 150, 100);\n\n let toFancy = function() {\n simpleCup.animate({ d: fancyCupPoints }, 200, mina.bounce, toSimple);\n };\n\n let toSimple = function() {\n simpleCup.animate({ d: simpleCupPoints }, 400, mina.bounce, toFancy);\n };\n toSimple();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"Snap = require(`snapsvg`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"mina = require(`snapsvg`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"function svgCircle(cx, cy, r, deg) {\n var theta = (deg * Math.PI) / 180,\n dx = r * Math.cos(theta),\n dy = -r * Math.sin(theta);\n return (\n \"M \" +\n cx +\n \" \" +\n cy +\n \"m \" +\n dx +\n \",\" +\n dy +\n \"a \" +\n r +\n \",\" +\n r +\n \" 0 1,0 \" +\n -2 * dx +\n \",\" +\n -2 * dy +\n \"a \" +\n r +\n \",\" +\n r +\n \" 0 1,0 \" +\n 2 * dx +\n \",\" +\n 2 * dy\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 47:"$46:body"