29:null 2a:["$","title",null,{"children":"Generator for SVG triangle with rounded Bezier corners | Jonas | Observable"}] 2f:Ta0e,30:[] 2d:{"id":"b885c1687895b07b","slug":null,"title":"Generator for SVG triangle with rounded Bezier corners","thumbnail":"32c394456d75f6d1b442f4a399d3872f1e57aa028930d88007e6ec3f55c68fa6","access_level":"public","create_time":"$D2023-05-08T15:02:47.581Z","update_time":"$D2024-07-29T11:32:05.609Z","view_time":null,"first_public_time":"$D2023-05-08T15:02:47.581Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"6015bb0b93952860","login":"jnsprnw","name":"Jonas","avatar_url":"https://avatars-next.observableusercontent.com/4ac18ffeb86a7f908cf6997d5bb728ceb25707f3a3db2104f3517527f54aa1f6","tier":"starter_2024"},"version":628,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"002ca05f0ffda548","login":"jnsprnw","name":"Jonas","avatar_url":"https://avatars-next.observableusercontent.com/4ac18ffeb86a7f908cf6997d5bb728ceb25707f3a3db2104f3517527f54aa1f6","tier":null}],"members":[{"type":"individual","id":"002ca05f0ffda548","login":"jnsprnw","name":"Jonas","avatar_url":"https://avatars-next.observableusercontent.com/4ac18ffeb86a7f908cf6997d5bb728ceb25707f3a3db2104f3517527f54aa1f6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Generator for SVG triangle with rounded Bezier corners","cells":[{"id":0,"value":"# Generator for SVG triangle with rounded Bezier corners\n\nThe explanation of how the triangle is created is below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":426,"value":"viewof size = Inputs.range([0, 600], {label: \"Size\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":295,"value":"viewof roundness_factor = Inputs.range([0, 0.5], {label: \"Roundness\", step: 0.01, default: 0.2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"viewof pointiness_factor = Inputs.range([0, 1], {label: \"Pointiness\", step: 0.01})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":168,"value":"``","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":234,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":436,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":518,"value":"### The triangle\nLet’s start by defining some constants.\nIn this type of triangle, all corner have an angle of 60 degrees.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":187,"value":"alpha = 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":503,"value":"Because we need square root of 3 some times, we calculate it once.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"sqrt3 = Math.sqrt(3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"Let’s use that to calculate the height.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":84,"value":"h = sqrt3 / 2 * size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":524,"value":"This allows us to get all three points *A*, *B* and *C*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":505,"value":"p1 = ({ x: 0, y: -h / 2 }) // Top","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"p2 = ({ x: -size / 2, y: h / 2 }) // Bottom left","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":513,"value":"p3 = ({ x: size / 2, y: h / 2}) // Bottom right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":555,"value":"For this explanation, we focus on the point *C*. To create the round corner, we need to first find two points (*R1* and *R2*) that have a specific distance from *C* (called *roundness* in the input at the top) and lay on the lines *B–A* and *B–C*. Let’s first calculate the distance from the factor selected at the top.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":140,"value":"roundness_distance = size * roundness_factor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"These points *R1* and *R2* act as start and endpoint of the bezier curve. We need two additional points *P1* and *P2* that will be used as anchors. These points lay on the lines *B–R1* and *B–R2*. Let’s calculate the distance (called *pointiness* in the input at the top) from *B* from the factor selected at the top.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":617,"value":"pointiness_distance = roundness_distance * pointiness_factor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":624,"value":"In order to find these points from the distance, we first calculate the vectors given an angle and a radius.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":130,"value":"function getPointFromAngle(angle, radius) {\n const a = ((180 + angle) * Math.PI) / 180;\n const x = Math.cos(a) * radius;\n const y = Math.sin(a) * radius;\n return { x, y };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":626,"value":"# The code below needs some clean up!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":608,"value":"The bezier curve is set up like this:\n```\nM P3.x P3.y C R2.x R2.y, P2.x P2.y, P1.x P1.y\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":529,"value":"### The artboard","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":438,"value":"The artboard is bigger than the size","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":103,"value":"artboard_size = Math.ceil(size * 1.3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":457,"value":"This viewBox parameters allow us to shift the point *C(0,0)* to the center of the artboard.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":448,"value":"viewBox = `${-artboard_size / 2} ${-artboard_size / 2} ${artboard_size} ${artboard_size}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"function generateEdge(x1, y1, angle) {\n const a1 = angle - alpha;\n const a2 = angle + 180 + alpha;\n\n const s1 = getPointFromAngle(a1, roundness_distance);\n const s2 = getPointFromAngle(a2, roundness_distance)\n\n const d1 = getPointFromAngle(a1, roundness_distance * pointiness_factor);\n const d2 = getPointFromAngle(a2, roundness_distance * pointiness_factor);\n\n return `L${x1 + s1.x} ${y1 + s1.y} C ${x1 + d1.x} ${y1 +d1.y}, ${x1 + d2.x} ${y1 + d2.y}, ${x1 + s2.x} ${y1 +s2.y}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"function generateTriangle(size) {\n const sqrt3 = Math.sqrt(3);\n const h = sqrt3 / 2 * size;\n\n const x1 = 0;\n const y1 = -h / 2;\n\n const x2 = -size / 2;\n const y2 = h / 2;\n\n const x3 = size / 2;\n const y3 = h / 2;\n\n const o = getPointFromAngle(240 + 180 + 60, roundness_distance);\n const x0 = x2 + o.x;\n const y0 = y2 + o.y;\n\n return `M${x0} ${y0} ${generateEdge(x1, y1, 0)} ${generateEdge(x3, y3, -240)} ${generateEdge(x2, y2, 240)} Z`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"angle3 = -240","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"s1 = getPointFromAngle(angle3-60, roundness_distance)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"s2 = getPointFromAngle(angle3-180+60, roundness_distance)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"d1 = getPointFromAngle(angle3-60, pointiness_distance)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"d2 = getPointFromAngle(angle3-180+60, pointiness_distance)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"y = Math.sqrt(size)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"x1 = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"y1 = -h / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"x2 = -size / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"y2 = h / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"x3 = size / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"y3 = h / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"## Helper\n Point radius","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":280,"value":"r = size * 0.01;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"