2b:null 2c:["$","title",null,{"children":"Sine wave clip path generator | Ryan Kennedy | Observable"}] 31:T5ea,htl.html`

Here's a big wavy section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at convallis purus. Mauris quis gravida enim. Pellentesque luctus, massa vel interdum condimentum, risus est luctus mi, scelerisque mattis velit massa ac ante. Fusce pharetra diam a tellus molestie dictum. Sed quis tortor sit amet lorem porttitor commodo quis eu turpis. Pellentesque vitae libero tincidunt, tempus magna nec, eleifend lectus. Sed lacus mauris, rhoncus non pellentesque vitae, tempor et justo. Duis at lobortis mi. Nunc ultricies urna vitae justo eleifend, at convallis elit congue.

Aliquam id ipsum eros. Vivamus nisl turpis, dictum sit amet dolor in, maximus pellentesque magna. Cras nisi purus, placerat et dapibus hendrerit, consectetur nec mi. Fusce dictum arcu in lorem ultrices accumsan. Fusce ullamcorper dapibus quam ut aliquam. Phasellus viverra dapibus ipsum. Ut non ligula vehicula, dictum est eu, interdum arcu. Suspendisse potenti. Sed scelerisque est ante, nec convallis arcu viverra non. Nulla consequat imperdiet tellus vitae molestie.

`32:[{"id":"26426932ac98296a54797d99ea45a574c6e3883963b652132a80279519b0ff5cbd1a921558f3366bea5e44411f851438f2a5bfd8db9fd54e18aa7714b89b9ea6","href":"https://static.observableusercontent.com/files/26426932ac98296a54797d99ea45a574c6e3883963b652132a80279519b0ff5cbd1a921558f3366bea5e44411f851438f2a5bfd8db9fd54e18aa7714b89b9ea6","name":"wave-source.svg","type":"image/svg+xml","lastModified":1651629447822.054,"size":611}] 2f:{"id":"6c6b3a6b6c3b9a2c","slug":"sine-wave-clip-path-generator","title":"Sine wave clip path generator","thumbnail":"dfb90af45a653e1d909290f59a588fa81402fadabf6fb94da83ddbbb685b82b4","access_level":"public","create_time":"$D2022-05-04T01:26:55.177Z","update_time":"$D2022-05-04T02:08:40.815Z","view_time":null,"first_public_time":"$D2022-05-04T01:50:22.139Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6b57835d3515f941","login":"ryaninvents","name":"Ryan Kennedy","avatar_url":"https://avatars-next.observableusercontent.com/4cbce32166a36a95ddb1242c6f5558e48a8f3e4d8f8c74237c2572264defcdfd","tier":"starter_2024"},"version":86,"publish_version":86,"role":null,"authored":false,"authors":[{"type":"individual","id":"0d924f1124680735","login":"ryaninvents","name":"Ryan Kennedy","avatar_url":"https://avatars-next.observableusercontent.com/4cbce32166a36a95ddb1242c6f5558e48a8f3e4d8f8c74237c2572264defcdfd","tier":null}],"members":[{"type":"individual","id":"0d924f1124680735","login":"ryaninvents","name":"Ryan Kennedy","avatar_url":"https://avatars-next.observableusercontent.com/4cbce32166a36a95ddb1242c6f5558e48a8f3e4d8f8c74237c2572264defcdfd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Sine wave clip path generator","cells":[{"id":0,"value":"# Sine wave clip path generator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"MAX_THETA = 9/4 * Math.PI; // 1.5 revolutions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"START_PHASE = Math.PI * 0.75;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"AMPLITUDE = 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"EXTRA_PADDING = 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"numSamples = 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"model = Array.from(Array(numSamples), (_, i) => {\n const phase = START_PHASE + (i * MAX_THETA) / (numSamples - 1);\n const percent = ((100 * i) / (numSamples - 1));\n const value = AMPLITUDE * (0.5 + 0.5 * Math.sin(phase));\n const adjustment = -1 * Math.pow(percent/100, 4);\n return { x: percent, y: value, adjustment, sum: value + adjustment };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"Plot.plot({\n marks: [\n Plot.line(model, {x: 'x', y: 'y', stroke: 'steelblue'}),\n Plot.line(model, {x: 'x', y: 'adjustment', stroke: 'orange'}),\n Plot.line(model, {x: 'x', y: 'sum', stoke: 'black'})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"clipPath = model.map(({x, sum:y}) => ({x: `${x.toFixed(1)}%`, y: `${y.toFixed(2)}em`})).concat([\n { x: \"100%\", y: \"100%\" },\n { x: \"0%\", y: \"100%\" }\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"styles = `.clip-demo {\n clip-path: polygon(${clipPath.map(({x, y}) => `${x} ${y}`).join(', ')});\n margin-top: ${-(AMPLITUDE)}em;\n padding: ${(EXTRA_PADDING + AMPLITUDE * 0.75)}em ${EXTRA_PADDING}em;\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"FileAttachment(\"wave-source.svg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"