[{"data":1,"prerenderedAt":2125},["ShallowReactive",2],{"docs:\u002Ftutorials\u002Fdancing-circles":3,"svg-preview:\u002Fshowcase\u002Fdancing_circles_light.svg:dark":2124},{"id":4,"title":5,"body":6,"description":2114,"extension":2115,"meta":2116,"navigation":2118,"path":2120,"seo":2121,"stem":2122,"__hash__":2123},"docs\u002Ftutorials\u002Fdancing-circles.md","Dancing Circles",{"type":7,"value":8,"toc":2104},"minimark",[9,13,17,22,34,122,126,129,261,267,271,278,359,365,369,372,444,447,451,454,579,593,597,600,790,801,1132,1136,1150,1271,1288,1292,2095,2100],[10,11,5],"h1",{"id":12},"dancing-circles",[14,15,16],"p",{},"This tutorial builds an animated radial composition from repeated circles. Each\ncircle starts on a ring, grows toward its own radius, moves to the center, and\nreturns to its starting point.",[18,19,21],"h2",{"id":20},"imports-and-theme","Imports and Theme",[14,23,24,25,29,30,33],{},"The composition uses ",[26,27,28],"code",{},"math"," for radial coordinates and ",[26,31,32],{},"Theme"," for Tailwind\ninspired default colors.",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-python shiki shiki-themes material-theme-lighter github-light-high-contrast github-dark","from math import cos, radians, sin\n\nimport pydreamplet as dp\n\ntheme = dp.Theme()\n","python","",[26,42,43,74,81,95,100],{"__ignoreMap":40},[44,45,48,52,56,59,62,66,69,71],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"sED7I","from",[44,53,55],{"class":54},"soTeR"," math ",[44,57,58],{"class":50},"import",[44,60,61],{"class":54}," cos",[44,63,65],{"class":64},"sVsmf",",",[44,67,68],{"class":54}," radians",[44,70,65],{"class":64},[44,72,73],{"class":54}," sin\n",[44,75,77],{"class":46,"line":76},2,[44,78,80],{"emptyLinePlaceholder":79},true,"\n",[44,82,84,86,89,92],{"class":46,"line":83},3,[44,85,58],{"class":50},[44,87,88],{"class":54}," pydreamplet ",[44,90,91],{"class":50},"as",[44,93,94],{"class":54}," dp\n",[44,96,98],{"class":46,"line":97},4,[44,99,80],{"emptyLinePlaceholder":79},[44,101,103,106,110,113,116,119],{"class":46,"line":102},5,[44,104,105],{"class":54},"theme ",[44,107,109],{"class":108},"sWKEy","=",[44,111,112],{"class":54}," dp",[44,114,115],{"class":64},".",[44,117,32],{"class":118},"sAK04",[44,120,121],{"class":64},"()\n",[18,123,125],{"id":124},"canvas-and-layout-values","Canvas and Layout Values",[14,127,128],{},"The SVG is square. The largest possible circle radius is based on half of the\ncanvas width minus a small margin.",[35,130,132],{"className":37,"code":131,"language":39,"meta":40,"style":40},"svg = dp.SVG(1024, 1024)\nmargin = 24\nmin_radius = 10\ncircle_count = 32\n\nmax_radius = svg.w \u002F 2 - margin\nradius_step = (max_radius - min_radius) \u002F (circle_count - 1)\n",[26,133,134,163,173,183,193,197,226],{"__ignoreMap":40},[44,135,136,139,141,143,145,148,151,155,157,160],{"class":46,"line":47},[44,137,138],{"class":54},"svg ",[44,140,109],{"class":108},[44,142,112],{"class":54},[44,144,115],{"class":64},[44,146,147],{"class":118},"SVG",[44,149,150],{"class":64},"(",[44,152,154],{"class":153},"sNpir","1024",[44,156,65],{"class":64},[44,158,159],{"class":153}," 1024",[44,161,162],{"class":64},")\n",[44,164,165,168,170],{"class":46,"line":76},[44,166,167],{"class":54},"margin ",[44,169,109],{"class":108},[44,171,172],{"class":153}," 24\n",[44,174,175,178,180],{"class":46,"line":83},[44,176,177],{"class":54},"min_radius ",[44,179,109],{"class":108},[44,181,182],{"class":153}," 10\n",[44,184,185,188,190],{"class":46,"line":97},[44,186,187],{"class":54},"circle_count ",[44,189,109],{"class":108},[44,191,192],{"class":153}," 32\n",[44,194,195],{"class":46,"line":102},[44,196,80],{"emptyLinePlaceholder":79},[44,198,200,203,205,208,210,214,217,220,223],{"class":46,"line":199},6,[44,201,202],{"class":54},"max_radius ",[44,204,109],{"class":108},[44,206,207],{"class":54}," svg",[44,209,115],{"class":64},[44,211,213],{"class":212},"sm80-","w",[44,215,216],{"class":108}," \u002F",[44,218,219],{"class":153}," 2",[44,221,222],{"class":108}," -",[44,224,225],{"class":54}," margin\n",[44,227,229,232,234,237,239,242,245,248,250,252,254,256,259],{"class":46,"line":228},7,[44,230,231],{"class":54},"radius_step ",[44,233,109],{"class":108},[44,235,236],{"class":64}," (",[44,238,202],{"class":54},[44,240,241],{"class":108},"-",[44,243,244],{"class":54}," min_radius",[44,246,247],{"class":64},")",[44,249,216],{"class":108},[44,251,236],{"class":64},[44,253,187],{"class":54},[44,255,241],{"class":108},[44,257,258],{"class":153}," 1",[44,260,162],{"class":64},[14,262,263,266],{},[26,264,265],{},"circle_count"," controls both the number of circles and the angular spacing. A\nhigher value makes the ring denser; a lower value makes the individual motion\neasier to read.",[18,268,270],{"id":269},"blended-stroke-colors","Blended Stroke Colors",[14,272,273,274,277],{},"Create one color for each circle by blending between the theme's pink and sky\ntokens. ",[26,275,276],{},"blend()"," accepts theme colors directly, including OKLCH values.",[35,279,281],{"className":37,"code":280,"language":39,"meta":40,"style":40},"colors = [\n    dp.blend(theme.pink, theme.sky, i \u002F circle_count) for i in range(circle_count)\n]\n",[26,282,283,293,354],{"__ignoreMap":40},[44,284,285,288,290],{"class":46,"line":47},[44,286,287],{"class":54},"colors ",[44,289,109],{"class":108},[44,291,292],{"class":64}," [\n",[44,294,295,298,300,303,305,308,310,313,315,318,320,323,325,328,331,334,336,339,341,344,348,350,352],{"class":46,"line":76},[44,296,297],{"class":54},"    dp",[44,299,115],{"class":64},[44,301,302],{"class":118},"blend",[44,304,150],{"class":64},[44,306,307],{"class":118},"theme",[44,309,115],{"class":64},[44,311,312],{"class":212},"pink",[44,314,65],{"class":64},[44,316,317],{"class":118}," theme",[44,319,115],{"class":64},[44,321,322],{"class":212},"sky",[44,324,65],{"class":64},[44,326,327],{"class":118}," i ",[44,329,330],{"class":108},"\u002F",[44,332,333],{"class":118}," circle_count",[44,335,247],{"class":64},[44,337,338],{"class":50}," for",[44,340,327],{"class":54},[44,342,343],{"class":50},"in",[44,345,347],{"class":346},"sBTIf"," range",[44,349,150],{"class":64},[44,351,265],{"class":118},[44,353,162],{"class":64},[44,355,356],{"class":46,"line":83},[44,357,358],{"class":64},"]\n",[14,360,361,364],{},[26,362,363],{},"dp.blend_colors()"," is also available when you prefer the more explicit name.",[18,366,368],{"id":367},"centered-group","Centered Group",[14,370,371],{},"Instead of adding half of the canvas width and height to every circle, place a\ngroup in the center of the SVG. Every circle can then use coordinates relative\nto that center.",[35,373,375],{"className":37,"code":374,"language":39,"meta":40,"style":40},"g = dp.G(pos=(svg.w \u002F 2, svg.h \u002F 2))\nsvg.append(g)\n",[26,376,377,428],{"__ignoreMap":40},[44,378,379,382,384,386,388,391,393,397,399,401,404,406,408,410,412,414,416,418,421,423,425],{"class":46,"line":47},[44,380,381],{"class":54},"g ",[44,383,109],{"class":108},[44,385,112],{"class":54},[44,387,115],{"class":64},[44,389,390],{"class":118},"G",[44,392,150],{"class":64},[44,394,396],{"class":395},"sYEV4","pos",[44,398,109],{"class":108},[44,400,150],{"class":64},[44,402,403],{"class":118},"svg",[44,405,115],{"class":64},[44,407,213],{"class":212},[44,409,216],{"class":108},[44,411,219],{"class":153},[44,413,65],{"class":64},[44,415,207],{"class":118},[44,417,115],{"class":64},[44,419,420],{"class":212},"h",[44,422,216],{"class":108},[44,424,219],{"class":153},[44,426,427],{"class":64},"))\n",[44,429,430,432,434,437,439,442],{"class":46,"line":76},[44,431,403],{"class":54},[44,433,115],{"class":64},[44,435,436],{"class":118},"append",[44,438,150],{"class":64},[44,440,441],{"class":118},"g",[44,443,162],{"class":64},[14,445,446],{},"The group will receive its rotation animation after the circles are appended,\nso the whole composition rotates as one element.",[18,448,450],{"id":449},"circle-positions","Circle Positions",[14,452,453],{},"Divide the full circle into equal angles. For each index, compute the angle,\nthe circle's final radius, and the starting position on the outer ring.",[35,455,457],{"className":37,"code":456,"language":39,"meta":40,"style":40},"angle_step = 360 \u002F circle_count\n\nfor i in range(circle_count):\n    angle = radians(i * angle_step)\n    r = min_radius + i * radius_step\n    final_cx = max_radius * cos(angle)\n    final_cy = max_radius * sin(angle)\n",[26,458,459,474,478,496,518,538,559],{"__ignoreMap":40},[44,460,461,464,466,469,471],{"class":46,"line":47},[44,462,463],{"class":54},"angle_step ",[44,465,109],{"class":108},[44,467,468],{"class":153}," 360",[44,470,216],{"class":108},[44,472,473],{"class":54}," circle_count\n",[44,475,476],{"class":46,"line":76},[44,477,80],{"emptyLinePlaceholder":79},[44,479,480,483,485,487,489,491,493],{"class":46,"line":83},[44,481,482],{"class":50},"for",[44,484,327],{"class":54},[44,486,343],{"class":50},[44,488,347],{"class":346},[44,490,150],{"class":64},[44,492,265],{"class":118},[44,494,495],{"class":64},"):\n",[44,497,498,501,503,505,507,510,513,516],{"class":46,"line":97},[44,499,500],{"class":54},"    angle ",[44,502,109],{"class":108},[44,504,68],{"class":118},[44,506,150],{"class":64},[44,508,509],{"class":118},"i ",[44,511,512],{"class":108},"*",[44,514,515],{"class":118}," angle_step",[44,517,162],{"class":64},[44,519,520,523,525,528,531,533,535],{"class":46,"line":102},[44,521,522],{"class":54},"    r ",[44,524,109],{"class":108},[44,526,527],{"class":54}," min_radius ",[44,529,530],{"class":108},"+",[44,532,327],{"class":54},[44,534,512],{"class":108},[44,536,537],{"class":54}," radius_step\n",[44,539,540,543,545,548,550,552,554,557],{"class":46,"line":199},[44,541,542],{"class":54},"    final_cx ",[44,544,109],{"class":108},[44,546,547],{"class":54}," max_radius ",[44,549,512],{"class":108},[44,551,61],{"class":118},[44,553,150],{"class":64},[44,555,556],{"class":118},"angle",[44,558,162],{"class":64},[44,560,561,564,566,568,570,573,575,577],{"class":46,"line":228},[44,562,563],{"class":54},"    final_cy ",[44,565,109],{"class":108},[44,567,547],{"class":54},[44,569,512],{"class":108},[44,571,572],{"class":118}," sin",[44,574,150],{"class":64},[44,576,556],{"class":118},[44,578,162],{"class":64},[14,580,581,584,585,588,589,592],{},[26,582,583],{},"cos()"," gives the x coordinate and ",[26,586,587],{},"sin()"," gives the y coordinate. Multiplying\nboth by ",[26,590,591],{},"max_radius"," places the circle on the outer ring.",[18,594,596],{"id":595},"animated-circles","Animated Circles",[14,598,599],{},"Each circle starts with the same small radius. The stroke color comes from the\nblended palette, and the fill is transparent.",[35,601,603],{"className":37,"code":602,"language":39,"meta":40,"style":40},"for i in range(circle_count):\n    angle = radians(i * angle_step)\n    r = min_radius + i * radius_step\n    final_cx = max_radius * cos(angle)\n    final_cy = max_radius * sin(angle)\n\n    circle = dp.Circle(\n        pos=(final_cx, final_cy),\n        r=min_radius,\n        fill=theme.transparent,\n        stroke=colors[i],\n    )\n",[26,604,605,621,639,655,673,691,695,712,733,747,764,784],{"__ignoreMap":40},[44,606,607,609,611,613,615,617,619],{"class":46,"line":47},[44,608,482],{"class":50},[44,610,327],{"class":54},[44,612,343],{"class":50},[44,614,347],{"class":346},[44,616,150],{"class":64},[44,618,265],{"class":118},[44,620,495],{"class":64},[44,622,623,625,627,629,631,633,635,637],{"class":46,"line":76},[44,624,500],{"class":54},[44,626,109],{"class":108},[44,628,68],{"class":118},[44,630,150],{"class":64},[44,632,509],{"class":118},[44,634,512],{"class":108},[44,636,515],{"class":118},[44,638,162],{"class":64},[44,640,641,643,645,647,649,651,653],{"class":46,"line":83},[44,642,522],{"class":54},[44,644,109],{"class":108},[44,646,527],{"class":54},[44,648,530],{"class":108},[44,650,327],{"class":54},[44,652,512],{"class":108},[44,654,537],{"class":54},[44,656,657,659,661,663,665,667,669,671],{"class":46,"line":97},[44,658,542],{"class":54},[44,660,109],{"class":108},[44,662,547],{"class":54},[44,664,512],{"class":108},[44,666,61],{"class":118},[44,668,150],{"class":64},[44,670,556],{"class":118},[44,672,162],{"class":64},[44,674,675,677,679,681,683,685,687,689],{"class":46,"line":102},[44,676,563],{"class":54},[44,678,109],{"class":108},[44,680,547],{"class":54},[44,682,512],{"class":108},[44,684,572],{"class":118},[44,686,150],{"class":64},[44,688,556],{"class":118},[44,690,162],{"class":64},[44,692,693],{"class":46,"line":199},[44,694,80],{"emptyLinePlaceholder":79},[44,696,697,700,702,704,706,709],{"class":46,"line":228},[44,698,699],{"class":54},"    circle ",[44,701,109],{"class":108},[44,703,112],{"class":54},[44,705,115],{"class":64},[44,707,708],{"class":118},"Circle",[44,710,711],{"class":64},"(\n",[44,713,715,718,720,722,725,727,730],{"class":46,"line":714},8,[44,716,717],{"class":395},"        pos",[44,719,109],{"class":108},[44,721,150],{"class":64},[44,723,724],{"class":118},"final_cx",[44,726,65],{"class":64},[44,728,729],{"class":118}," final_cy",[44,731,732],{"class":64},"),\n",[44,734,736,739,741,744],{"class":46,"line":735},9,[44,737,738],{"class":395},"        r",[44,740,109],{"class":108},[44,742,743],{"class":118},"min_radius",[44,745,746],{"class":64},",\n",[44,748,750,753,755,757,759,762],{"class":46,"line":749},10,[44,751,752],{"class":395},"        fill",[44,754,109],{"class":108},[44,756,307],{"class":118},[44,758,115],{"class":64},[44,760,761],{"class":212},"transparent",[44,763,746],{"class":64},[44,765,767,770,772,775,778,781],{"class":46,"line":766},11,[44,768,769],{"class":395},"        stroke",[44,771,109],{"class":108},[44,773,774],{"class":118},"colors",[44,776,777],{"class":64},"[",[44,779,780],{"class":118},"i",[44,782,783],{"class":64},"],\n",[44,785,787],{"class":46,"line":786},12,[44,788,789],{"class":64},"    )\n",[14,791,792,793,796,797,800],{},"Add three animations: one for radius, one for ",[26,794,795],{},"cx",", and one for ",[26,798,799],{},"cy",". The radius\ngrows and shrinks; the center point moves inward and back out.",[35,802,804],{"className":37,"code":803,"language":39,"meta":40,"style":40},"for i in range(circle_count):\n    angle = radians(i * angle_step)\n    r = min_radius + i * radius_step\n    final_cx = max_radius * cos(angle)\n    final_cy = max_radius * sin(angle)\n    circle = dp.Circle(pos=(final_cx, final_cy), r=min_radius)\n\n    circle.append(dp.Animate(\"r\", values=[min_radius, r, min_radius], dur=\"5s\"))\n    circle.append(dp.Animate(\"cx\", values=[final_cx, 0, final_cx], dur=\"5s\"))\n    circle.append(dp.Animate(\"cy\", values=[final_cy, 0, final_cy], dur=\"5s\"))\n    g.append(circle)\n",[26,805,806,822,840,856,874,892,930,934,1001,1059,1116],{"__ignoreMap":40},[44,807,808,810,812,814,816,818,820],{"class":46,"line":47},[44,809,482],{"class":50},[44,811,327],{"class":54},[44,813,343],{"class":50},[44,815,347],{"class":346},[44,817,150],{"class":64},[44,819,265],{"class":118},[44,821,495],{"class":64},[44,823,824,826,828,830,832,834,836,838],{"class":46,"line":76},[44,825,500],{"class":54},[44,827,109],{"class":108},[44,829,68],{"class":118},[44,831,150],{"class":64},[44,833,509],{"class":118},[44,835,512],{"class":108},[44,837,515],{"class":118},[44,839,162],{"class":64},[44,841,842,844,846,848,850,852,854],{"class":46,"line":83},[44,843,522],{"class":54},[44,845,109],{"class":108},[44,847,527],{"class":54},[44,849,530],{"class":108},[44,851,327],{"class":54},[44,853,512],{"class":108},[44,855,537],{"class":54},[44,857,858,860,862,864,866,868,870,872],{"class":46,"line":97},[44,859,542],{"class":54},[44,861,109],{"class":108},[44,863,547],{"class":54},[44,865,512],{"class":108},[44,867,61],{"class":118},[44,869,150],{"class":64},[44,871,556],{"class":118},[44,873,162],{"class":64},[44,875,876,878,880,882,884,886,888,890],{"class":46,"line":102},[44,877,563],{"class":54},[44,879,109],{"class":108},[44,881,547],{"class":54},[44,883,512],{"class":108},[44,885,572],{"class":118},[44,887,150],{"class":64},[44,889,556],{"class":118},[44,891,162],{"class":64},[44,893,894,896,898,900,902,904,906,908,910,912,914,916,918,921,924,926,928],{"class":46,"line":199},[44,895,699],{"class":54},[44,897,109],{"class":108},[44,899,112],{"class":54},[44,901,115],{"class":64},[44,903,708],{"class":118},[44,905,150],{"class":64},[44,907,396],{"class":395},[44,909,109],{"class":108},[44,911,150],{"class":64},[44,913,724],{"class":118},[44,915,65],{"class":64},[44,917,729],{"class":118},[44,919,920],{"class":64},"),",[44,922,923],{"class":395}," r",[44,925,109],{"class":108},[44,927,743],{"class":118},[44,929,162],{"class":64},[44,931,932],{"class":46,"line":228},[44,933,80],{"emptyLinePlaceholder":79},[44,935,936,939,941,943,945,948,950,953,955,959,963,965,967,970,972,974,976,978,980,982,984,987,990,992,994,997,999],{"class":46,"line":714},[44,937,938],{"class":54},"    circle",[44,940,115],{"class":64},[44,942,436],{"class":118},[44,944,150],{"class":64},[44,946,947],{"class":118},"dp",[44,949,115],{"class":64},[44,951,952],{"class":118},"Animate",[44,954,150],{"class":64},[44,956,958],{"class":957},"sqo_7","\"",[44,960,962],{"class":961},"s_jvP","r",[44,964,958],{"class":957},[44,966,65],{"class":64},[44,968,969],{"class":395}," values",[44,971,109],{"class":108},[44,973,777],{"class":64},[44,975,743],{"class":118},[44,977,65],{"class":64},[44,979,923],{"class":118},[44,981,65],{"class":64},[44,983,244],{"class":118},[44,985,986],{"class":64},"],",[44,988,989],{"class":395}," dur",[44,991,109],{"class":108},[44,993,958],{"class":957},[44,995,996],{"class":961},"5s",[44,998,958],{"class":957},[44,1000,427],{"class":64},[44,1002,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031,1033,1035,1037,1040,1042,1045,1047,1049,1051,1053,1055,1057],{"class":46,"line":735},[44,1004,938],{"class":54},[44,1006,115],{"class":64},[44,1008,436],{"class":118},[44,1010,150],{"class":64},[44,1012,947],{"class":118},[44,1014,115],{"class":64},[44,1016,952],{"class":118},[44,1018,150],{"class":64},[44,1020,958],{"class":957},[44,1022,795],{"class":961},[44,1024,958],{"class":957},[44,1026,65],{"class":64},[44,1028,969],{"class":395},[44,1030,109],{"class":108},[44,1032,777],{"class":64},[44,1034,724],{"class":118},[44,1036,65],{"class":64},[44,1038,1039],{"class":153}," 0",[44,1041,65],{"class":64},[44,1043,1044],{"class":118}," final_cx",[44,1046,986],{"class":64},[44,1048,989],{"class":395},[44,1050,109],{"class":108},[44,1052,958],{"class":957},[44,1054,996],{"class":961},[44,1056,958],{"class":957},[44,1058,427],{"class":64},[44,1060,1061,1063,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1094,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114],{"class":46,"line":749},[44,1062,938],{"class":54},[44,1064,115],{"class":64},[44,1066,436],{"class":118},[44,1068,150],{"class":64},[44,1070,947],{"class":118},[44,1072,115],{"class":64},[44,1074,952],{"class":118},[44,1076,150],{"class":64},[44,1078,958],{"class":957},[44,1080,799],{"class":961},[44,1082,958],{"class":957},[44,1084,65],{"class":64},[44,1086,969],{"class":395},[44,1088,109],{"class":108},[44,1090,777],{"class":64},[44,1092,1093],{"class":118},"final_cy",[44,1095,65],{"class":64},[44,1097,1039],{"class":153},[44,1099,65],{"class":64},[44,1101,729],{"class":118},[44,1103,986],{"class":64},[44,1105,989],{"class":395},[44,1107,109],{"class":108},[44,1109,958],{"class":957},[44,1111,996],{"class":961},[44,1113,958],{"class":957},[44,1115,427],{"class":64},[44,1117,1118,1121,1123,1125,1127,1130],{"class":46,"line":766},[44,1119,1120],{"class":54},"    g",[44,1122,115],{"class":64},[44,1124,436],{"class":118},[44,1126,150],{"class":64},[44,1128,1129],{"class":118},"circle",[44,1131,162],{"class":64},[18,1133,1135],{"id":1134},"rotating-the-group","Rotating the Group",[14,1137,1138,1141,1142,1145,1146,1149],{},[26,1139,1140],{},"AnimateTransform"," creates SVG ",[26,1143,1144],{},"\u003CanimateTransform>",", which is the correct SVG\nelement for animating ",[26,1147,1148],{},"transform",". Appending it to the group rotates every\ncircle around the group's local origin. Because the group is positioned at the\ncanvas center, the whole ring rotates around the middle of the SVG.",[35,1151,1153],{"className":37,"code":1152,"language":39,"meta":40,"style":40},"g.append(\n    dp.AnimateTransform(\n        \"rotate\",\n        values=[0, 120, 240, 360],\n        dur=\"10s\",\n        calcMode=\"linear\",\n        additive=\"sum\",\n    )\n)\n",[26,1154,1155,1165,1175,1187,1215,1231,1247,1263,1267],{"__ignoreMap":40},[44,1156,1157,1159,1161,1163],{"class":46,"line":47},[44,1158,441],{"class":54},[44,1160,115],{"class":64},[44,1162,436],{"class":118},[44,1164,711],{"class":64},[44,1166,1167,1169,1171,1173],{"class":46,"line":76},[44,1168,297],{"class":118},[44,1170,115],{"class":64},[44,1172,1140],{"class":118},[44,1174,711],{"class":64},[44,1176,1177,1180,1183,1185],{"class":46,"line":83},[44,1178,1179],{"class":957},"        \"",[44,1181,1182],{"class":961},"rotate",[44,1184,958],{"class":957},[44,1186,746],{"class":64},[44,1188,1189,1192,1194,1196,1199,1201,1204,1206,1209,1211,1213],{"class":46,"line":97},[44,1190,1191],{"class":395},"        values",[44,1193,109],{"class":108},[44,1195,777],{"class":64},[44,1197,1198],{"class":153},"0",[44,1200,65],{"class":64},[44,1202,1203],{"class":153}," 120",[44,1205,65],{"class":64},[44,1207,1208],{"class":153}," 240",[44,1210,65],{"class":64},[44,1212,468],{"class":153},[44,1214,783],{"class":64},[44,1216,1217,1220,1222,1224,1227,1229],{"class":46,"line":102},[44,1218,1219],{"class":395},"        dur",[44,1221,109],{"class":108},[44,1223,958],{"class":957},[44,1225,1226],{"class":961},"10s",[44,1228,958],{"class":957},[44,1230,746],{"class":64},[44,1232,1233,1236,1238,1240,1243,1245],{"class":46,"line":199},[44,1234,1235],{"class":395},"        calcMode",[44,1237,109],{"class":108},[44,1239,958],{"class":957},[44,1241,1242],{"class":961},"linear",[44,1244,958],{"class":957},[44,1246,746],{"class":64},[44,1248,1249,1252,1254,1256,1259,1261],{"class":46,"line":228},[44,1250,1251],{"class":395},"        additive",[44,1253,109],{"class":108},[44,1255,958],{"class":957},[44,1257,1258],{"class":961},"sum",[44,1260,958],{"class":957},[44,1262,746],{"class":64},[44,1264,1265],{"class":46,"line":714},[44,1266,789],{"class":64},[44,1268,1269],{"class":46,"line":735},[44,1270,162],{"class":64},[14,1272,1273,1276,1277,1280,1281,1284,1285,1287],{},[26,1274,1275],{},"values"," defines the rotation keyframes. ",[26,1278,1279],{},"calcMode=\"linear\""," keeps the angular\nspeed even, and ",[26,1282,1283],{},"additive=\"sum\""," lets the animation add to the group's existing\n",[26,1286,1148],{}," instead of replacing it.",[18,1289,1291],{"id":1290},"complete-script","Complete Script",[35,1293,1295],{"className":37,"code":1294,"language":39,"meta":40,"style":40},"from math import cos, radians, sin\n\nimport pydreamplet as dp\n\ntheme = dp.Theme()\n\nsvg = dp.SVG(1024, 1024)\nmargin = 24\nmin_radius = 10\ncircle_count = 32\nmax_radius = svg.w \u002F 2 - margin\nradius_step = (max_radius - min_radius) \u002F (circle_count - 1)\ncolors = [\n    dp.blend(theme.pink, theme.sky, i \u002F circle_count) for i in range(circle_count)\n]\ng = dp.G(pos=(svg.w \u002F 2, svg.h \u002F 2))\nsvg.append(g)\n\nangle_step = 360 \u002F circle_count\n\nfor i in range(circle_count):\n    angle = radians(i * angle_step)\n    r = min_radius + i * radius_step\n    final_cx = max_radius * cos(angle)\n    final_cy = max_radius * sin(angle)\n\n    circle = dp.Circle(\n        pos=(final_cx, final_cy),\n        r=min_radius,\n        fill=theme.transparent,\n        stroke=colors[i],\n    )\n    circle.append(dp.Animate(\"r\", values=[min_radius, r, min_radius], dur=\"5s\"))\n    circle.append(dp.Animate(\"cx\", values=[final_cx, 0, final_cx], dur=\"5s\"))\n    circle.append(dp.Animate(\"cy\", values=[final_cy, 0, final_cy], dur=\"5s\"))\n    g.append(circle)\n\ng.append(\n    dp.AnimateTransform(\n        \"rotate\",\n        values=[0, 120, 240, 360],\n        dur=\"10s\",\n        calcMode=\"linear\",\n        additive=\"sum\",\n    )\n)\n\nsvg.save(\"output\u002Fdancing_circles.svg\")\n",[26,1296,1297,1315,1319,1329,1333,1347,1351,1373,1381,1389,1397,1417,1445,1454,1503,1508,1553,1568,1573,1586,1591,1608,1627,1644,1663,1682,1687,1702,1719,1730,1745,1760,1765,1822,1879,1936,1951,1956,1967,1978,1989,2014,2029,2044,2059,2064,2069,2074],{"__ignoreMap":40},[44,1298,1299,1301,1303,1305,1307,1309,1311,1313],{"class":46,"line":47},[44,1300,51],{"class":50},[44,1302,55],{"class":54},[44,1304,58],{"class":50},[44,1306,61],{"class":54},[44,1308,65],{"class":64},[44,1310,68],{"class":54},[44,1312,65],{"class":64},[44,1314,73],{"class":54},[44,1316,1317],{"class":46,"line":76},[44,1318,80],{"emptyLinePlaceholder":79},[44,1320,1321,1323,1325,1327],{"class":46,"line":83},[44,1322,58],{"class":50},[44,1324,88],{"class":54},[44,1326,91],{"class":50},[44,1328,94],{"class":54},[44,1330,1331],{"class":46,"line":97},[44,1332,80],{"emptyLinePlaceholder":79},[44,1334,1335,1337,1339,1341,1343,1345],{"class":46,"line":102},[44,1336,105],{"class":54},[44,1338,109],{"class":108},[44,1340,112],{"class":54},[44,1342,115],{"class":64},[44,1344,32],{"class":118},[44,1346,121],{"class":64},[44,1348,1349],{"class":46,"line":199},[44,1350,80],{"emptyLinePlaceholder":79},[44,1352,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371],{"class":46,"line":228},[44,1354,138],{"class":54},[44,1356,109],{"class":108},[44,1358,112],{"class":54},[44,1360,115],{"class":64},[44,1362,147],{"class":118},[44,1364,150],{"class":64},[44,1366,154],{"class":153},[44,1368,65],{"class":64},[44,1370,159],{"class":153},[44,1372,162],{"class":64},[44,1374,1375,1377,1379],{"class":46,"line":714},[44,1376,167],{"class":54},[44,1378,109],{"class":108},[44,1380,172],{"class":153},[44,1382,1383,1385,1387],{"class":46,"line":735},[44,1384,177],{"class":54},[44,1386,109],{"class":108},[44,1388,182],{"class":153},[44,1390,1391,1393,1395],{"class":46,"line":749},[44,1392,187],{"class":54},[44,1394,109],{"class":108},[44,1396,192],{"class":153},[44,1398,1399,1401,1403,1405,1407,1409,1411,1413,1415],{"class":46,"line":766},[44,1400,202],{"class":54},[44,1402,109],{"class":108},[44,1404,207],{"class":54},[44,1406,115],{"class":64},[44,1408,213],{"class":212},[44,1410,216],{"class":108},[44,1412,219],{"class":153},[44,1414,222],{"class":108},[44,1416,225],{"class":54},[44,1418,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443],{"class":46,"line":786},[44,1420,231],{"class":54},[44,1422,109],{"class":108},[44,1424,236],{"class":64},[44,1426,202],{"class":54},[44,1428,241],{"class":108},[44,1430,244],{"class":54},[44,1432,247],{"class":64},[44,1434,216],{"class":108},[44,1436,236],{"class":64},[44,1438,187],{"class":54},[44,1440,241],{"class":108},[44,1442,258],{"class":153},[44,1444,162],{"class":64},[44,1446,1448,1450,1452],{"class":46,"line":1447},13,[44,1449,287],{"class":54},[44,1451,109],{"class":108},[44,1453,292],{"class":64},[44,1455,1457,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481,1483,1485,1487,1489,1491,1493,1495,1497,1499,1501],{"class":46,"line":1456},14,[44,1458,297],{"class":54},[44,1460,115],{"class":64},[44,1462,302],{"class":118},[44,1464,150],{"class":64},[44,1466,307],{"class":118},[44,1468,115],{"class":64},[44,1470,312],{"class":212},[44,1472,65],{"class":64},[44,1474,317],{"class":118},[44,1476,115],{"class":64},[44,1478,322],{"class":212},[44,1480,65],{"class":64},[44,1482,327],{"class":118},[44,1484,330],{"class":108},[44,1486,333],{"class":118},[44,1488,247],{"class":64},[44,1490,338],{"class":50},[44,1492,327],{"class":54},[44,1494,343],{"class":50},[44,1496,347],{"class":346},[44,1498,150],{"class":64},[44,1500,265],{"class":118},[44,1502,162],{"class":64},[44,1504,1506],{"class":46,"line":1505},15,[44,1507,358],{"class":64},[44,1509,1511,1513,1515,1517,1519,1521,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1551],{"class":46,"line":1510},16,[44,1512,381],{"class":54},[44,1514,109],{"class":108},[44,1516,112],{"class":54},[44,1518,115],{"class":64},[44,1520,390],{"class":118},[44,1522,150],{"class":64},[44,1524,396],{"class":395},[44,1526,109],{"class":108},[44,1528,150],{"class":64},[44,1530,403],{"class":118},[44,1532,115],{"class":64},[44,1534,213],{"class":212},[44,1536,216],{"class":108},[44,1538,219],{"class":153},[44,1540,65],{"class":64},[44,1542,207],{"class":118},[44,1544,115],{"class":64},[44,1546,420],{"class":212},[44,1548,216],{"class":108},[44,1550,219],{"class":153},[44,1552,427],{"class":64},[44,1554,1556,1558,1560,1562,1564,1566],{"class":46,"line":1555},17,[44,1557,403],{"class":54},[44,1559,115],{"class":64},[44,1561,436],{"class":118},[44,1563,150],{"class":64},[44,1565,441],{"class":118},[44,1567,162],{"class":64},[44,1569,1571],{"class":46,"line":1570},18,[44,1572,80],{"emptyLinePlaceholder":79},[44,1574,1576,1578,1580,1582,1584],{"class":46,"line":1575},19,[44,1577,463],{"class":54},[44,1579,109],{"class":108},[44,1581,468],{"class":153},[44,1583,216],{"class":108},[44,1585,473],{"class":54},[44,1587,1589],{"class":46,"line":1588},20,[44,1590,80],{"emptyLinePlaceholder":79},[44,1592,1594,1596,1598,1600,1602,1604,1606],{"class":46,"line":1593},21,[44,1595,482],{"class":50},[44,1597,327],{"class":54},[44,1599,343],{"class":50},[44,1601,347],{"class":346},[44,1603,150],{"class":64},[44,1605,265],{"class":118},[44,1607,495],{"class":64},[44,1609,1611,1613,1615,1617,1619,1621,1623,1625],{"class":46,"line":1610},22,[44,1612,500],{"class":54},[44,1614,109],{"class":108},[44,1616,68],{"class":118},[44,1618,150],{"class":64},[44,1620,509],{"class":118},[44,1622,512],{"class":108},[44,1624,515],{"class":118},[44,1626,162],{"class":64},[44,1628,1630,1632,1634,1636,1638,1640,1642],{"class":46,"line":1629},23,[44,1631,522],{"class":54},[44,1633,109],{"class":108},[44,1635,527],{"class":54},[44,1637,530],{"class":108},[44,1639,327],{"class":54},[44,1641,512],{"class":108},[44,1643,537],{"class":54},[44,1645,1647,1649,1651,1653,1655,1657,1659,1661],{"class":46,"line":1646},24,[44,1648,542],{"class":54},[44,1650,109],{"class":108},[44,1652,547],{"class":54},[44,1654,512],{"class":108},[44,1656,61],{"class":118},[44,1658,150],{"class":64},[44,1660,556],{"class":118},[44,1662,162],{"class":64},[44,1664,1666,1668,1670,1672,1674,1676,1678,1680],{"class":46,"line":1665},25,[44,1667,563],{"class":54},[44,1669,109],{"class":108},[44,1671,547],{"class":54},[44,1673,512],{"class":108},[44,1675,572],{"class":118},[44,1677,150],{"class":64},[44,1679,556],{"class":118},[44,1681,162],{"class":64},[44,1683,1685],{"class":46,"line":1684},26,[44,1686,80],{"emptyLinePlaceholder":79},[44,1688,1690,1692,1694,1696,1698,1700],{"class":46,"line":1689},27,[44,1691,699],{"class":54},[44,1693,109],{"class":108},[44,1695,112],{"class":54},[44,1697,115],{"class":64},[44,1699,708],{"class":118},[44,1701,711],{"class":64},[44,1703,1705,1707,1709,1711,1713,1715,1717],{"class":46,"line":1704},28,[44,1706,717],{"class":395},[44,1708,109],{"class":108},[44,1710,150],{"class":64},[44,1712,724],{"class":118},[44,1714,65],{"class":64},[44,1716,729],{"class":118},[44,1718,732],{"class":64},[44,1720,1722,1724,1726,1728],{"class":46,"line":1721},29,[44,1723,738],{"class":395},[44,1725,109],{"class":108},[44,1727,743],{"class":118},[44,1729,746],{"class":64},[44,1731,1733,1735,1737,1739,1741,1743],{"class":46,"line":1732},30,[44,1734,752],{"class":395},[44,1736,109],{"class":108},[44,1738,307],{"class":118},[44,1740,115],{"class":64},[44,1742,761],{"class":212},[44,1744,746],{"class":64},[44,1746,1748,1750,1752,1754,1756,1758],{"class":46,"line":1747},31,[44,1749,769],{"class":395},[44,1751,109],{"class":108},[44,1753,774],{"class":118},[44,1755,777],{"class":64},[44,1757,780],{"class":118},[44,1759,783],{"class":64},[44,1761,1763],{"class":46,"line":1762},32,[44,1764,789],{"class":64},[44,1766,1768,1770,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818,1820],{"class":46,"line":1767},33,[44,1769,938],{"class":54},[44,1771,115],{"class":64},[44,1773,436],{"class":118},[44,1775,150],{"class":64},[44,1777,947],{"class":118},[44,1779,115],{"class":64},[44,1781,952],{"class":118},[44,1783,150],{"class":64},[44,1785,958],{"class":957},[44,1787,962],{"class":961},[44,1789,958],{"class":957},[44,1791,65],{"class":64},[44,1793,969],{"class":395},[44,1795,109],{"class":108},[44,1797,777],{"class":64},[44,1799,743],{"class":118},[44,1801,65],{"class":64},[44,1803,923],{"class":118},[44,1805,65],{"class":64},[44,1807,244],{"class":118},[44,1809,986],{"class":64},[44,1811,989],{"class":395},[44,1813,109],{"class":108},[44,1815,958],{"class":957},[44,1817,996],{"class":961},[44,1819,958],{"class":957},[44,1821,427],{"class":64},[44,1823,1825,1827,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,1871,1873,1875,1877],{"class":46,"line":1824},34,[44,1826,938],{"class":54},[44,1828,115],{"class":64},[44,1830,436],{"class":118},[44,1832,150],{"class":64},[44,1834,947],{"class":118},[44,1836,115],{"class":64},[44,1838,952],{"class":118},[44,1840,150],{"class":64},[44,1842,958],{"class":957},[44,1844,795],{"class":961},[44,1846,958],{"class":957},[44,1848,65],{"class":64},[44,1850,969],{"class":395},[44,1852,109],{"class":108},[44,1854,777],{"class":64},[44,1856,724],{"class":118},[44,1858,65],{"class":64},[44,1860,1039],{"class":153},[44,1862,65],{"class":64},[44,1864,1044],{"class":118},[44,1866,986],{"class":64},[44,1868,989],{"class":395},[44,1870,109],{"class":108},[44,1872,958],{"class":957},[44,1874,996],{"class":961},[44,1876,958],{"class":957},[44,1878,427],{"class":64},[44,1880,1882,1884,1886,1888,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918,1920,1922,1924,1926,1928,1930,1932,1934],{"class":46,"line":1881},35,[44,1883,938],{"class":54},[44,1885,115],{"class":64},[44,1887,436],{"class":118},[44,1889,150],{"class":64},[44,1891,947],{"class":118},[44,1893,115],{"class":64},[44,1895,952],{"class":118},[44,1897,150],{"class":64},[44,1899,958],{"class":957},[44,1901,799],{"class":961},[44,1903,958],{"class":957},[44,1905,65],{"class":64},[44,1907,969],{"class":395},[44,1909,109],{"class":108},[44,1911,777],{"class":64},[44,1913,1093],{"class":118},[44,1915,65],{"class":64},[44,1917,1039],{"class":153},[44,1919,65],{"class":64},[44,1921,729],{"class":118},[44,1923,986],{"class":64},[44,1925,989],{"class":395},[44,1927,109],{"class":108},[44,1929,958],{"class":957},[44,1931,996],{"class":961},[44,1933,958],{"class":957},[44,1935,427],{"class":64},[44,1937,1939,1941,1943,1945,1947,1949],{"class":46,"line":1938},36,[44,1940,1120],{"class":54},[44,1942,115],{"class":64},[44,1944,436],{"class":118},[44,1946,150],{"class":64},[44,1948,1129],{"class":118},[44,1950,162],{"class":64},[44,1952,1954],{"class":46,"line":1953},37,[44,1955,80],{"emptyLinePlaceholder":79},[44,1957,1959,1961,1963,1965],{"class":46,"line":1958},38,[44,1960,441],{"class":54},[44,1962,115],{"class":64},[44,1964,436],{"class":118},[44,1966,711],{"class":64},[44,1968,1970,1972,1974,1976],{"class":46,"line":1969},39,[44,1971,297],{"class":118},[44,1973,115],{"class":64},[44,1975,1140],{"class":118},[44,1977,711],{"class":64},[44,1979,1981,1983,1985,1987],{"class":46,"line":1980},40,[44,1982,1179],{"class":957},[44,1984,1182],{"class":961},[44,1986,958],{"class":957},[44,1988,746],{"class":64},[44,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008,2010,2012],{"class":46,"line":1991},41,[44,1993,1191],{"class":395},[44,1995,109],{"class":108},[44,1997,777],{"class":64},[44,1999,1198],{"class":153},[44,2001,65],{"class":64},[44,2003,1203],{"class":153},[44,2005,65],{"class":64},[44,2007,1208],{"class":153},[44,2009,65],{"class":64},[44,2011,468],{"class":153},[44,2013,783],{"class":64},[44,2015,2017,2019,2021,2023,2025,2027],{"class":46,"line":2016},42,[44,2018,1219],{"class":395},[44,2020,109],{"class":108},[44,2022,958],{"class":957},[44,2024,1226],{"class":961},[44,2026,958],{"class":957},[44,2028,746],{"class":64},[44,2030,2032,2034,2036,2038,2040,2042],{"class":46,"line":2031},43,[44,2033,1235],{"class":395},[44,2035,109],{"class":108},[44,2037,958],{"class":957},[44,2039,1242],{"class":961},[44,2041,958],{"class":957},[44,2043,746],{"class":64},[44,2045,2047,2049,2051,2053,2055,2057],{"class":46,"line":2046},44,[44,2048,1251],{"class":395},[44,2050,109],{"class":108},[44,2052,958],{"class":957},[44,2054,1258],{"class":961},[44,2056,958],{"class":957},[44,2058,746],{"class":64},[44,2060,2062],{"class":46,"line":2061},45,[44,2063,789],{"class":64},[44,2065,2067],{"class":46,"line":2066},46,[44,2068,162],{"class":64},[44,2070,2072],{"class":46,"line":2071},47,[44,2073,80],{"emptyLinePlaceholder":79},[44,2075,2077,2079,2081,2084,2086,2088,2091,2093],{"class":46,"line":2076},48,[44,2078,403],{"class":54},[44,2080,115],{"class":64},[44,2082,2083],{"class":118},"save",[44,2085,150],{"class":64},[44,2087,958],{"class":957},[44,2089,2090],{"class":961},"output\u002Fdancing_circles.svg",[44,2092,958],{"class":957},[44,2094,162],{"class":64},[2096,2097],"svg-preview",{"alt":2098,"src":2099},"Animated radial circle composition with blended pink and sky strokes.","\u002Fshowcase\u002Fdancing_circles_light.svg",[2101,2102,2103],"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 .sAK04, html code.shiki .sAK04{--shiki-light:#6182B8;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}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 .sNpir, html code.shiki .sNpir{--shiki-light:#F76D47;--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 .sBTIf, html code.shiki .sBTIf{--shiki-light:#6182B8;--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 .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}",{"title":40,"searchDepth":83,"depth":83,"links":2105},[2106,2107,2108,2109,2110,2111,2112,2113],{"id":20,"depth":76,"text":21},{"id":124,"depth":76,"text":125},{"id":269,"depth":76,"text":270},{"id":367,"depth":76,"text":368},{"id":449,"depth":76,"text":450},{"id":595,"depth":76,"text":596},{"id":1134,"depth":76,"text":1135},{"id":1290,"depth":76,"text":1291},"Build an animated radial composition with Theme colors, blended strokes, groups, and SVG animate elements.","md",{"category":2117},"tutorials",{"title":2119},"Dancing circles","\u002Ftutorials\u002Fdancing-circles",{"title":5,"description":2114},"tutorials\u002Fdancing-circles","4wCv3GNAU1TUjT7HyE-i2P6l_gyvTWBfz8S5zRi1JAE",null,1781452408241]