[{"data":1,"prerenderedAt":1664},["ShallowReactive",2],{"docs:\u002Fdrawing-basics":3},{"id":4,"title":5,"body":6,"description":1656,"extension":1657,"meta":1658,"navigation":1660,"path":1661,"seo":1662,"stem":12,"__hash__":1663},"docs\u002Fdrawing-basics.md","Drawing basics",{"type":7,"value":8,"toc":1647},"minimark",[9,14,23,28,31,102,113,122,190,200,259,265,300,304,307,502,506,520,671,680,734,741,799,810,851,854,1062,1066,1088,1158,1168,1172,1185,1568,1572,1575,1600,1603,1620,1625,1629,1643],[10,11,13],"h1",{"id":12},"drawing-basics","Drawing Basics",[15,16,17,18,22],"p",{},"pyDreamplet follows the SVG document model. You create a root ",[19,20,21],"code",{},"SVG",", add\nelements to it, configure their attributes, and save or display the result.",[24,25,27],"h2",{"id":26},"canvas-size","Canvas Size",[15,29,30],{},"Create an SVG canvas with a width and height in SVG user units. In most cases,\none user unit maps to one CSS pixel when the file is displayed at its natural\nsize.",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"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","python","",[19,39,40,59,66],{"__ignoreMap":37},[41,42,45,49,53,56],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sED7I","import",[41,50,52],{"class":51},"soTeR"," pydreamplet ",[41,54,55],{"class":47},"as",[41,57,58],{"class":51}," dp\n",[41,60,62],{"class":43,"line":61},2,[41,63,65],{"emptyLinePlaceholder":64},true,"\n",[41,67,69,72,76,79,83,86,89,93,96,99],{"class":43,"line":68},3,[41,70,71],{"class":51},"svg ",[41,73,75],{"class":74},"sWKEy","=",[41,77,78],{"class":51}," dp",[41,80,82],{"class":81},"sVsmf",".",[41,84,21],{"class":85},"sAK04",[41,87,88],{"class":81},"(",[41,90,92],{"class":91},"sNpir","540",[41,94,95],{"class":81},",",[41,97,98],{"class":91}," 360",[41,100,101],{"class":81},")\n",[15,103,104,105,108,109,112],{},"The coordinate system starts in the top-left corner. ",[19,106,107],{},"x"," grows to the right and\n",[19,110,111],{},"y"," grows downward.",[15,114,115,117,118,121],{},[19,116,21],{}," also accepts a four-value viewBox. The display width and height default\nto the viewBox width and height with a ",[19,119,120],{},"px"," unit.",[32,123,125],{"className":34,"code":124,"language":36,"meta":37,"style":37},"svg = dp.SVG(10, 10, 540, 360)\n\nprint(svg.viewBox)\n# 10 10 540 360\n",[19,126,127,160,164,183],{"__ignoreMap":37},[41,128,129,131,133,135,137,139,141,144,146,149,151,154,156,158],{"class":43,"line":44},[41,130,71],{"class":51},[41,132,75],{"class":74},[41,134,78],{"class":51},[41,136,82],{"class":81},[41,138,21],{"class":85},[41,140,88],{"class":81},[41,142,143],{"class":91},"10",[41,145,95],{"class":81},[41,147,148],{"class":91}," 10",[41,150,95],{"class":81},[41,152,153],{"class":91}," 540",[41,155,95],{"class":81},[41,157,98],{"class":91},[41,159,101],{"class":81},[41,161,162],{"class":43,"line":61},[41,163,65],{"emptyLinePlaceholder":64},[41,165,166,170,172,175,177,181],{"class":43,"line":68},[41,167,169],{"class":168},"sBTIf","print",[41,171,88],{"class":81},[41,173,174],{"class":85},"svg",[41,176,82],{"class":81},[41,178,180],{"class":179},"sm80-","viewBox",[41,182,101],{"class":81},[41,184,186],{"class":43,"line":185},4,[41,187,189],{"class":188},"sxl37","# 10 10 540 360\n",[15,191,192,193,196,197,82],{},"Override the displayed size separately from the internal coordinate system with\n",[19,194,195],{},"width"," and ",[19,198,199],{},"height",[32,201,203],{"className":34,"code":202,"language":36,"meta":37,"style":37},"svg = dp.SVG(540, 360, width=\"1080px\", height=\"720px\")\n",[19,204,205],{"__ignoreMap":37},[41,206,207,209,211,213,215,217,219,221,223,225,227,231,233,237,241,243,245,248,250,252,255,257],{"class":43,"line":44},[41,208,71],{"class":51},[41,210,75],{"class":74},[41,212,78],{"class":51},[41,214,82],{"class":81},[41,216,21],{"class":85},[41,218,88],{"class":81},[41,220,92],{"class":91},[41,222,95],{"class":81},[41,224,98],{"class":91},[41,226,95],{"class":81},[41,228,230],{"class":229},"sYEV4"," width",[41,232,75],{"class":74},[41,234,236],{"class":235},"sqo_7","\"",[41,238,240],{"class":239},"s_jvP","1080px",[41,242,236],{"class":235},[41,244,95],{"class":81},[41,246,247],{"class":229}," height",[41,249,75],{"class":74},[41,251,236],{"class":235},[41,253,254],{"class":239},"720px",[41,256,236],{"class":235},[41,258,101],{"class":81},[15,260,261,262,82],{},"Load an existing SVG file with ",[19,263,264],{},"SVG.from_file()",[32,266,268],{"className":34,"code":267,"language":36,"meta":37,"style":37},"logo = dp.SVG.from_file(\"logo.svg\")\n",[19,269,270],{"__ignoreMap":37},[41,271,272,275,277,279,281,284,286,289,291,293,296,298],{"class":43,"line":44},[41,273,274],{"class":51},"logo ",[41,276,75],{"class":74},[41,278,78],{"class":51},[41,280,82],{"class":81},[41,282,21],{"class":283},"sHgB6",[41,285,82],{"class":81},[41,287,288],{"class":85},"from_file",[41,290,88],{"class":81},[41,292,236],{"class":235},[41,294,295],{"class":239},"logo.svg",[41,297,236],{"class":235},[41,299,101],{"class":81},[24,301,303],{"id":302},"shapes","Shapes",[15,305,306],{},"Append shapes to the canvas in drawing order. Later elements are painted above\nearlier elements.",[32,308,310],{"className":34,"code":309,"language":36,"meta":37,"style":37},"import pydreamplet as dp\n\nsvg = dp.SVG(540, 360)\n\ncircle = dp.Circle(\n    cx=svg.w \u002F 2,\n    cy=svg.h \u002F 2,\n    r=96,\n    fill=\"#14b8a6\",\n    stroke=\"currentColor\",\n    stroke_width=6,\n)\n\nsvg.append(circle)\n",[19,311,312,322,326,348,352,370,394,415,428,445,462,475,480,485],{"__ignoreMap":37},[41,313,314,316,318,320],{"class":43,"line":44},[41,315,48],{"class":47},[41,317,52],{"class":51},[41,319,55],{"class":47},[41,321,58],{"class":51},[41,323,324],{"class":43,"line":61},[41,325,65],{"emptyLinePlaceholder":64},[41,327,328,330,332,334,336,338,340,342,344,346],{"class":43,"line":68},[41,329,71],{"class":51},[41,331,75],{"class":74},[41,333,78],{"class":51},[41,335,82],{"class":81},[41,337,21],{"class":85},[41,339,88],{"class":81},[41,341,92],{"class":91},[41,343,95],{"class":81},[41,345,98],{"class":91},[41,347,101],{"class":81},[41,349,350],{"class":43,"line":185},[41,351,65],{"emptyLinePlaceholder":64},[41,353,355,358,360,362,364,367],{"class":43,"line":354},5,[41,356,357],{"class":51},"circle ",[41,359,75],{"class":74},[41,361,78],{"class":51},[41,363,82],{"class":81},[41,365,366],{"class":85},"Circle",[41,368,369],{"class":81},"(\n",[41,371,373,376,378,380,382,385,388,391],{"class":43,"line":372},6,[41,374,375],{"class":229},"    cx",[41,377,75],{"class":74},[41,379,174],{"class":85},[41,381,82],{"class":81},[41,383,384],{"class":179},"w",[41,386,387],{"class":74}," \u002F",[41,389,390],{"class":91}," 2",[41,392,393],{"class":81},",\n",[41,395,397,400,402,404,406,409,411,413],{"class":43,"line":396},7,[41,398,399],{"class":229},"    cy",[41,401,75],{"class":74},[41,403,174],{"class":85},[41,405,82],{"class":81},[41,407,408],{"class":179},"h",[41,410,387],{"class":74},[41,412,390],{"class":91},[41,414,393],{"class":81},[41,416,418,421,423,426],{"class":43,"line":417},8,[41,419,420],{"class":229},"    r",[41,422,75],{"class":74},[41,424,425],{"class":91},"96",[41,427,393],{"class":81},[41,429,431,434,436,438,441,443],{"class":43,"line":430},9,[41,432,433],{"class":229},"    fill",[41,435,75],{"class":74},[41,437,236],{"class":235},[41,439,440],{"class":239},"#14b8a6",[41,442,236],{"class":235},[41,444,393],{"class":81},[41,446,448,451,453,455,458,460],{"class":43,"line":447},10,[41,449,450],{"class":229},"    stroke",[41,452,75],{"class":74},[41,454,236],{"class":235},[41,456,457],{"class":239},"currentColor",[41,459,236],{"class":235},[41,461,393],{"class":81},[41,463,465,468,470,473],{"class":43,"line":464},11,[41,466,467],{"class":229},"    stroke_width",[41,469,75],{"class":74},[41,471,472],{"class":91},"6",[41,474,393],{"class":81},[41,476,478],{"class":43,"line":477},12,[41,479,101],{"class":81},[41,481,483],{"class":43,"line":482},13,[41,484,65],{"emptyLinePlaceholder":64},[41,486,488,490,492,495,497,500],{"class":43,"line":487},14,[41,489,174],{"class":51},[41,491,82],{"class":81},[41,493,494],{"class":85},"append",[41,496,88],{"class":81},[41,498,499],{"class":85},"circle",[41,501,101],{"class":81},[24,503,505],{"id":504},"styling","Styling",[15,507,508,509,512,513,512,516,519],{},"SVG styling is attribute based. Set ",[19,510,511],{},"fill",", ",[19,514,515],{},"stroke",[19,517,518],{},"stroke_width",", opacity,\nand other visual attributes on the element you are creating.",[32,521,523],{"className":34,"code":522,"language":36,"meta":37,"style":37},"label = dp.Text(\n    \"pyDreamplet\",\n    x=svg.w \u002F 2,\n    y=svg.h \u002F 2,\n    fill=\"currentColor\",\n    font_size=28,\n    text_anchor=\"middle\",\n    alignment_baseline=\"middle\",\n)\n\nsvg.append(label)\n",[19,524,525,541,553,572,591,605,617,633,648,652,656],{"__ignoreMap":37},[41,526,527,530,532,534,536,539],{"class":43,"line":44},[41,528,529],{"class":51},"label ",[41,531,75],{"class":74},[41,533,78],{"class":51},[41,535,82],{"class":81},[41,537,538],{"class":85},"Text",[41,540,369],{"class":81},[41,542,543,546,549,551],{"class":43,"line":61},[41,544,545],{"class":235},"    \"",[41,547,548],{"class":239},"pyDreamplet",[41,550,236],{"class":235},[41,552,393],{"class":81},[41,554,555,558,560,562,564,566,568,570],{"class":43,"line":68},[41,556,557],{"class":229},"    x",[41,559,75],{"class":74},[41,561,174],{"class":85},[41,563,82],{"class":81},[41,565,384],{"class":179},[41,567,387],{"class":74},[41,569,390],{"class":91},[41,571,393],{"class":81},[41,573,574,577,579,581,583,585,587,589],{"class":43,"line":185},[41,575,576],{"class":229},"    y",[41,578,75],{"class":74},[41,580,174],{"class":85},[41,582,82],{"class":81},[41,584,408],{"class":179},[41,586,387],{"class":74},[41,588,390],{"class":91},[41,590,393],{"class":81},[41,592,593,595,597,599,601,603],{"class":43,"line":354},[41,594,433],{"class":229},[41,596,75],{"class":74},[41,598,236],{"class":235},[41,600,457],{"class":239},[41,602,236],{"class":235},[41,604,393],{"class":81},[41,606,607,610,612,615],{"class":43,"line":372},[41,608,609],{"class":229},"    font_size",[41,611,75],{"class":74},[41,613,614],{"class":91},"28",[41,616,393],{"class":81},[41,618,619,622,624,626,629,631],{"class":43,"line":396},[41,620,621],{"class":229},"    text_anchor",[41,623,75],{"class":74},[41,625,236],{"class":235},[41,627,628],{"class":239},"middle",[41,630,236],{"class":235},[41,632,393],{"class":81},[41,634,635,638,640,642,644,646],{"class":43,"line":417},[41,636,637],{"class":229},"    alignment_baseline",[41,639,75],{"class":74},[41,641,236],{"class":235},[41,643,628],{"class":239},[41,645,236],{"class":235},[41,647,393],{"class":81},[41,649,650],{"class":43,"line":430},[41,651,101],{"class":81},[41,653,654],{"class":43,"line":447},[41,655,65],{"emptyLinePlaceholder":64},[41,657,658,660,662,664,666,669],{"class":43,"line":464},[41,659,174],{"class":51},[41,661,82],{"class":81},[41,663,494],{"class":85},[41,665,88],{"class":81},[41,667,668],{"class":85},"label",[41,670,101],{"class":81},[15,672,673,674,676,677,82],{},"SVG attribute names that contain hyphens are written with underscores in Python\nattribute access and keyword arguments. For example, ",[19,675,518],{}," serializes\nto ",[19,678,679],{},"stroke-width",[32,681,683],{"className":34,"code":682,"language":36,"meta":37,"style":37},"circle.fill = \"none\"\ncircle.stroke = \"#14b8a6\"\ncircle.stroke_width = 4\n",[19,684,685,705,721],{"__ignoreMap":37},[41,686,687,689,691,693,696,699,702],{"class":43,"line":44},[41,688,499],{"class":51},[41,690,82],{"class":81},[41,692,511],{"class":179},[41,694,695],{"class":74}," =",[41,697,698],{"class":235}," \"",[41,700,701],{"class":239},"none",[41,703,704],{"class":235},"\"\n",[41,706,707,709,711,713,715,717,719],{"class":43,"line":61},[41,708,499],{"class":51},[41,710,82],{"class":81},[41,712,515],{"class":179},[41,714,695],{"class":74},[41,716,698],{"class":235},[41,718,440],{"class":239},[41,720,704],{"class":235},[41,722,723,725,727,729,731],{"class":43,"line":68},[41,724,499],{"class":51},[41,726,82],{"class":81},[41,728,518],{"class":179},[41,730,695],{"class":74},[41,732,733],{"class":91}," 4\n",[15,735,736,737,740],{},"Use ",[19,738,739],{},"attrs()"," when you want to set several attributes at once. Keys can use the\nsame Python-friendly names.",[32,742,744],{"className":34,"code":743,"language":36,"meta":37,"style":37},"circle.attrs({\n    \"stroke_width\": 6,\n    \"stroke_linecap\": \"round\",\n})\n",[19,745,746,758,774,794],{"__ignoreMap":37},[41,747,748,750,752,755],{"class":43,"line":44},[41,749,499],{"class":51},[41,751,82],{"class":81},[41,753,754],{"class":85},"attrs",[41,756,757],{"class":81},"({\n",[41,759,760,762,764,766,769,772],{"class":43,"line":61},[41,761,545],{"class":235},[41,763,518],{"class":239},[41,765,236],{"class":235},[41,767,768],{"class":81},":",[41,770,771],{"class":91}," 6",[41,773,393],{"class":81},[41,775,776,778,781,783,785,787,790,792],{"class":43,"line":68},[41,777,545],{"class":235},[41,779,780],{"class":239},"stroke_linecap",[41,782,236],{"class":235},[41,784,768],{"class":81},[41,786,698],{"class":235},[41,788,789],{"class":239},"round",[41,791,236],{"class":235},[41,793,393],{"class":81},[41,795,796],{"class":43,"line":185},[41,797,798],{"class":81},"})\n",[15,800,801,802,805,806,809],{},"Assigning ",[19,803,804],{},"None"," removes an attribute. Use the SVG string ",[19,807,808],{},"\"none\""," when you\nwant to keep the attribute and render no paint.",[32,811,813],{"className":34,"code":812,"language":36,"meta":37,"style":37},"circle.fill = \"none\"  # SVG fill=\"none\"\ncircle.fill = None    # removes the fill attribute\n",[19,814,815,834],{"__ignoreMap":37},[41,816,817,819,821,823,825,827,829,831],{"class":43,"line":44},[41,818,499],{"class":51},[41,820,82],{"class":81},[41,822,511],{"class":179},[41,824,695],{"class":74},[41,826,698],{"class":235},[41,828,701],{"class":239},[41,830,236],{"class":235},[41,832,833],{"class":188},"  # SVG fill=\"none\"\n",[41,835,836,838,840,842,844,848],{"class":43,"line":61},[41,837,499],{"class":51},[41,839,82],{"class":81},[41,841,511],{"class":179},[41,843,695],{"class":74},[41,845,847],{"class":846},"sTy78"," None",[41,849,850],{"class":188},"    # removes the fill attribute\n",[15,852,853],{},"Use groups when multiple elements should move, transform, or share structure.",[32,855,857],{"className":34,"code":856,"language":36,"meta":37,"style":37},"dots = dp.G(pos=(svg.w \u002F 2, svg.h \u002F 2))\ndots.append(dp.Circle(cx=-svg.w \u002F 3, cy=0, r=24, fill=\"#95cf20\"))\ndots.append(dp.Circle(cx=svg.w \u002F 3, cy=0, r=24, fill=\"#f83898\"))\n\nsvg.append(dots)\n",[19,858,859,908,981,1044,1048],{"__ignoreMap":37},[41,860,861,864,866,868,870,873,875,878,880,882,884,886,888,890,892,894,897,899,901,903,905],{"class":43,"line":44},[41,862,863],{"class":51},"dots ",[41,865,75],{"class":74},[41,867,78],{"class":51},[41,869,82],{"class":81},[41,871,872],{"class":85},"G",[41,874,88],{"class":81},[41,876,877],{"class":229},"pos",[41,879,75],{"class":74},[41,881,88],{"class":81},[41,883,174],{"class":85},[41,885,82],{"class":81},[41,887,384],{"class":179},[41,889,387],{"class":74},[41,891,390],{"class":91},[41,893,95],{"class":81},[41,895,896],{"class":85}," svg",[41,898,82],{"class":81},[41,900,408],{"class":179},[41,902,387],{"class":74},[41,904,390],{"class":91},[41,906,907],{"class":81},"))\n",[41,909,910,913,915,917,919,922,924,926,928,931,934,936,938,940,942,945,947,950,952,955,957,960,962,965,967,970,972,974,977,979],{"class":43,"line":61},[41,911,912],{"class":51},"dots",[41,914,82],{"class":81},[41,916,494],{"class":85},[41,918,88],{"class":81},[41,920,921],{"class":85},"dp",[41,923,82],{"class":81},[41,925,366],{"class":85},[41,927,88],{"class":81},[41,929,930],{"class":229},"cx",[41,932,933],{"class":74},"=-",[41,935,174],{"class":85},[41,937,82],{"class":81},[41,939,384],{"class":179},[41,941,387],{"class":74},[41,943,944],{"class":91}," 3",[41,946,95],{"class":81},[41,948,949],{"class":229}," cy",[41,951,75],{"class":74},[41,953,954],{"class":91},"0",[41,956,95],{"class":81},[41,958,959],{"class":229}," r",[41,961,75],{"class":74},[41,963,964],{"class":91},"24",[41,966,95],{"class":81},[41,968,969],{"class":229}," fill",[41,971,75],{"class":74},[41,973,236],{"class":235},[41,975,976],{"class":239},"#95cf20",[41,978,236],{"class":235},[41,980,907],{"class":81},[41,982,983,985,987,989,991,993,995,997,999,1001,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031,1033,1035,1037,1040,1042],{"class":43,"line":68},[41,984,912],{"class":51},[41,986,82],{"class":81},[41,988,494],{"class":85},[41,990,88],{"class":81},[41,992,921],{"class":85},[41,994,82],{"class":81},[41,996,366],{"class":85},[41,998,88],{"class":81},[41,1000,930],{"class":229},[41,1002,75],{"class":74},[41,1004,174],{"class":85},[41,1006,82],{"class":81},[41,1008,384],{"class":179},[41,1010,387],{"class":74},[41,1012,944],{"class":91},[41,1014,95],{"class":81},[41,1016,949],{"class":229},[41,1018,75],{"class":74},[41,1020,954],{"class":91},[41,1022,95],{"class":81},[41,1024,959],{"class":229},[41,1026,75],{"class":74},[41,1028,964],{"class":91},[41,1030,95],{"class":81},[41,1032,969],{"class":229},[41,1034,75],{"class":74},[41,1036,236],{"class":235},[41,1038,1039],{"class":239},"#f83898",[41,1041,236],{"class":235},[41,1043,907],{"class":81},[41,1045,1046],{"class":43,"line":185},[41,1047,65],{"emptyLinePlaceholder":64},[41,1049,1050,1052,1054,1056,1058,1060],{"class":43,"line":354},[41,1051,174],{"class":51},[41,1053,82],{"class":81},[41,1055,494],{"class":85},[41,1057,88],{"class":81},[41,1059,912],{"class":85},[41,1061,101],{"class":81},[24,1063,1065],{"id":1064},"generic-elements","Generic Elements",[15,1067,1068,1069,512,1071,512,1074,512,1077,1080,1081,1083,1084,1087],{},"Use a dedicated wrapper such as ",[19,1070,366],{},[19,1072,1073],{},"Rect",[19,1075,1076],{},"Path",[19,1078,1079],{},"Use",", or ",[19,1082,538],{}," when\none exists. Use ",[19,1085,1086],{},"SvgElement"," for SVG tags that pyDreamplet does not wrap\ndirectly.",[32,1089,1091],{"className":34,"code":1090,"language":36,"meta":37,"style":37},"shadow = dp.SvgElement(\n    \"feDropShadow\",\n    dx=0,\n    dy=4,\n    stdDeviation=3,\n)\n",[19,1092,1093,1108,1119,1130,1142,1154],{"__ignoreMap":37},[41,1094,1095,1098,1100,1102,1104,1106],{"class":43,"line":44},[41,1096,1097],{"class":51},"shadow ",[41,1099,75],{"class":74},[41,1101,78],{"class":51},[41,1103,82],{"class":81},[41,1105,1086],{"class":85},[41,1107,369],{"class":81},[41,1109,1110,1112,1115,1117],{"class":43,"line":61},[41,1111,545],{"class":235},[41,1113,1114],{"class":239},"feDropShadow",[41,1116,236],{"class":235},[41,1118,393],{"class":81},[41,1120,1121,1124,1126,1128],{"class":43,"line":68},[41,1122,1123],{"class":229},"    dx",[41,1125,75],{"class":74},[41,1127,954],{"class":91},[41,1129,393],{"class":81},[41,1131,1132,1135,1137,1140],{"class":43,"line":185},[41,1133,1134],{"class":229},"    dy",[41,1136,75],{"class":74},[41,1138,1139],{"class":91},"4",[41,1141,393],{"class":81},[41,1143,1144,1147,1149,1152],{"class":43,"line":354},[41,1145,1146],{"class":229},"    stdDeviation",[41,1148,75],{"class":74},[41,1150,1151],{"class":91},"3",[41,1153,393],{"class":81},[41,1155,1156],{"class":43,"line":372},[41,1157,101],{"class":81},[15,1159,1160,1161,1164,1165,82],{},"Dedicated wrappers can expose extra convenience properties. A generic\n",[19,1162,1163],{},"SvgElement(\"circle\")"," serializes as a circle, but it does not have\ncircle-specific helpers such as ",[19,1166,1167],{},"area",[24,1169,1171],{"id":1170},"tree-operations","Tree Operations",[15,1173,1174,1177,1178,196,1181,1184],{},[19,1175,1176],{},"append()"," accepts one or more children. Use ",[19,1179,1180],{},"find()",[19,1182,1183],{},"find_all()"," to locate\nchildren by tag, id, or class.",[32,1186,1188],{"className":34,"code":1187,"language":36,"meta":37,"style":37},"svg = dp.SVG(400, 160)\n\nfor index in range(5):\n    svg.append(\n        dp.Circle(\n            cx=80 + index * 60,\n            cy=80,\n            r=18,\n            fill=\"#14b8a6\",\n            id=f\"dot-{index + 1}\",\n            class_name=\"even\" if index % 2 == 0 else \"odd\",\n        )\n    )\n\nfor dot in svg.find_all(\"circle\", class_name=\"odd\"):\n    dot.fill = \"none\"\n    dot.stroke = \"currentColor\"\n\nmiddle = svg.find(\"circle\", id=\"dot-3\")\nif middle is not None:\n    svg.remove(middle)\n",[19,1189,1190,1214,1218,1240,1251,1262,1285,1296,1308,1323,1357,1399,1404,1409,1413,1453,1471,1488,1493,1532,1552],{"__ignoreMap":37},[41,1191,1192,1194,1196,1198,1200,1202,1204,1207,1209,1212],{"class":43,"line":44},[41,1193,71],{"class":51},[41,1195,75],{"class":74},[41,1197,78],{"class":51},[41,1199,82],{"class":81},[41,1201,21],{"class":85},[41,1203,88],{"class":81},[41,1205,1206],{"class":91},"400",[41,1208,95],{"class":81},[41,1210,1211],{"class":91}," 160",[41,1213,101],{"class":81},[41,1215,1216],{"class":43,"line":61},[41,1217,65],{"emptyLinePlaceholder":64},[41,1219,1220,1223,1226,1229,1232,1234,1237],{"class":43,"line":68},[41,1221,1222],{"class":47},"for",[41,1224,1225],{"class":51}," index ",[41,1227,1228],{"class":47},"in",[41,1230,1231],{"class":168}," range",[41,1233,88],{"class":81},[41,1235,1236],{"class":91},"5",[41,1238,1239],{"class":81},"):\n",[41,1241,1242,1245,1247,1249],{"class":43,"line":185},[41,1243,1244],{"class":51},"    svg",[41,1246,82],{"class":81},[41,1248,494],{"class":85},[41,1250,369],{"class":81},[41,1252,1253,1256,1258,1260],{"class":43,"line":354},[41,1254,1255],{"class":85},"        dp",[41,1257,82],{"class":81},[41,1259,366],{"class":85},[41,1261,369],{"class":81},[41,1263,1264,1267,1269,1272,1275,1277,1280,1283],{"class":43,"line":372},[41,1265,1266],{"class":229},"            cx",[41,1268,75],{"class":74},[41,1270,1271],{"class":91},"80",[41,1273,1274],{"class":74}," +",[41,1276,1225],{"class":85},[41,1278,1279],{"class":74},"*",[41,1281,1282],{"class":91}," 60",[41,1284,393],{"class":81},[41,1286,1287,1290,1292,1294],{"class":43,"line":396},[41,1288,1289],{"class":229},"            cy",[41,1291,75],{"class":74},[41,1293,1271],{"class":91},[41,1295,393],{"class":81},[41,1297,1298,1301,1303,1306],{"class":43,"line":417},[41,1299,1300],{"class":229},"            r",[41,1302,75],{"class":74},[41,1304,1305],{"class":91},"18",[41,1307,393],{"class":81},[41,1309,1310,1313,1315,1317,1319,1321],{"class":43,"line":430},[41,1311,1312],{"class":229},"            fill",[41,1314,75],{"class":74},[41,1316,236],{"class":235},[41,1318,440],{"class":239},[41,1320,236],{"class":235},[41,1322,393],{"class":81},[41,1324,1325,1328,1330,1334,1337,1341,1344,1347,1350,1353,1355],{"class":43,"line":447},[41,1326,1327],{"class":229},"            id",[41,1329,75],{"class":74},[41,1331,1333],{"class":1332},"sfdCM","f",[41,1335,1336],{"class":239},"\"dot-",[41,1338,1340],{"class":1339},"smmm7","{",[41,1342,1343],{"class":85},"index ",[41,1345,1346],{"class":74},"+",[41,1348,1349],{"class":91}," 1",[41,1351,1352],{"class":1339},"}",[41,1354,236],{"class":239},[41,1356,393],{"class":81},[41,1358,1359,1362,1364,1366,1369,1371,1374,1376,1379,1381,1384,1387,1390,1392,1395,1397],{"class":43,"line":464},[41,1360,1361],{"class":229},"            class_name",[41,1363,75],{"class":74},[41,1365,236],{"class":235},[41,1367,1368],{"class":239},"even",[41,1370,236],{"class":235},[41,1372,1373],{"class":47}," if",[41,1375,1225],{"class":85},[41,1377,1378],{"class":74},"%",[41,1380,390],{"class":91},[41,1382,1383],{"class":74}," ==",[41,1385,1386],{"class":91}," 0",[41,1388,1389],{"class":47}," else",[41,1391,698],{"class":235},[41,1393,1394],{"class":239},"odd",[41,1396,236],{"class":235},[41,1398,393],{"class":81},[41,1400,1401],{"class":43,"line":477},[41,1402,1403],{"class":81},"        )\n",[41,1405,1406],{"class":43,"line":482},[41,1407,1408],{"class":81},"    )\n",[41,1410,1411],{"class":43,"line":487},[41,1412,65],{"emptyLinePlaceholder":64},[41,1414,1416,1418,1421,1423,1425,1427,1430,1432,1434,1436,1438,1440,1443,1445,1447,1449,1451],{"class":43,"line":1415},15,[41,1417,1222],{"class":47},[41,1419,1420],{"class":51}," dot ",[41,1422,1228],{"class":47},[41,1424,896],{"class":51},[41,1426,82],{"class":81},[41,1428,1429],{"class":85},"find_all",[41,1431,88],{"class":81},[41,1433,236],{"class":235},[41,1435,499],{"class":239},[41,1437,236],{"class":235},[41,1439,95],{"class":81},[41,1441,1442],{"class":229}," class_name",[41,1444,75],{"class":74},[41,1446,236],{"class":235},[41,1448,1394],{"class":239},[41,1450,236],{"class":235},[41,1452,1239],{"class":81},[41,1454,1456,1459,1461,1463,1465,1467,1469],{"class":43,"line":1455},16,[41,1457,1458],{"class":51},"    dot",[41,1460,82],{"class":81},[41,1462,511],{"class":179},[41,1464,695],{"class":74},[41,1466,698],{"class":235},[41,1468,701],{"class":239},[41,1470,704],{"class":235},[41,1472,1474,1476,1478,1480,1482,1484,1486],{"class":43,"line":1473},17,[41,1475,1458],{"class":51},[41,1477,82],{"class":81},[41,1479,515],{"class":179},[41,1481,695],{"class":74},[41,1483,698],{"class":235},[41,1485,457],{"class":239},[41,1487,704],{"class":235},[41,1489,1491],{"class":43,"line":1490},18,[41,1492,65],{"emptyLinePlaceholder":64},[41,1494,1496,1499,1501,1503,1505,1508,1510,1512,1514,1516,1518,1521,1523,1525,1528,1530],{"class":43,"line":1495},19,[41,1497,1498],{"class":51},"middle ",[41,1500,75],{"class":74},[41,1502,896],{"class":51},[41,1504,82],{"class":81},[41,1506,1507],{"class":85},"find",[41,1509,88],{"class":81},[41,1511,236],{"class":235},[41,1513,499],{"class":239},[41,1515,236],{"class":235},[41,1517,95],{"class":81},[41,1519,1520],{"class":229}," id",[41,1522,75],{"class":74},[41,1524,236],{"class":235},[41,1526,1527],{"class":239},"dot-3",[41,1529,236],{"class":235},[41,1531,101],{"class":81},[41,1533,1535,1538,1541,1544,1547,1549],{"class":43,"line":1534},20,[41,1536,1537],{"class":47},"if",[41,1539,1540],{"class":51}," middle ",[41,1542,1543],{"class":74},"is",[41,1545,1546],{"class":74}," not",[41,1548,847],{"class":846},[41,1550,1551],{"class":81},":\n",[41,1553,1555,1557,1559,1562,1564,1566],{"class":43,"line":1554},21,[41,1556,1244],{"class":51},[41,1558,82],{"class":81},[41,1560,1561],{"class":85},"remove",[41,1563,88],{"class":81},[41,1565,628],{"class":85},[41,1567,101],{"class":81},[24,1569,1571],{"id":1570},"output","Output",[15,1573,1574],{},"Save the drawing as an SVG file from scripts.",[32,1576,1578],{"className":34,"code":1577,"language":36,"meta":37,"style":37},"svg.save(\"drawing.svg\")\n",[19,1579,1580],{"__ignoreMap":37},[41,1581,1582,1584,1586,1589,1591,1593,1596,1598],{"class":43,"line":44},[41,1583,174],{"class":51},[41,1585,82],{"class":81},[41,1587,1588],{"class":85},"save",[41,1590,88],{"class":81},[41,1592,236],{"class":235},[41,1594,1595],{"class":239},"drawing.svg",[41,1597,236],{"class":235},[41,1599,101],{"class":81},[15,1601,1602],{},"In notebooks, render the current canvas inline.",[32,1604,1606],{"className":34,"code":1605,"language":36,"meta":37,"style":37},"svg.display()\n",[19,1607,1608],{"__ignoreMap":37},[41,1609,1610,1612,1614,1617],{"class":43,"line":44},[41,1611,174],{"class":51},[41,1613,82],{"class":81},[41,1615,1616],{"class":85},"display",[41,1618,1619],{"class":81},"()\n",[1621,1622],"svg-preview",{"alt":1623,"src":1624},"Example SVG generated from the drawing basics code","\u002Fshowcase\u002Fdrawing_basis_01.svg",[24,1626,1628],{"id":1627},"next","Next",[15,1630,1631,1632,1637,1638,196,1640,82],{},"Continue with ",[1633,1634,1636],"a",{"href":1635},"\u002Fpath-basics","Path basics"," to build custom contours with\n",[19,1639,1076],{},[19,1641,1642],{},"PathBuilder",[1644,1645,1646],"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 .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 .sBTIf, html code.shiki .sBTIf{--shiki-light:#6182B8;--shiki-default:#023B95;--shiki-dark:#79B8FF}html pre.shiki code .sm80-, html code.shiki .sm80-{--shiki-light:#E53935;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sxl37, html code.shiki .sxl37{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#66707B;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}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 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 .sHgB6, html code.shiki .sHgB6{--shiki-light:#E53935;--shiki-default:#023B95;--shiki-dark:#79B8FF}html pre.shiki code .sTy78, html code.shiki .sTy78{--shiki-light:#39ADB5;--shiki-default:#023B95;--shiki-dark:#79B8FF}html pre.shiki code .sfdCM, html code.shiki .sfdCM{--shiki-light:#9C3EDA;--shiki-default:#A0111F;--shiki-dark:#F97583}html pre.shiki code .smmm7, html code.shiki .smmm7{--shiki-light:#F76D47;--shiki-default:#A0111F;--shiki-dark:#79B8FF}",{"title":37,"searchDepth":68,"depth":68,"links":1648},[1649,1650,1651,1652,1653,1654,1655],{"id":26,"depth":61,"text":27},{"id":302,"depth":61,"text":303},{"id":504,"depth":61,"text":505},{"id":1064,"depth":61,"text":1065},{"id":1170,"depth":61,"text":1171},{"id":1570,"depth":61,"text":1571},{"id":1627,"depth":61,"text":1628},"Learn the core pyDreamplet drawing workflow with SVG canvases, shapes, attributes, and output.","md",{"category":1659},"guide",{"title":5},"\u002Fdrawing-basics",{"title":5,"description":1656},"rQXom_CItZRfUxvqGLf_cQQTEk1gZtmJIHXivEbOJUI",1780692544905]