2b:null 2c:["$","title",null,{"children":"Implementing the CSS gradient line in SVG (and Canvas) | Dan Burzo | Observable"}] 31:T686,{ let rad = angle * Math.PI / 180; let rx = (width - rw)/2; let ry = (400 - rh) / 2; let rcx = rx + rw/2; let rcy = ry + rh/2; let gl = rad => Math.abs(rw * Math.cos(rad)) + Math.abs(rh * Math.sin(rad)); let gl_path = `M ${rcx + Math.cos(rad - Math.PI) * gl(rad) / 2} ${rcy + Math.sin(rad - Math.PI) * gl(rad) / 2} L ${rcx} ${rcy} l -5 -5 10 10 -5 -5 -5 5 l 10 -10 -5 5 L ${rcx + Math.cos(rad) * gl(rad) / 2} ${rcy + Math.sin(rad) * gl(rad) / 2}`; let gl_trail = Array.from({ length: angle }, (_, i) => { let rad = i * Math.PI / 180; let x = rcx + Math.cos(rad) * gl(rad) / 2; let y = rcy + Math.sin(rad) * gl(rad) / 2; return `${x} ${y}`; }).join(', '); return html` `; }32:[] 2f:{"id":"4316623850662ba4","slug":"css-gradient-line","title":"Implementing the CSS gradient line in SVG (and Canvas)","thumbnail":"f4d5b9d82c95f701f07451299e912ff06a2d2c8caaeb87362816223202e0d392","access_level":"public","create_time":"$D2021-10-28T17:32:53.159Z","update_time":"$D2021-10-29T18:20:41.224Z","view_time":null,"first_public_time":"$D2021-10-28T18:34:13.178Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":"starter_2024"},"version":353,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null}],"members":[{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null,"role":"editor"}],"comments":[{"id":"53ab0234b74fa356","reply_to_id":null,"content":"The context you provided in the tweet where you shared it would probably help people who find this notebook from other links understand what's going on.\n\nAlso, thanks for showing me this, this behavior really surprised me!","create_time":"$D2021-10-29T10:09:54.228Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}},{"id":"14eefd5c105f3a81","reply_to_id":"53ab0234b74fa356","content":"Thanks for the nudge, I added some context to the diagram :-)","create_time":"$D2021-10-29T12:56:44.149Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"0303102bdc18d54b","login":"danburzo","name":"Dan Burzo","avatar_url":"https://avatars-next.observableusercontent.com/35c5b738eddc0f17cce4d7d76150fa2d2bb131de4cbd2c6d40541e0abac56af9","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"4803efb636bc5c1b","slug":"doing-things-with-svg","title":"Doing Things with SVG","owner":{"id":"d2d1bf09f301c5bc","login":"danburzo","name":"Dan Burzo"}},"type":"notebook","body":{"title":"Implementing the CSS gradient line in SVG (and Canvas)","cells":[{"id":0,"value":"# Implementing the CSS gradient line in SVG (and Canvas)\n\nCSS gradients are defined in the [CSS Images Module Level 3 specification](https://drafts.csswg.org/css-images/). Linear gradients are expressed in terms of an angle, with the gradient line constructed thus:\n\n> Starting from the center of the gradient box, extend a line at the specified angle in both directions. The ending point is the point on the gradient line where a line drawn perpendicular to the gradient line would intersect the corner of the gradient box in the specified direction. The starting point is determined identically, but in the opposite direction.\n\nOn the other hand, linear gradients in SVG and on the HTML `