2d:null 2e:["$","title",null,{"children":"Animated SVG Bezier blobs | luukschipperheyn | Observable"}] 33:T8c7,favourites=[ { xPosition: 400, yPosition: 400, size: 66.66666666666667, amplitude: 0.36217405044836365, numPoints: 4, speed: 0.09334727404319798, rotationSpeed: 0.06936415179917688, period: 87.96459430051421, color: "#1b445e", backgroundColor: "#f5b4b4", }, {xPosition: 200, yPosition: 0, size: 66.66666666666667, amplitude: 0.29383087552457304, numPoints: 4, speed: 0.04927327332142744, rotationSpeed: 0.19921864391423616, period: 12.566370614359172, color: "#f7f7f7", backgroundColor: "#ffe69d"}, {xPosition: 400, yPosition: 0, size: 66.66666666666667, amplitude: 0.0487773136546176, numPoints: 4, speed: 0.03880572621379559, rotationSpeed: 0.14275400406096564, period: 43.982297150257104, color: "#ffe69d", backgroundColor: "#7dc5f3"}, {xPosition: 200, yPosition: 400, size: 66.66666666666667, amplitude: 0.04493493653568299, numPoints: 4, speed: 0.0380023455395681, rotationSpeed: 0.046916051211768894, period: 106.81415022205297, color: "#fff", backgroundColor: "#f4bf21"}, {xPosition: 200, yPosition: 200, size: 66.66666666666667, amplitude: 0.2610894365525804, numPoints: 4, speed: 0.029230248756463253, rotationSpeed: 0.227807123176475, period: 12.566370614359172, color: "#fff", backgroundColor: "#1b445e"}, {xPosition: 200, yPosition: 400, size: 66.66666666666667, amplitude: 0.13175764352335903, numPoints: 4, speed: 0.05862428531148927, rotationSpeed: 0.09035378937223597, period: 106.81415022205297, color: "#f7f7f7", backgroundColor: "#5dade0"}, {xPosition: 400, yPosition: 200, size: 66.66666666666667, amplitude: 0.10428932116752732, numPoints: 4, speed: 0.011589777353051046, rotationSpeed: 0.20522515113952525, period: 106.81415022205297, color: "#1b445e", backgroundColor: "#f7f7f7"}, {xPosition: 400, yPosition: 400, size: 66.66666666666667, amplitude: 0.2508558901070992, numPoints: 4, speed: 0.07441197400904208, rotationSpeed: 0.235470193624014, period: 119.38052083641213, color: "#1b445e", backgroundColor: "#ffffff"}, {xPosition: 400, yPosition: 400, size: 66.66666666666667, amplitude: 0.1863682192325019, numPoints: 4, speed: 0.04621967204494892, rotationSpeed: 0.02150458477880437, period: 6.283185307179586, color: "#1b445e", backgroundColor: "#f4bf21"}, ]34:T121a,blob = { return ({ xPosition=canvasWidth/2, yPosition=canvasHeight/2, size=10, amplitude=0.1, numPoints=4, speed=0.01, period=Math.PI*2, rotationSpeed=0.05, color='#ffffff', backgroundColor='#000000', className=''}) => { const controlPointDist = (4/3)*Math.tan(Math.PI/(numPoints*2)) const time = frame * speed const rotation = frame * rotationSpeed const points = [ { x: 1 + Math.sin(time) * amplitude, y: 0, controlPoints: [ { x: 1+Math.sin(time)*amplitude-Math.sin(time+(period/12)*1)*amplitude, y: -controlPointDist-Math.sin(time+(period/12)*1)*amplitude }, { x: 1+Math.sin(time)*amplitude+Math.sin(time+(period/12)*1)*amplitude, y: controlPointDist+Math.sin(time+(period/12)*1)*amplitude } ] }, { x: 0, y: 1+Math.sin(time+(period/12)*3) * amplitude, controlPoints: [ { x: controlPointDist+Math.sin(time+(period/12)*2)*amplitude, y: 1+Math.sin(time+(period/12)*2)*amplitude }, { x: -controlPointDist+Math.sin(time+(period/12)*3)*amplitude, y: 1+Math.sin(time+(period/12)*3)*amplitude } ] }, { x: -1+Math.sin(time+(period/12)*6) * amplitude, y: 0, controlPoints: [ { x: -1+Math.sin(time+(period/12)*5)*amplitude, y: controlPointDist+Math.sin(time+(period/12)*5)*amplitude }, { x: -1+Math.sin(time+(period/12)*7)*amplitude, y: -controlPointDist+Math.sin(time+(period/12)*7)*amplitude } ] }, { x: 0, y: -1+Math.sin(time+(period/12)*9) * amplitude, controlPoints: [ { x: -controlPointDist+Math.sin(time+(period/12)*8)*amplitude, y: -1+Math.sin(time+(period/12)*8)*amplitude }, { x: controlPointDist+Math.sin(time+(period/12)*10)*amplitude, y: -1+Math.sin(time+(period/12)*10)*amplitude } ] }, ] return ` ${backgroundColor && ` `} ${showGuides && ` ${points.map((point, i) => ` ${i == 0 && ` ` } `)} ` } ` } }35:[] 31:{"id":"30fa2019699f216d","slug":"animated-svg-bezier-blobs","title":"Animated SVG Bezier blobs","thumbnail":"6c774b1189901af73fd81d5f24dc826f26e85d54daa2f8632e3289c77551c12d","access_level":"public","create_time":"$D2019-01-22T10:05:56.364Z","update_time":"$D2019-01-24T11:06:49.991Z","view_time":null,"first_public_time":"$D2019-01-22T15:26:10.455Z","has_unpublished_edits":null,"fork":false,"stars":25,"starred":false,"owner":{"type":"team","id":"36123ead266674c9","login":"luukschipperheyn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/744e312e615b1b59ad8bfcb9819ea010725942effd109d1204ce441cf6bfde52","tier":"starter_2024"},"version":425,"publish_version":425,"role":null,"authored":false,"authors":[{"type":"individual","id":"458e5f2cb4cfed69","login":"luukschipperheyn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/744e312e615b1b59ad8bfcb9819ea010725942effd109d1204ce441cf6bfde52","tier":null}],"members":[{"type":"individual","id":"458e5f2cb4cfed69","login":"luukschipperheyn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/744e312e615b1b59ad8bfcb9819ea010725942effd109d1204ce441cf6bfde52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Animated SVG Bezier blobs","cells":[{"id":0,"value":"md`# Animated SVG Bezier blobs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"viewof reset = button({value: 'randomize!!!'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof showGuides = checkbox({\n options: [{ value: \"toggle\", label: \"Show guides\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"viewof showFavourites = checkbox({\n options: [{value: true, label: 'Show favourites'}],\n value: reset\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"numColumns = 3\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"numRows = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"html `

\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"colors = [\n '#fff',\n '#ccc',\n '#f7f7f7',\n '#aaa',\n '#111',\n '#1b445e',\n '#5dade0',\n '#7dc5f3',\n '#1a3b4c',\n '#48d25b',\n '#b2dccb',\n '#d40000',\n '#f5b4b4',\n '#f4bf21',\n '#ffe69d'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"blobs = {\n reset;\n return generateBlobs(numBlobs)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"frame = {\n let frame = 0\n while(true) {\n frame += 1\n yield frame\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"canvasWidth = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"numBlobs = numColumns*numRows","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"randomColor = {\n return () => colors[Math.floor(Math.random()*colors.length)]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"gridify = {\n return blobs => {\n return blobs.map((blob, i) => {\n return Object.assign({}, blob,{\n xPosition: (i%Math.floor(numColumns))*(canvasWidth/numColumns),\n yPosition: Math.floor(i/numColumns)*canvasHeight/numRows,\n size: canvasHeight/(numBlobs/numColumns)/3\n })\n })\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"generateBlobs = {\n return numBlobs => {\n return Array.apply(null, Array(numBlobs)).map((_, i) => {\n const color = randomColor()\n let backgroundColor = randomColor()\n while (backgroundColor === color) {\n backgroundColor = randomColor()\n }\n return {\n xPosition: (i%Math.floor(numColumns))*(canvasWidth/numColumns),\n yPosition: Math.floor(i/numColumns)*canvasHeight/numRows,\n size: canvasHeight/(numBlobs/numColumns)/3,\n amplitude: Math.random() * 0.4,\n numPoints: 4,\n speed: Math.random() * 0.1,\n rotationSpeed: Math.random() * 0.3,\n period: Math.PI * Math.ceil(Math.random() * 20) * 2,\n color,\n backgroundColor\n }\n })\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"canvasHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"import {button, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"