31:T5df,{ let width = 800, height = 200; let curveWidth = 150; let curveHeight = 60; let curveInnerHeight = 10; let strokeWidth = 2; let start = {x: 10, y: height / 2 - curveHeight / 2 - curveInnerHeight / 2}; let startDown = {x: 180, y: height / 2 - curveHeight}; let startUp = {x: 350, y: height / 2 + curveHeight - curveInnerHeight - 25}; let srtartCurly = {x: 550, y: height / 2 + curveHeight/2 - curveInnerHeight / 2}; let color = "pink"; return svg` `; }32:Tafe,function getDAttr(startCoords, curveWidth, curveHeight, curveInnerHeight, direction) { switch(direction) { case 'up': return `M ${startCoords.x} ${startCoords.y - curveInnerHeight} c 0 -${curveHeight - curveInnerHeight} 0 -${curveHeight - curveInnerHeight} ${curveWidth / 2} -${curveHeight - curveInnerHeight} c ${curveWidth / 2} 0 ${curveWidth / 2} 0 ${curveWidth / 2} ${curveHeight - curveInnerHeight} l 0 ${curveInnerHeight} c 0 -${curveHeight - curveInnerHeight} 0 -${curveHeight - curveInnerHeight} -${curveWidth / 2} -${curveHeight - curveInnerHeight} c -${curveWidth / 2} 0 -${curveWidth / 2} 0 -${curveWidth / 2} ${curveHeight - curveInnerHeight} Z`; case 'curlyL': return `M ${startCoords.x} ${startCoords.y} c 0 ${curveHeight / 2 - curveInnerHeight / 2} 0 ${curveHeight / 2 - curveInnerHeight / 2} ${curveWidth / 2} ${curveHeight / 2 - curveInnerHeight / 2} c ${curveWidth / 2} 0 ${curveWidth / 2} 0 ${curveWidth / 2} ${curveHeight / 2 - curveInnerHeight / 2} l 0 ${curveInnerHeight} c 0 -${(curveHeight / 2 - curveInnerHeight/2)} 0 -${(curveHeight / 2 - curveInnerHeight/2)} -${curveWidth / 2} -${(curveHeight / 2 - curveInnerHeight/2)} c -${curveWidth / 2} 0 -${curveWidth / 2} 0 -${curveWidth / 2} -${(curveHeight / 2 - curveInnerHeight/2)} Z` case 'down': return `M ${startCoords.x} ${startCoords.y + curveInnerHeight} c 0 ${curveHeight - curveInnerHeight} 0 ${curveHeight - curveInnerHeight} ${curveWidth / 2} ${curveHeight - curveInnerHeight} c ${curveWidth / 2} 0 ${curveWidth / 2} 0 ${curveWidth / 2} -${(curveHeight - curveInnerHeight)} l 0 -${curveInnerHeight} c 0 ${(curveHeight - curveInnerHeight)} 0 ${(curveHeight - curveInnerHeight)} -${curveWidth / 2} ${(curveHeight - curveInnerHeight)} c -${curveWidth / 2} 0 -${curveWidth / 2} 0 -${curveWidth / 2} -${(curveHeight - curveInnerHeight)} Z`; case 'curlyR': return `M ${startCoords.x} ${startCoords.y} c 0 -${curveHeight / 2 - curveInnerHeight / 2} 0 -${curveHeight / 2 - curveInnerHeight / 2} ${curveWidth / 2} -${curveHeight / 2 - curveInnerHeight / 2} c ${curveWidth / 2} 0 ${curveWidth / 2} 0 ${curveWidth / 2} -${curveHeight / 2 - curveInnerHeight / 2} l 0 -${curveInnerHeight} c 0 ${(curveHeight / 2 - curveInnerHeight/2)} 0 ${(curveHeight / 2 - curveInnerHeight/2)} -${curveWidth / 2} ${(curveHeight / 2 - curveInnerHeight/2)} c -${curveWidth / 2} 0 -${curveWidth / 2} 0 -${curveWidth / 2} ${(curveHeight / 2 - curveInnerHeight/2)} Z`; default: return null; } }33:[] 2f:{"title":"Mastering in path element :)","cells":[{"id":0,"value":"md`# Mastering in path element :)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"{\n let width = 800, height = 200;\n let start = {x: 10, y: 110};\n let curveWidth = 200;\n let curveHeight = 100;\n let curveInnerHeight = 30;\n let color = \"pink\";\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"{\n let width = 800, height = 200;\n let start = {x: 10, y: 180};\n let curveWidth = 200;\n let curveHeight = 100;\n let curveInnerHeight = 30;\n let color = \"pink\";\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"{\n let width = 800, height = 200;\n let start = {x: 10, y: 30};\n let curveWidth = 200;\n let curveHeight = 100;\n let curveInnerHeight = 30;\n let color = \"pink\";\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"{\n let width = 800, height = 200;\n let start = {x: 10, y: 10};\n let curveWidth = 200;\n let curveHeight = 100;\n let curveInnerHeight = 30;\n let color = \"pink\";\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"{\n let width = 800, height = 200;\n let start = {x: 10, y: 70};\n let curveWidth = 200;\n let curveHeight = 100;\n let curveInnerHeight = 30;\n let color = \"pink\";\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"{\n let width = 800, height = 200;\n let start = {x: 10, y: 30};\n let curveWidth = 200;\n let curveHeight = 100;\n let curveInnerHeight = 30;\n let color = \"pink\";\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"{\n let width = 800, height = 200;\n let start = {x: 10, y: 180};\n let curveWidth = 200;\n let curveHeight = 100;\n let curveInnerHeight = 30;\n let color = \"pink\";\n return svg`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}