[{"data":1,"prerenderedAt":1420},["ShallowReactive",2],{"docs:\u002Ftutorials\u002Flayered-svg-art":3},{"id":4,"title":5,"body":6,"description":1410,"extension":1411,"meta":1412,"navigation":1414,"path":1416,"seo":1417,"stem":1418,"__hash__":1419},"docs\u002Ftutorials\u002Flayered-svg-art.md","Layered SVG Art",{"type":7,"value":8,"toc":1403},"minimark",[9,13,17,22,162,166,169,293,297,304,603,608,611,830,834,838,848,1168,1172,1176,1198,1395,1399],[10,11,5],"h1",{"id":12},"layered-svg-art",[14,15,16],"p",{},"This tutorial builds an SVG artwork with two layers: blended arc segments in the\nfront and an animated gradient circle behind them.",[18,19,21],"h2",{"id":20},"imports-and-colors","Imports and Colors",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-python shiki shiki-themes material-theme-lighter github-light-high-contrast github-dark","import pydreamplet as dp\nfrom pydreamplet.colors import blend\nfrom pydreamplet.shapes import ring\n\ncolor1 = \"#e2cbc5\"\ncolor2 = \"#691016\"\ncolor3 = \"#92a1c2\"\ncolor4 = \"#082137\"\n","python","",[30,31,32,51,72,89,96,117,132,147],"code",{"__ignoreMap":28},[33,34,37,41,45,48],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sED7I","import",[33,42,44],{"class":43},"soTeR"," pydreamplet ",[33,46,47],{"class":39},"as",[33,49,50],{"class":43}," dp\n",[33,52,54,57,60,64,67,69],{"class":35,"line":53},2,[33,55,56],{"class":39},"from",[33,58,59],{"class":43}," pydreamplet",[33,61,63],{"class":62},"sVsmf",".",[33,65,66],{"class":43},"colors ",[33,68,40],{"class":39},[33,70,71],{"class":43}," blend\n",[33,73,75,77,79,81,84,86],{"class":35,"line":74},3,[33,76,56],{"class":39},[33,78,59],{"class":43},[33,80,63],{"class":62},[33,82,83],{"class":43},"shapes ",[33,85,40],{"class":39},[33,87,88],{"class":43}," ring\n",[33,90,92],{"class":35,"line":91},4,[33,93,95],{"emptyLinePlaceholder":94},true,"\n",[33,97,99,102,106,110,114],{"class":35,"line":98},5,[33,100,101],{"class":43},"color1 ",[33,103,105],{"class":104},"sWKEy","=",[33,107,109],{"class":108},"sqo_7"," \"",[33,111,113],{"class":112},"s_jvP","#e2cbc5",[33,115,116],{"class":108},"\"\n",[33,118,120,123,125,127,130],{"class":35,"line":119},6,[33,121,122],{"class":43},"color2 ",[33,124,105],{"class":104},[33,126,109],{"class":108},[33,128,129],{"class":112},"#691016",[33,131,116],{"class":108},[33,133,135,138,140,142,145],{"class":35,"line":134},7,[33,136,137],{"class":43},"color3 ",[33,139,105],{"class":104},[33,141,109],{"class":108},[33,143,144],{"class":112},"#92a1c2",[33,146,116],{"class":108},[33,148,150,153,155,157,160],{"class":35,"line":149},8,[33,151,152],{"class":43},"color4 ",[33,154,105],{"class":104},[33,156,109],{"class":108},[33,158,159],{"class":112},"#082137",[33,161,116],{"class":108},[18,163,165],{"id":164},"canvas-and-layers","Canvas and Layers",[14,167,168],{},"Create the canvas and two groups. The first group is appended first, so it is\npainted behind the arc layer.",[23,170,172],{"className":25,"code":171,"language":27,"meta":28,"style":28},"svg = dp.SVG(600, 600, width=\"300px\", height=\"300px\")\n\ncircle_layer = dp.G()\narc_layer = dp.G()\nsvg.append(circle_layer, arc_layer)\n",[30,173,174,235,239,256,271],{"__ignoreMap":28},[33,175,176,179,181,184,186,190,193,197,200,203,205,209,211,214,217,219,221,224,226,228,230,232],{"class":35,"line":36},[33,177,178],{"class":43},"svg ",[33,180,105],{"class":104},[33,182,183],{"class":43}," dp",[33,185,63],{"class":62},[33,187,189],{"class":188},"sAK04","SVG",[33,191,192],{"class":62},"(",[33,194,196],{"class":195},"sNpir","600",[33,198,199],{"class":62},",",[33,201,202],{"class":195}," 600",[33,204,199],{"class":62},[33,206,208],{"class":207},"sYEV4"," width",[33,210,105],{"class":104},[33,212,213],{"class":108},"\"",[33,215,216],{"class":112},"300px",[33,218,213],{"class":108},[33,220,199],{"class":62},[33,222,223],{"class":207}," height",[33,225,105],{"class":104},[33,227,213],{"class":108},[33,229,216],{"class":112},[33,231,213],{"class":108},[33,233,234],{"class":62},")\n",[33,236,237],{"class":35,"line":53},[33,238,95],{"emptyLinePlaceholder":94},[33,240,241,244,246,248,250,253],{"class":35,"line":74},[33,242,243],{"class":43},"circle_layer ",[33,245,105],{"class":104},[33,247,183],{"class":43},[33,249,63],{"class":62},[33,251,252],{"class":188},"G",[33,254,255],{"class":62},"()\n",[33,257,258,261,263,265,267,269],{"class":35,"line":91},[33,259,260],{"class":43},"arc_layer ",[33,262,105],{"class":104},[33,264,183],{"class":43},[33,266,63],{"class":62},[33,268,252],{"class":188},[33,270,255],{"class":62},[33,272,273,276,278,281,283,286,288,291],{"class":35,"line":98},[33,274,275],{"class":43},"svg",[33,277,63],{"class":62},[33,279,280],{"class":188},"append",[33,282,192],{"class":62},[33,284,285],{"class":188},"circle_layer",[33,287,199],{"class":62},[33,289,290],{"class":188}," arc_layer",[33,292,234],{"class":62},[18,294,296],{"id":295},"arc-segments","Arc Segments",[14,298,299,300,303],{},"The top half uses ",[30,301,302],{},"ring()"," paths from 180 to 360 degrees. Each iteration shifts\nthe center, reduces the radius, and blends the fill color.",[23,305,307],{"className":25,"code":306,"language":27,"meta":28,"style":28},"x = svg.w \u002F 2\nblend_prop = 0\nradius = 200\nradius_delta = radius \u002F 6\n\nfor _ in range(6):\n    arc = dp.Path(\n        d=ring(\n            x,\n            svg.h \u002F 2,\n            inner_radius=0,\n            outer_radius=radius,\n            start_angle=180,\n            end_angle=360,\n        ),\n        fill=blend(color1, color2, blend_prop),\n    )\n    arc_layer.append(arc)\n\n    x -= radius_delta\n    radius -= radius_delta\n    blend_prop += 1 \u002F 6\n",[30,308,309,331,341,351,367,371,394,411,423,432,450,463,476,489,502,508,537,543,560,565,577,587],{"__ignoreMap":28},[33,310,311,314,316,319,321,325,328],{"class":35,"line":36},[33,312,313],{"class":43},"x ",[33,315,105],{"class":104},[33,317,318],{"class":43}," svg",[33,320,63],{"class":62},[33,322,324],{"class":323},"sm80-","w",[33,326,327],{"class":104}," \u002F",[33,329,330],{"class":195}," 2\n",[33,332,333,336,338],{"class":35,"line":53},[33,334,335],{"class":43},"blend_prop ",[33,337,105],{"class":104},[33,339,340],{"class":195}," 0\n",[33,342,343,346,348],{"class":35,"line":74},[33,344,345],{"class":43},"radius ",[33,347,105],{"class":104},[33,349,350],{"class":195}," 200\n",[33,352,353,356,358,361,364],{"class":35,"line":91},[33,354,355],{"class":43},"radius_delta ",[33,357,105],{"class":104},[33,359,360],{"class":43}," radius ",[33,362,363],{"class":104},"\u002F",[33,365,366],{"class":195}," 6\n",[33,368,369],{"class":35,"line":98},[33,370,95],{"emptyLinePlaceholder":94},[33,372,373,376,379,382,386,388,391],{"class":35,"line":119},[33,374,375],{"class":39},"for",[33,377,378],{"class":43}," _ ",[33,380,381],{"class":39},"in",[33,383,385],{"class":384},"sBTIf"," range",[33,387,192],{"class":62},[33,389,390],{"class":195},"6",[33,392,393],{"class":62},"):\n",[33,395,396,399,401,403,405,408],{"class":35,"line":134},[33,397,398],{"class":43},"    arc ",[33,400,105],{"class":104},[33,402,183],{"class":43},[33,404,63],{"class":62},[33,406,407],{"class":188},"Path",[33,409,410],{"class":62},"(\n",[33,412,413,416,418,421],{"class":35,"line":149},[33,414,415],{"class":207},"        d",[33,417,105],{"class":104},[33,419,420],{"class":188},"ring",[33,422,410],{"class":62},[33,424,426,429],{"class":35,"line":425},9,[33,427,428],{"class":188},"            x",[33,430,431],{"class":62},",\n",[33,433,435,438,440,443,445,448],{"class":35,"line":434},10,[33,436,437],{"class":188},"            svg",[33,439,63],{"class":62},[33,441,442],{"class":323},"h",[33,444,327],{"class":104},[33,446,447],{"class":195}," 2",[33,449,431],{"class":62},[33,451,453,456,458,461],{"class":35,"line":452},11,[33,454,455],{"class":207},"            inner_radius",[33,457,105],{"class":104},[33,459,460],{"class":195},"0",[33,462,431],{"class":62},[33,464,466,469,471,474],{"class":35,"line":465},12,[33,467,468],{"class":207},"            outer_radius",[33,470,105],{"class":104},[33,472,473],{"class":188},"radius",[33,475,431],{"class":62},[33,477,479,482,484,487],{"class":35,"line":478},13,[33,480,481],{"class":207},"            start_angle",[33,483,105],{"class":104},[33,485,486],{"class":195},"180",[33,488,431],{"class":62},[33,490,492,495,497,500],{"class":35,"line":491},14,[33,493,494],{"class":207},"            end_angle",[33,496,105],{"class":104},[33,498,499],{"class":195},"360",[33,501,431],{"class":62},[33,503,505],{"class":35,"line":504},15,[33,506,507],{"class":62},"        ),\n",[33,509,511,514,516,519,521,524,526,529,531,534],{"class":35,"line":510},16,[33,512,513],{"class":207},"        fill",[33,515,105],{"class":104},[33,517,518],{"class":188},"blend",[33,520,192],{"class":62},[33,522,523],{"class":188},"color1",[33,525,199],{"class":62},[33,527,528],{"class":188}," color2",[33,530,199],{"class":62},[33,532,533],{"class":188}," blend_prop",[33,535,536],{"class":62},"),\n",[33,538,540],{"class":35,"line":539},17,[33,541,542],{"class":62},"    )\n",[33,544,546,549,551,553,555,558],{"class":35,"line":545},18,[33,547,548],{"class":43},"    arc_layer",[33,550,63],{"class":62},[33,552,280],{"class":188},[33,554,192],{"class":62},[33,556,557],{"class":188},"arc",[33,559,234],{"class":62},[33,561,563],{"class":35,"line":562},19,[33,564,95],{"emptyLinePlaceholder":94},[33,566,568,571,574],{"class":35,"line":567},20,[33,569,570],{"class":43},"    x ",[33,572,573],{"class":104},"-=",[33,575,576],{"class":43}," radius_delta\n",[33,578,580,583,585],{"class":35,"line":579},21,[33,581,582],{"class":43},"    radius ",[33,584,573],{"class":104},[33,586,576],{"class":43},[33,588,590,593,596,599,601],{"class":35,"line":589},22,[33,591,592],{"class":43},"    blend_prop ",[33,594,595],{"class":104},"+=",[33,597,598],{"class":195}," 1",[33,600,327],{"class":104},[33,602,366],{"class":195},[604,605],"svg-preview",{"alt":606,"src":607},"Top half arc segments with a fixed left edge and decreasing radius.","\u002Fshowcase\u002Ftutorial_layered_art_top.svg",[14,609,610],{},"The bottom half mirrors that idea and blends a second pair of colors.",[23,612,614],{"className":25,"code":613,"language":27,"meta":28,"style":28},"x = svg.w \u002F 2\nblend_prop = 0\nradius = 200\n\nfor _ in range(6):\n    arc = dp.Path(\n        d=ring(\n            x,\n            svg.h \u002F 2,\n            inner_radius=0,\n            outer_radius=radius,\n            start_angle=0,\n            end_angle=180,\n        ),\n        fill=blend(color3, color4, blend_prop),\n    )\n    arc_layer.append(arc)\n\n    x += radius_delta\n    radius -= radius_delta\n    blend_prop += 1 \u002F 6\n",[30,615,616,632,640,648,652,668,682,692,698,712,722,732,742,752,756,780,784,798,802,810,818],{"__ignoreMap":28},[33,617,618,620,622,624,626,628,630],{"class":35,"line":36},[33,619,313],{"class":43},[33,621,105],{"class":104},[33,623,318],{"class":43},[33,625,63],{"class":62},[33,627,324],{"class":323},[33,629,327],{"class":104},[33,631,330],{"class":195},[33,633,634,636,638],{"class":35,"line":53},[33,635,335],{"class":43},[33,637,105],{"class":104},[33,639,340],{"class":195},[33,641,642,644,646],{"class":35,"line":74},[33,643,345],{"class":43},[33,645,105],{"class":104},[33,647,350],{"class":195},[33,649,650],{"class":35,"line":91},[33,651,95],{"emptyLinePlaceholder":94},[33,653,654,656,658,660,662,664,666],{"class":35,"line":98},[33,655,375],{"class":39},[33,657,378],{"class":43},[33,659,381],{"class":39},[33,661,385],{"class":384},[33,663,192],{"class":62},[33,665,390],{"class":195},[33,667,393],{"class":62},[33,669,670,672,674,676,678,680],{"class":35,"line":119},[33,671,398],{"class":43},[33,673,105],{"class":104},[33,675,183],{"class":43},[33,677,63],{"class":62},[33,679,407],{"class":188},[33,681,410],{"class":62},[33,683,684,686,688,690],{"class":35,"line":134},[33,685,415],{"class":207},[33,687,105],{"class":104},[33,689,420],{"class":188},[33,691,410],{"class":62},[33,693,694,696],{"class":35,"line":149},[33,695,428],{"class":188},[33,697,431],{"class":62},[33,699,700,702,704,706,708,710],{"class":35,"line":425},[33,701,437],{"class":188},[33,703,63],{"class":62},[33,705,442],{"class":323},[33,707,327],{"class":104},[33,709,447],{"class":195},[33,711,431],{"class":62},[33,713,714,716,718,720],{"class":35,"line":434},[33,715,455],{"class":207},[33,717,105],{"class":104},[33,719,460],{"class":195},[33,721,431],{"class":62},[33,723,724,726,728,730],{"class":35,"line":452},[33,725,468],{"class":207},[33,727,105],{"class":104},[33,729,473],{"class":188},[33,731,431],{"class":62},[33,733,734,736,738,740],{"class":35,"line":465},[33,735,481],{"class":207},[33,737,105],{"class":104},[33,739,460],{"class":195},[33,741,431],{"class":62},[33,743,744,746,748,750],{"class":35,"line":478},[33,745,494],{"class":207},[33,747,105],{"class":104},[33,749,486],{"class":195},[33,751,431],{"class":62},[33,753,754],{"class":35,"line":491},[33,755,507],{"class":62},[33,757,758,760,762,764,766,769,771,774,776,778],{"class":35,"line":504},[33,759,513],{"class":207},[33,761,105],{"class":104},[33,763,518],{"class":188},[33,765,192],{"class":62},[33,767,768],{"class":188},"color3",[33,770,199],{"class":62},[33,772,773],{"class":188}," color4",[33,775,199],{"class":62},[33,777,533],{"class":188},[33,779,536],{"class":62},[33,781,782],{"class":35,"line":510},[33,783,542],{"class":62},[33,785,786,788,790,792,794,796],{"class":35,"line":539},[33,787,548],{"class":43},[33,789,63],{"class":62},[33,791,280],{"class":188},[33,793,192],{"class":62},[33,795,557],{"class":188},[33,797,234],{"class":62},[33,799,800],{"class":35,"line":545},[33,801,95],{"emptyLinePlaceholder":94},[33,803,804,806,808],{"class":35,"line":562},[33,805,570],{"class":43},[33,807,595],{"class":104},[33,809,576],{"class":43},[33,811,812,814,816],{"class":35,"line":567},[33,813,582],{"class":43},[33,815,573],{"class":104},[33,817,576],{"class":43},[33,819,820,822,824,826,828],{"class":35,"line":579},[33,821,592],{"class":43},[33,823,595],{"class":104},[33,825,598],{"class":195},[33,827,327],{"class":104},[33,829,366],{"class":195},[604,831],{"alt":832,"src":833},"Top and bottom arc segments layered together.","\u002Fshowcase\u002Ftutorial_layered_art_arcs.svg",[18,835,837],{"id":836},"animated-circle","Animated Circle",[14,839,840,843,844,847],{},[30,841,842],{},"Animate"," writes SVG ",[30,845,846],{},"\u003Canimate>"," elements. The first animation moves the dashed\nstroke; the second changes the circle radius.",[23,849,851],{"className":25,"code":850,"language":27,"meta":28,"style":28},"circle = dp.Circle(\n    cx=svg.w \u002F 2,\n    cy=svg.h \u002F 2,\n    r=250,\n    fill=\"none\",\n    stroke=\"currentColor\",\n    stroke_width=5,\n    stroke_dasharray=\"20,15\",\n    stroke_dashoffset=20,\n)\n\ndash_animation = dp.Animate(\"stroke-dashoffset\", dur=\"2s\")\ndash_animation.values = [0, 100]\n\nradius_animation = dp.Animate(\"r\", dur=\"2s\")\nradius_animation.values = [250, 200, 250]\n\ncircle.append(dash_animation, radius_animation)\ncircle_layer.append(circle)\n",[30,852,853,869,888,907,919,935,951,963,979,991,995,999,1037,1063,1067,1103,1130,1134,1154],{"__ignoreMap":28},[33,854,855,858,860,862,864,867],{"class":35,"line":36},[33,856,857],{"class":43},"circle ",[33,859,105],{"class":104},[33,861,183],{"class":43},[33,863,63],{"class":62},[33,865,866],{"class":188},"Circle",[33,868,410],{"class":62},[33,870,871,874,876,878,880,882,884,886],{"class":35,"line":53},[33,872,873],{"class":207},"    cx",[33,875,105],{"class":104},[33,877,275],{"class":188},[33,879,63],{"class":62},[33,881,324],{"class":323},[33,883,327],{"class":104},[33,885,447],{"class":195},[33,887,431],{"class":62},[33,889,890,893,895,897,899,901,903,905],{"class":35,"line":74},[33,891,892],{"class":207},"    cy",[33,894,105],{"class":104},[33,896,275],{"class":188},[33,898,63],{"class":62},[33,900,442],{"class":323},[33,902,327],{"class":104},[33,904,447],{"class":195},[33,906,431],{"class":62},[33,908,909,912,914,917],{"class":35,"line":91},[33,910,911],{"class":207},"    r",[33,913,105],{"class":104},[33,915,916],{"class":195},"250",[33,918,431],{"class":62},[33,920,921,924,926,928,931,933],{"class":35,"line":98},[33,922,923],{"class":207},"    fill",[33,925,105],{"class":104},[33,927,213],{"class":108},[33,929,930],{"class":112},"none",[33,932,213],{"class":108},[33,934,431],{"class":62},[33,936,937,940,942,944,947,949],{"class":35,"line":119},[33,938,939],{"class":207},"    stroke",[33,941,105],{"class":104},[33,943,213],{"class":108},[33,945,946],{"class":112},"currentColor",[33,948,213],{"class":108},[33,950,431],{"class":62},[33,952,953,956,958,961],{"class":35,"line":134},[33,954,955],{"class":207},"    stroke_width",[33,957,105],{"class":104},[33,959,960],{"class":195},"5",[33,962,431],{"class":62},[33,964,965,968,970,972,975,977],{"class":35,"line":149},[33,966,967],{"class":207},"    stroke_dasharray",[33,969,105],{"class":104},[33,971,213],{"class":108},[33,973,974],{"class":112},"20,15",[33,976,213],{"class":108},[33,978,431],{"class":62},[33,980,981,984,986,989],{"class":35,"line":425},[33,982,983],{"class":207},"    stroke_dashoffset",[33,985,105],{"class":104},[33,987,988],{"class":195},"20",[33,990,431],{"class":62},[33,992,993],{"class":35,"line":434},[33,994,234],{"class":62},[33,996,997],{"class":35,"line":452},[33,998,95],{"emptyLinePlaceholder":94},[33,1000,1001,1004,1006,1008,1010,1012,1014,1016,1019,1021,1023,1026,1028,1030,1033,1035],{"class":35,"line":465},[33,1002,1003],{"class":43},"dash_animation ",[33,1005,105],{"class":104},[33,1007,183],{"class":43},[33,1009,63],{"class":62},[33,1011,842],{"class":188},[33,1013,192],{"class":62},[33,1015,213],{"class":108},[33,1017,1018],{"class":112},"stroke-dashoffset",[33,1020,213],{"class":108},[33,1022,199],{"class":62},[33,1024,1025],{"class":207}," dur",[33,1027,105],{"class":104},[33,1029,213],{"class":108},[33,1031,1032],{"class":112},"2s",[33,1034,213],{"class":108},[33,1036,234],{"class":62},[33,1038,1039,1042,1044,1047,1050,1053,1055,1057,1060],{"class":35,"line":478},[33,1040,1041],{"class":43},"dash_animation",[33,1043,63],{"class":62},[33,1045,1046],{"class":323},"values",[33,1048,1049],{"class":104}," =",[33,1051,1052],{"class":62}," [",[33,1054,460],{"class":195},[33,1056,199],{"class":62},[33,1058,1059],{"class":195}," 100",[33,1061,1062],{"class":62},"]\n",[33,1064,1065],{"class":35,"line":491},[33,1066,95],{"emptyLinePlaceholder":94},[33,1068,1069,1072,1074,1076,1078,1080,1082,1084,1087,1089,1091,1093,1095,1097,1099,1101],{"class":35,"line":504},[33,1070,1071],{"class":43},"radius_animation ",[33,1073,105],{"class":104},[33,1075,183],{"class":43},[33,1077,63],{"class":62},[33,1079,842],{"class":188},[33,1081,192],{"class":62},[33,1083,213],{"class":108},[33,1085,1086],{"class":112},"r",[33,1088,213],{"class":108},[33,1090,199],{"class":62},[33,1092,1025],{"class":207},[33,1094,105],{"class":104},[33,1096,213],{"class":108},[33,1098,1032],{"class":112},[33,1100,213],{"class":108},[33,1102,234],{"class":62},[33,1104,1105,1108,1110,1112,1114,1116,1118,1120,1123,1125,1128],{"class":35,"line":510},[33,1106,1107],{"class":43},"radius_animation",[33,1109,63],{"class":62},[33,1111,1046],{"class":323},[33,1113,1049],{"class":104},[33,1115,1052],{"class":62},[33,1117,916],{"class":195},[33,1119,199],{"class":62},[33,1121,1122],{"class":195}," 200",[33,1124,199],{"class":62},[33,1126,1127],{"class":195}," 250",[33,1129,1062],{"class":62},[33,1131,1132],{"class":35,"line":539},[33,1133,95],{"emptyLinePlaceholder":94},[33,1135,1136,1139,1141,1143,1145,1147,1149,1152],{"class":35,"line":545},[33,1137,1138],{"class":43},"circle",[33,1140,63],{"class":62},[33,1142,280],{"class":188},[33,1144,192],{"class":62},[33,1146,1041],{"class":188},[33,1148,199],{"class":62},[33,1150,1151],{"class":188}," radius_animation",[33,1153,234],{"class":62},[33,1155,1156,1158,1160,1162,1164,1166],{"class":35,"line":562},[33,1157,285],{"class":43},[33,1159,63],{"class":62},[33,1161,280],{"class":188},[33,1163,192],{"class":62},[33,1165,1138],{"class":188},[33,1167,234],{"class":62},[604,1169],{"alt":1170,"src":1171},"Animated dashed circle showing the radius pulse before it is placed behind the arcs.","\u002Fshowcase\u002Ftutorial_layered_art_circle.svg",[18,1173,1175],{"id":1174},"gradient-fill","Gradient Fill",[14,1177,1178,1179,1182,1183,1186,1187,1190,1191,1194,1195,63],{},"Use ",[30,1180,1181],{},"ensure_defs()"," and ",[30,1184,1185],{},"LinearGradient"," for reusable SVG definitions. The\ngradient's ",[30,1188,1189],{},"url"," property returns the ",[30,1192,1193],{},"url(#...)"," reference used by ",[30,1196,1197],{},"fill",[23,1199,1201],{"className":25,"code":1200,"language":27,"meta":28,"style":28},"defs = svg.ensure_defs()\n\ngradient = dp.LinearGradient(id=\"art-gradient\", gradientTransform=\"rotate(90)\")\ngradient.add_stop(\"0%\", color3)\ngradient.add_stop(\"100%\", color1)\ndefs.append(gradient)\n\ncircle.fill = gradient.url\ncircle.stroke = \"#6b7280\"\n\nsvg.save(\"layered-art.svg\")\n",[30,1202,1203,1219,1223,1266,1292,1316,1331,1335,1353,1371,1375],{"__ignoreMap":28},[33,1204,1205,1208,1210,1212,1214,1217],{"class":35,"line":36},[33,1206,1207],{"class":43},"defs ",[33,1209,105],{"class":104},[33,1211,318],{"class":43},[33,1213,63],{"class":62},[33,1215,1216],{"class":188},"ensure_defs",[33,1218,255],{"class":62},[33,1220,1221],{"class":35,"line":53},[33,1222,95],{"emptyLinePlaceholder":94},[33,1224,1225,1228,1230,1232,1234,1236,1238,1241,1243,1245,1248,1250,1252,1255,1257,1259,1262,1264],{"class":35,"line":74},[33,1226,1227],{"class":43},"gradient ",[33,1229,105],{"class":104},[33,1231,183],{"class":43},[33,1233,63],{"class":62},[33,1235,1185],{"class":188},[33,1237,192],{"class":62},[33,1239,1240],{"class":207},"id",[33,1242,105],{"class":104},[33,1244,213],{"class":108},[33,1246,1247],{"class":112},"art-gradient",[33,1249,213],{"class":108},[33,1251,199],{"class":62},[33,1253,1254],{"class":207}," gradientTransform",[33,1256,105],{"class":104},[33,1258,213],{"class":108},[33,1260,1261],{"class":112},"rotate(90)",[33,1263,213],{"class":108},[33,1265,234],{"class":62},[33,1267,1268,1271,1273,1276,1278,1280,1283,1285,1287,1290],{"class":35,"line":91},[33,1269,1270],{"class":43},"gradient",[33,1272,63],{"class":62},[33,1274,1275],{"class":188},"add_stop",[33,1277,192],{"class":62},[33,1279,213],{"class":108},[33,1281,1282],{"class":112},"0%",[33,1284,213],{"class":108},[33,1286,199],{"class":62},[33,1288,1289],{"class":188}," color3",[33,1291,234],{"class":62},[33,1293,1294,1296,1298,1300,1302,1304,1307,1309,1311,1314],{"class":35,"line":98},[33,1295,1270],{"class":43},[33,1297,63],{"class":62},[33,1299,1275],{"class":188},[33,1301,192],{"class":62},[33,1303,213],{"class":108},[33,1305,1306],{"class":112},"100%",[33,1308,213],{"class":108},[33,1310,199],{"class":62},[33,1312,1313],{"class":188}," color1",[33,1315,234],{"class":62},[33,1317,1318,1321,1323,1325,1327,1329],{"class":35,"line":119},[33,1319,1320],{"class":43},"defs",[33,1322,63],{"class":62},[33,1324,280],{"class":188},[33,1326,192],{"class":62},[33,1328,1270],{"class":188},[33,1330,234],{"class":62},[33,1332,1333],{"class":35,"line":134},[33,1334,95],{"emptyLinePlaceholder":94},[33,1336,1337,1339,1341,1343,1345,1348,1350],{"class":35,"line":149},[33,1338,1138],{"class":43},[33,1340,63],{"class":62},[33,1342,1197],{"class":323},[33,1344,1049],{"class":104},[33,1346,1347],{"class":43}," gradient",[33,1349,63],{"class":62},[33,1351,1352],{"class":323},"url\n",[33,1354,1355,1357,1359,1362,1364,1366,1369],{"class":35,"line":425},[33,1356,1138],{"class":43},[33,1358,63],{"class":62},[33,1360,1361],{"class":323},"stroke",[33,1363,1049],{"class":104},[33,1365,109],{"class":108},[33,1367,1368],{"class":112},"#6b7280",[33,1370,116],{"class":108},[33,1372,1373],{"class":35,"line":434},[33,1374,95],{"emptyLinePlaceholder":94},[33,1376,1377,1379,1381,1384,1386,1388,1391,1393],{"class":35,"line":452},[33,1378,275],{"class":43},[33,1380,63],{"class":62},[33,1382,1383],{"class":188},"save",[33,1385,192],{"class":62},[33,1387,213],{"class":108},[33,1389,1390],{"class":112},"layered-art.svg",[33,1392,213],{"class":108},[33,1394,234],{"class":62},[604,1396],{"alt":1397,"src":1398},"Final layered SVG artwork with blended arcs and a gradient circle.","\u002Fshowcase\u002Ftutorial_layered_art_final.svg",[1400,1401,1402],"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 .sVsmf, html code.shiki .sVsmf{--shiki-light:#39ADB5;--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 .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 .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 .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 .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 .sm80-, html code.shiki .sm80-{--shiki-light:#E53935;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .sBTIf, html code.shiki .sBTIf{--shiki-light:#6182B8;--shiki-default:#023B95;--shiki-dark:#79B8FF}",{"title":28,"searchDepth":74,"depth":74,"links":1404},[1405,1406,1407,1408,1409],{"id":20,"depth":53,"text":21},{"id":164,"depth":53,"text":165},{"id":295,"depth":53,"text":296},{"id":836,"depth":53,"text":837},{"id":1174,"depth":53,"text":1175},"Build layered and animated SVG artwork with arcs, groups, gradients, and animations.","md",{"category":1413},"tutorials",{"title":1415},"Layered SVG art","\u002Ftutorials\u002Flayered-svg-art",{"title":5,"description":1410},"tutorials\u002Flayered-svg-art","koTnk-ALV_cGNqiUD-40_n86n4MJUTWt6M8spOMxNYQ",1780692544195]