[{"data":1,"prerenderedAt":1027},["ShallowReactive",2],{"docs:\u002Fpath-basics":3},{"id":4,"title":5,"body":6,"description":1019,"extension":1020,"meta":1021,"navigation":1023,"path":1024,"seo":1025,"stem":12,"__hash__":1026},"docs\u002Fpath-basics.md","Path basics",{"type":7,"value":8,"toc":1012},"minimark",[9,14,35,40,47,233,247,251,260,531,541,545,548,817,822,826,832,981,995,999,1008],[10,11,13],"h1",{"id":12},"path-basics","Path Basics",[15,16,17,18,22,23,26,27,30,31,34],"p",{},"Use ",[19,20,21],"code",{},"Path"," when a shape is easier to describe as a sequence of drawing\ncommands than as a predefined element such as ",[19,24,25],{},"Circle",", ",[19,28,29],{},"Rect",", or ",[19,32,33],{},"Line",".",[36,37,39],"h2",{"id":38},"path-data","Path Data",[15,41,42,43,46],{},"SVG paths are stored in the ",[19,44,45],{},"d"," attribute. You can pass that data directly as a\nstring when you already have the path data.",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-python shiki shiki-themes material-theme-lighter github-light-high-contrast github-dark","import pydreamplet as dp\n\nsvg = dp.SVG(540, 360)\n\ndiamond = dp.Path(\n    \"M270 92 L316 138 L270 184 L224 138 Z\",\n    fill=\"#14b8a6\",\n    stroke=\"currentColor\",\n    stroke_width=5,\n)\n\nsvg.append(diamond)\n","python","",[19,55,56,75,82,118,123,140,157,175,192,205,210,215],{"__ignoreMap":53},[57,58,61,65,69,72],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"sED7I","import",[57,66,68],{"class":67},"soTeR"," pydreamplet ",[57,70,71],{"class":63},"as",[57,73,74],{"class":67}," dp\n",[57,76,78],{"class":59,"line":77},2,[57,79,81],{"emptyLinePlaceholder":80},true,"\n",[57,83,85,88,92,95,98,102,105,109,112,115],{"class":59,"line":84},3,[57,86,87],{"class":67},"svg ",[57,89,91],{"class":90},"sWKEy","=",[57,93,94],{"class":67}," dp",[57,96,34],{"class":97},"sVsmf",[57,99,101],{"class":100},"sAK04","SVG",[57,103,104],{"class":97},"(",[57,106,108],{"class":107},"sNpir","540",[57,110,111],{"class":97},",",[57,113,114],{"class":107}," 360",[57,116,117],{"class":97},")\n",[57,119,121],{"class":59,"line":120},4,[57,122,81],{"emptyLinePlaceholder":80},[57,124,126,129,131,133,135,137],{"class":59,"line":125},5,[57,127,128],{"class":67},"diamond ",[57,130,91],{"class":90},[57,132,94],{"class":67},[57,134,34],{"class":97},[57,136,21],{"class":100},[57,138,139],{"class":97},"(\n",[57,141,143,147,151,154],{"class":59,"line":142},6,[57,144,146],{"class":145},"sqo_7","    \"",[57,148,150],{"class":149},"s_jvP","M270 92 L316 138 L270 184 L224 138 Z",[57,152,153],{"class":145},"\"",[57,155,156],{"class":97},",\n",[57,158,160,164,166,168,171,173],{"class":59,"line":159},7,[57,161,163],{"class":162},"sYEV4","    fill",[57,165,91],{"class":90},[57,167,153],{"class":145},[57,169,170],{"class":149},"#14b8a6",[57,172,153],{"class":145},[57,174,156],{"class":97},[57,176,178,181,183,185,188,190],{"class":59,"line":177},8,[57,179,180],{"class":162},"    stroke",[57,182,91],{"class":90},[57,184,153],{"class":145},[57,186,187],{"class":149},"currentColor",[57,189,153],{"class":145},[57,191,156],{"class":97},[57,193,195,198,200,203],{"class":59,"line":194},9,[57,196,197],{"class":162},"    stroke_width",[57,199,91],{"class":90},[57,201,202],{"class":107},"5",[57,204,156],{"class":97},[57,206,208],{"class":59,"line":207},10,[57,209,117],{"class":97},[57,211,213],{"class":59,"line":212},11,[57,214,81],{"emptyLinePlaceholder":80},[57,216,218,221,223,226,228,231],{"class":59,"line":217},12,[57,219,220],{"class":67},"svg",[57,222,34],{"class":97},[57,224,225],{"class":100},"append",[57,227,104],{"class":97},[57,229,230],{"class":100},"diamond",[57,232,117],{"class":97},[15,234,235,236,239,240,243,244,34],{},"The path starts with ",[19,237,238],{},"M"," for move, uses ",[19,241,242],{},"L"," for line segments, and closes with\n",[19,245,246],{},"Z",[36,248,250],{"id":249},"pathbuilder","PathBuilder",[15,252,253,254,256,257,259],{},"For paths written in Python, ",[19,255,250],{}," keeps the sequence readable and\navoids hand-building the ",[19,258,45],{}," string.",[48,261,263],{"className":50,"code":262,"language":52,"meta":53,"style":53},"import pydreamplet as dp\n\nsvg = dp.SVG(540, 360)\n\nwave_data = (\n    dp.PathBuilder()\n    .move_to(70, 220)\n    .curve_to(150, 80, 230, 80, 270, 180)\n    .smooth_curve_to(390, 280, 470, 140)\n)\n\nwave = dp.Path(\n    wave_data,\n    fill=\"none\",\n    stroke=\"currentColor\",\n    stroke_width=8,\n    stroke_linecap=\"round\",\n)\n\nsvg.append(wave)\n",[19,264,265,275,279,301,305,315,327,347,385,414,418,422,437,445,461,476,488,505,510,515],{"__ignoreMap":53},[57,266,267,269,271,273],{"class":59,"line":60},[57,268,64],{"class":63},[57,270,68],{"class":67},[57,272,71],{"class":63},[57,274,74],{"class":67},[57,276,277],{"class":59,"line":77},[57,278,81],{"emptyLinePlaceholder":80},[57,280,281,283,285,287,289,291,293,295,297,299],{"class":59,"line":84},[57,282,87],{"class":67},[57,284,91],{"class":90},[57,286,94],{"class":67},[57,288,34],{"class":97},[57,290,101],{"class":100},[57,292,104],{"class":97},[57,294,108],{"class":107},[57,296,111],{"class":97},[57,298,114],{"class":107},[57,300,117],{"class":97},[57,302,303],{"class":59,"line":120},[57,304,81],{"emptyLinePlaceholder":80},[57,306,307,310,312],{"class":59,"line":125},[57,308,309],{"class":67},"wave_data ",[57,311,91],{"class":90},[57,313,314],{"class":97}," (\n",[57,316,317,320,322,324],{"class":59,"line":142},[57,318,319],{"class":67},"    dp",[57,321,34],{"class":97},[57,323,250],{"class":100},[57,325,326],{"class":97},"()\n",[57,328,329,332,335,337,340,342,345],{"class":59,"line":159},[57,330,331],{"class":97},"    .",[57,333,334],{"class":100},"move_to",[57,336,104],{"class":97},[57,338,339],{"class":107},"70",[57,341,111],{"class":97},[57,343,344],{"class":107}," 220",[57,346,117],{"class":97},[57,348,349,351,354,356,359,361,364,366,369,371,373,375,378,380,383],{"class":59,"line":177},[57,350,331],{"class":97},[57,352,353],{"class":100},"curve_to",[57,355,104],{"class":97},[57,357,358],{"class":107},"150",[57,360,111],{"class":97},[57,362,363],{"class":107}," 80",[57,365,111],{"class":97},[57,367,368],{"class":107}," 230",[57,370,111],{"class":97},[57,372,363],{"class":107},[57,374,111],{"class":97},[57,376,377],{"class":107}," 270",[57,379,111],{"class":97},[57,381,382],{"class":107}," 180",[57,384,117],{"class":97},[57,386,387,389,392,394,397,399,402,404,407,409,412],{"class":59,"line":194},[57,388,331],{"class":97},[57,390,391],{"class":100},"smooth_curve_to",[57,393,104],{"class":97},[57,395,396],{"class":107},"390",[57,398,111],{"class":97},[57,400,401],{"class":107}," 280",[57,403,111],{"class":97},[57,405,406],{"class":107}," 470",[57,408,111],{"class":97},[57,410,411],{"class":107}," 140",[57,413,117],{"class":97},[57,415,416],{"class":59,"line":207},[57,417,117],{"class":97},[57,419,420],{"class":59,"line":212},[57,421,81],{"emptyLinePlaceholder":80},[57,423,424,427,429,431,433,435],{"class":59,"line":217},[57,425,426],{"class":67},"wave ",[57,428,91],{"class":90},[57,430,94],{"class":67},[57,432,34],{"class":97},[57,434,21],{"class":100},[57,436,139],{"class":97},[57,438,440,443],{"class":59,"line":439},13,[57,441,442],{"class":100},"    wave_data",[57,444,156],{"class":97},[57,446,448,450,452,454,457,459],{"class":59,"line":447},14,[57,449,163],{"class":162},[57,451,91],{"class":90},[57,453,153],{"class":145},[57,455,456],{"class":149},"none",[57,458,153],{"class":145},[57,460,156],{"class":97},[57,462,464,466,468,470,472,474],{"class":59,"line":463},15,[57,465,180],{"class":162},[57,467,91],{"class":90},[57,469,153],{"class":145},[57,471,187],{"class":149},[57,473,153],{"class":145},[57,475,156],{"class":97},[57,477,479,481,483,486],{"class":59,"line":478},16,[57,480,197],{"class":162},[57,482,91],{"class":90},[57,484,485],{"class":107},"8",[57,487,156],{"class":97},[57,489,491,494,496,498,501,503],{"class":59,"line":490},17,[57,492,493],{"class":162},"    stroke_linecap",[57,495,91],{"class":90},[57,497,153],{"class":145},[57,499,500],{"class":149},"round",[57,502,153],{"class":145},[57,504,156],{"class":97},[57,506,508],{"class":59,"line":507},18,[57,509,117],{"class":97},[57,511,513],{"class":59,"line":512},19,[57,514,81],{"emptyLinePlaceholder":80},[57,516,518,520,522,524,526,529],{"class":59,"line":517},20,[57,519,220],{"class":67},[57,521,34],{"class":97},[57,523,225],{"class":100},[57,525,104],{"class":97},[57,527,528],{"class":100},"wave",[57,530,117],{"class":97},[15,532,533,536,537,540],{},[19,534,535],{},"curve_to()"," creates a cubic Bézier curve with two control points and an end\npoint. ",[19,538,539],{},"smooth_curve_to()"," continues from the previous curve and infers the\nfirst control point.",[36,542,544],{"id":543},"reusable-shape-functions","Reusable Shape Functions",[15,546,547],{},"A small function can return path data for a reusable shape. This keeps geometry\nseparate from styling.",[48,549,551],{"className":50,"code":550,"language":52,"meta":53,"style":53},"def diamond_path(cx, cy, r):\n    return (\n        dp.PathBuilder()\n        .move_to(cx, cy - r)\n        .line_to(cx + r, cy)\n        .line_to(cx, cy + r)\n        .line_to(cx - r, cy)\n        .close()\n    )\n\n\ndiamond = dp.Path(\n    diamond_path(270, 138, 46),\n    fill=\"#14b8a6\",\n    stroke=\"currentColor\",\n    stroke_width=5,\n    opacity=0.92,\n)\n\nsvg.append(diamond)\n",[19,552,553,582,589,600,623,646,666,686,695,700,704,708,722,745,759,773,783,795,799,803],{"__ignoreMap":53},[57,554,555,559,563,565,569,571,574,576,579],{"class":59,"line":60},[57,556,558],{"class":557},"sfdCM","def",[57,560,562],{"class":561},"synEm"," diamond_path",[57,564,104],{"class":97},[57,566,568],{"class":567},"s1VEa","cx",[57,570,111],{"class":97},[57,572,573],{"class":567}," cy",[57,575,111],{"class":97},[57,577,578],{"class":567}," r",[57,580,581],{"class":97},"):\n",[57,583,584,587],{"class":59,"line":77},[57,585,586],{"class":63},"    return",[57,588,314],{"class":97},[57,590,591,594,596,598],{"class":59,"line":84},[57,592,593],{"class":67},"        dp",[57,595,34],{"class":97},[57,597,250],{"class":100},[57,599,326],{"class":97},[57,601,602,605,607,609,611,613,616,619,621],{"class":59,"line":120},[57,603,604],{"class":97},"        .",[57,606,334],{"class":100},[57,608,104],{"class":97},[57,610,568],{"class":100},[57,612,111],{"class":97},[57,614,615],{"class":100}," cy ",[57,617,618],{"class":90},"-",[57,620,578],{"class":100},[57,622,117],{"class":97},[57,624,625,627,630,632,635,638,640,642,644],{"class":59,"line":125},[57,626,604],{"class":97},[57,628,629],{"class":100},"line_to",[57,631,104],{"class":97},[57,633,634],{"class":100},"cx ",[57,636,637],{"class":90},"+",[57,639,578],{"class":100},[57,641,111],{"class":97},[57,643,573],{"class":100},[57,645,117],{"class":97},[57,647,648,650,652,654,656,658,660,662,664],{"class":59,"line":142},[57,649,604],{"class":97},[57,651,629],{"class":100},[57,653,104],{"class":97},[57,655,568],{"class":100},[57,657,111],{"class":97},[57,659,615],{"class":100},[57,661,637],{"class":90},[57,663,578],{"class":100},[57,665,117],{"class":97},[57,667,668,670,672,674,676,678,680,682,684],{"class":59,"line":159},[57,669,604],{"class":97},[57,671,629],{"class":100},[57,673,104],{"class":97},[57,675,634],{"class":100},[57,677,618],{"class":90},[57,679,578],{"class":100},[57,681,111],{"class":97},[57,683,573],{"class":100},[57,685,117],{"class":97},[57,687,688,690,693],{"class":59,"line":177},[57,689,604],{"class":97},[57,691,692],{"class":100},"close",[57,694,326],{"class":97},[57,696,697],{"class":59,"line":194},[57,698,699],{"class":97},"    )\n",[57,701,702],{"class":59,"line":207},[57,703,81],{"emptyLinePlaceholder":80},[57,705,706],{"class":59,"line":212},[57,707,81],{"emptyLinePlaceholder":80},[57,709,710,712,714,716,718,720],{"class":59,"line":217},[57,711,128],{"class":67},[57,713,91],{"class":90},[57,715,94],{"class":67},[57,717,34],{"class":97},[57,719,21],{"class":100},[57,721,139],{"class":97},[57,723,724,727,729,732,734,737,739,742],{"class":59,"line":439},[57,725,726],{"class":100},"    diamond_path",[57,728,104],{"class":97},[57,730,731],{"class":107},"270",[57,733,111],{"class":97},[57,735,736],{"class":107}," 138",[57,738,111],{"class":97},[57,740,741],{"class":107}," 46",[57,743,744],{"class":97},"),\n",[57,746,747,749,751,753,755,757],{"class":59,"line":447},[57,748,163],{"class":162},[57,750,91],{"class":90},[57,752,153],{"class":145},[57,754,170],{"class":149},[57,756,153],{"class":145},[57,758,156],{"class":97},[57,760,761,763,765,767,769,771],{"class":59,"line":463},[57,762,180],{"class":162},[57,764,91],{"class":90},[57,766,153],{"class":145},[57,768,187],{"class":149},[57,770,153],{"class":145},[57,772,156],{"class":97},[57,774,775,777,779,781],{"class":59,"line":478},[57,776,197],{"class":162},[57,778,91],{"class":90},[57,780,202],{"class":107},[57,782,156],{"class":97},[57,784,785,788,790,793],{"class":59,"line":490},[57,786,787],{"class":162},"    opacity",[57,789,91],{"class":90},[57,791,792],{"class":107},"0.92",[57,794,156],{"class":97},[57,796,797],{"class":59,"line":507},[57,798,117],{"class":97},[57,800,801],{"class":59,"line":512},[57,802,81],{"emptyLinePlaceholder":80},[57,804,805,807,809,811,813,815],{"class":59,"line":517},[57,806,220],{"class":67},[57,808,34],{"class":97},[57,810,225],{"class":100},[57,812,104],{"class":97},[57,814,230],{"class":100},[57,816,117],{"class":97},[818,819],"svg-preview",{"alt":820,"src":821},"Example SVG generated from the path basics code","\u002Fshowcase\u002Fpath_basics_01.svg",[36,823,825],{"id":824},"measuring-linear-paths","Measuring Linear Paths",[15,827,828,829,831],{},"For paths made of straight segments, ",[19,830,21],{}," exposes simple measurement helpers.",[48,833,835],{"className":50,"code":834,"language":52,"meta":53,"style":53},"route = dp.Path(\n    dp.PathBuilder()\n    .move_to(70, 220)\n    .line_to(270, 180)\n    .line_to(470, 140)\n)\n\nmidpoint = route.point_at(route.length \u002F 2)\ndirection = route.tangent_at(route.length \u002F 2)\n",[19,836,837,852,862,878,894,911,915,919,953],{"__ignoreMap":53},[57,838,839,842,844,846,848,850],{"class":59,"line":60},[57,840,841],{"class":67},"route ",[57,843,91],{"class":90},[57,845,94],{"class":67},[57,847,34],{"class":97},[57,849,21],{"class":100},[57,851,139],{"class":97},[57,853,854,856,858,860],{"class":59,"line":77},[57,855,319],{"class":100},[57,857,34],{"class":97},[57,859,250],{"class":100},[57,861,326],{"class":97},[57,863,864,866,868,870,872,874,876],{"class":59,"line":84},[57,865,331],{"class":97},[57,867,334],{"class":100},[57,869,104],{"class":97},[57,871,339],{"class":107},[57,873,111],{"class":97},[57,875,344],{"class":107},[57,877,117],{"class":97},[57,879,880,882,884,886,888,890,892],{"class":59,"line":120},[57,881,331],{"class":97},[57,883,629],{"class":100},[57,885,104],{"class":97},[57,887,731],{"class":107},[57,889,111],{"class":97},[57,891,382],{"class":107},[57,893,117],{"class":97},[57,895,896,898,900,902,905,907,909],{"class":59,"line":125},[57,897,331],{"class":97},[57,899,629],{"class":100},[57,901,104],{"class":97},[57,903,904],{"class":107},"470",[57,906,111],{"class":97},[57,908,411],{"class":107},[57,910,117],{"class":97},[57,912,913],{"class":59,"line":142},[57,914,117],{"class":97},[57,916,917],{"class":59,"line":159},[57,918,81],{"emptyLinePlaceholder":80},[57,920,921,924,926,929,931,934,936,939,941,945,948,951],{"class":59,"line":177},[57,922,923],{"class":67},"midpoint ",[57,925,91],{"class":90},[57,927,928],{"class":67}," route",[57,930,34],{"class":97},[57,932,933],{"class":100},"point_at",[57,935,104],{"class":97},[57,937,938],{"class":100},"route",[57,940,34],{"class":97},[57,942,944],{"class":943},"sm80-","length",[57,946,947],{"class":90}," \u002F",[57,949,950],{"class":107}," 2",[57,952,117],{"class":97},[57,954,955,958,960,962,964,967,969,971,973,975,977,979],{"class":59,"line":194},[57,956,957],{"class":67},"direction ",[57,959,91],{"class":90},[57,961,928],{"class":67},[57,963,34],{"class":97},[57,965,966],{"class":100},"tangent_at",[57,968,104],{"class":97},[57,970,938],{"class":100},[57,972,34],{"class":97},[57,974,944],{"class":943},[57,976,947],{"class":90},[57,978,950],{"class":107},[57,980,117],{"class":97},[15,982,983,986,987,990,991,994],{},[19,984,985],{},"point_at()"," returns a ",[19,988,989],{},"Vector"," on the path, and ",[19,992,993],{},"tangent_at()"," returns the\nlocal direction at that distance.",[36,996,998],{"id":997},"next","Next",[15,1000,1001,1002,1007],{},"Continue with ",[1003,1004,1006],"a",{"href":1005},"\u002Ftransform-basics","Transform basics"," to move, rotate, and scale\nelements with groups.",[1009,1010,1011],"style",{},"html pre.shiki code .sED7I, html code.shiki .sED7I{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#A0111F;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .soTeR, html code.shiki .soTeR{--shiki-light:#90A4AE;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sWKEy, html code.shiki .sWKEy{--shiki-light:#39ADB5;--shiki-default:#A0111F;--shiki-dark:#F97583}html pre.shiki code .sVsmf, html code.shiki .sVsmf{--shiki-light:#39ADB5;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sAK04, html code.shiki .sAK04{--shiki-light:#6182B8;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sNpir, html code.shiki .sNpir{--shiki-light:#F76D47;--shiki-default:#023B95;--shiki-dark:#79B8FF}html pre.shiki code .sqo_7, html code.shiki .sqo_7{--shiki-light:#39ADB5;--shiki-default:#032563;--shiki-dark:#9ECBFF}html pre.shiki code .s_jvP, html code.shiki .s_jvP{--shiki-light:#91B859;--shiki-default:#032563;--shiki-dark:#9ECBFF}html pre.shiki code .sYEV4, html code.shiki .sYEV4{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#702C00;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfdCM, html code.shiki .sfdCM{--shiki-light:#9C3EDA;--shiki-default:#A0111F;--shiki-dark:#F97583}html pre.shiki code .synEm, html code.shiki .synEm{--shiki-light:#6182B8;--shiki-default:#622CBC;--shiki-dark:#B392F0}html pre.shiki code .s1VEa, html code.shiki .s1VEa{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#0E1116;--shiki-default-font-style:inherit;--shiki-dark:#E1E4E8;--shiki-dark-font-style:inherit}html pre.shiki code .sm80-, html code.shiki .sm80-{--shiki-light:#E53935;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}",{"title":53,"searchDepth":84,"depth":84,"links":1013},[1014,1015,1016,1017,1018],{"id":38,"depth":77,"text":39},{"id":249,"depth":77,"text":250},{"id":543,"depth":77,"text":544},{"id":824,"depth":77,"text":825},{"id":997,"depth":77,"text":998},"Build custom SVG contours with Path and PathBuilder.","md",{"category":1022},"guide",{"title":5},"\u002Fpath-basics",{"title":5,"description":1019},"nwT15necv7VSSy2sKq58Ngj2ObddSjMJESY5ZDyTi0U",1780692544905]