30: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` `; }31:[] 2e:{"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 `