[{"data":1,"prerenderedAt":1532},["ShallowReactive",2],{"docs:\u002Freference\u002Fanimation":3},{"id":4,"title":5,"body":6,"description":1523,"extension":1524,"meta":1525,"navigation":1527,"path":1528,"seo":1529,"stem":1530,"__hash__":1531},"docs\u002Freference\u002Fanimation.md","Animation",{"type":7,"value":8,"toc":1512},"minimark",[9,13,25,30,57,61,104,111,569,574,578,703,708,772,827,830,842,962,972,975,1070,1074,1080,1120,1125,1206,1211,1259,1265,1354,1358,1380,1394,1400,1508],[10,11,5],"h1",{"id":12},"animation",[14,15,16,20,21,24],"p",{},[17,18,19],"code",{},"Animate"," creates an SVG ",[17,22,23],{},"\u003Canimate>"," element. Append it to a shape, text, path,\nor group to animate one SVG attribute over time.",[26,27,29],"h2",{"id":28},"import","Import",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-python shiki shiki-themes material-theme-lighter github-light-high-contrast github-dark","import pydreamplet as dp\n","python","",[17,38,39],{"__ignoreMap":36},[40,41,44,47,51,54],"span",{"class":42,"line":43},"line",1,[40,45,28],{"class":46},"sED7I",[40,48,50],{"class":49},"soTeR"," pydreamplet ",[40,52,53],{"class":46},"as",[40,55,56],{"class":49}," dp\n",[26,58,60],{"id":59},"signature","Signature",[31,62,64],{"className":33,"code":63,"language":35,"meta":36,"style":36},"dp.Animate(attr: str, **kwargs)\n",[17,65,66],{"__ignoreMap":36},[40,67,68,71,75,78,81,84,87,91,94,98,101],{"class":42,"line":43},[40,69,70],{"class":49},"dp",[40,72,74],{"class":73},"sVsmf",".",[40,76,19],{"class":77},"sAK04",[40,79,80],{"class":73},"(",[40,82,83],{"class":77},"attr",[40,85,86],{"class":73},":",[40,88,90],{"class":89},"s-tzF"," str",[40,92,93],{"class":73},",",[40,95,97],{"class":96},"sWKEy"," **",[40,99,100],{"class":77},"kwargs",[40,102,103],{"class":73},")\n",[14,105,106,107,110],{},"The first argument is the SVG attribute name to animate. The constructor writes\nthat name to the generated ",[17,108,109],{},"attributeName"," attribute.",[31,112,114],{"className":33,"code":113,"language":35,"meta":36,"style":36},"svg = dp.SVG(360, 180)\nsvg.append(dp.Line(90, 90, 270, 90, stroke=\"currentColor\", stroke_width=3, stroke_dasharray=\"8 8\", opacity=0.35))\n\ncircle = dp.Circle(\n    cx=90,\n    cy=90,\n    r=24,\n    fill=\"currentColor\",\n    opacity=0.7,\n    stroke=\"currentColor\",\n    stroke_width=4,\n)\n\ncircle.append(\n    dp.Animate(\"cx\", values=[90, 270, 90], dur=\"3s\"),\n    dp.Animate(\"r\", values=[24, 38, 24], dur=\"3s\"),\n    dp.Animate(\"opacity\", values=[0.45, 1, 0.45], dur=\"3s\"),\n)\n\nsvg.append(circle)\n",[17,115,116,145,239,246,264,277,289,302,318,331,347,360,365,370,382,439,491,544,549,554],{"__ignoreMap":36},[40,117,118,121,124,127,129,132,134,138,140,143],{"class":42,"line":43},[40,119,120],{"class":49},"svg ",[40,122,123],{"class":96},"=",[40,125,126],{"class":49}," dp",[40,128,74],{"class":73},[40,130,131],{"class":77},"SVG",[40,133,80],{"class":73},[40,135,137],{"class":136},"sNpir","360",[40,139,93],{"class":73},[40,141,142],{"class":136}," 180",[40,144,103],{"class":73},[40,146,148,151,153,156,158,160,162,165,167,170,172,175,177,180,182,184,186,190,192,196,200,202,204,207,209,212,214,217,219,221,224,226,228,231,233,236],{"class":42,"line":147},2,[40,149,150],{"class":49},"svg",[40,152,74],{"class":73},[40,154,155],{"class":77},"append",[40,157,80],{"class":73},[40,159,70],{"class":77},[40,161,74],{"class":73},[40,163,164],{"class":77},"Line",[40,166,80],{"class":73},[40,168,169],{"class":136},"90",[40,171,93],{"class":73},[40,173,174],{"class":136}," 90",[40,176,93],{"class":73},[40,178,179],{"class":136}," 270",[40,181,93],{"class":73},[40,183,174],{"class":136},[40,185,93],{"class":73},[40,187,189],{"class":188},"sYEV4"," stroke",[40,191,123],{"class":96},[40,193,195],{"class":194},"sqo_7","\"",[40,197,199],{"class":198},"s_jvP","currentColor",[40,201,195],{"class":194},[40,203,93],{"class":73},[40,205,206],{"class":188}," stroke_width",[40,208,123],{"class":96},[40,210,211],{"class":136},"3",[40,213,93],{"class":73},[40,215,216],{"class":188}," stroke_dasharray",[40,218,123],{"class":96},[40,220,195],{"class":194},[40,222,223],{"class":198},"8 8",[40,225,195],{"class":194},[40,227,93],{"class":73},[40,229,230],{"class":188}," opacity",[40,232,123],{"class":96},[40,234,235],{"class":136},"0.35",[40,237,238],{"class":73},"))\n",[40,240,242],{"class":42,"line":241},3,[40,243,245],{"emptyLinePlaceholder":244},true,"\n",[40,247,249,252,254,256,258,261],{"class":42,"line":248},4,[40,250,251],{"class":49},"circle ",[40,253,123],{"class":96},[40,255,126],{"class":49},[40,257,74],{"class":73},[40,259,260],{"class":77},"Circle",[40,262,263],{"class":73},"(\n",[40,265,267,270,272,274],{"class":42,"line":266},5,[40,268,269],{"class":188},"    cx",[40,271,123],{"class":96},[40,273,169],{"class":136},[40,275,276],{"class":73},",\n",[40,278,280,283,285,287],{"class":42,"line":279},6,[40,281,282],{"class":188},"    cy",[40,284,123],{"class":96},[40,286,169],{"class":136},[40,288,276],{"class":73},[40,290,292,295,297,300],{"class":42,"line":291},7,[40,293,294],{"class":188},"    r",[40,296,123],{"class":96},[40,298,299],{"class":136},"24",[40,301,276],{"class":73},[40,303,305,308,310,312,314,316],{"class":42,"line":304},8,[40,306,307],{"class":188},"    fill",[40,309,123],{"class":96},[40,311,195],{"class":194},[40,313,199],{"class":198},[40,315,195],{"class":194},[40,317,276],{"class":73},[40,319,321,324,326,329],{"class":42,"line":320},9,[40,322,323],{"class":188},"    opacity",[40,325,123],{"class":96},[40,327,328],{"class":136},"0.7",[40,330,276],{"class":73},[40,332,334,337,339,341,343,345],{"class":42,"line":333},10,[40,335,336],{"class":188},"    stroke",[40,338,123],{"class":96},[40,340,195],{"class":194},[40,342,199],{"class":198},[40,344,195],{"class":194},[40,346,276],{"class":73},[40,348,350,353,355,358],{"class":42,"line":349},11,[40,351,352],{"class":188},"    stroke_width",[40,354,123],{"class":96},[40,356,357],{"class":136},"4",[40,359,276],{"class":73},[40,361,363],{"class":42,"line":362},12,[40,364,103],{"class":73},[40,366,368],{"class":42,"line":367},13,[40,369,245],{"emptyLinePlaceholder":244},[40,371,373,376,378,380],{"class":42,"line":372},14,[40,374,375],{"class":49},"circle",[40,377,74],{"class":73},[40,379,155],{"class":77},[40,381,263],{"class":73},[40,383,385,388,390,392,394,396,399,401,403,406,408,411,413,415,417,419,421,424,427,429,431,434,436],{"class":42,"line":384},15,[40,386,387],{"class":77},"    dp",[40,389,74],{"class":73},[40,391,19],{"class":77},[40,393,80],{"class":73},[40,395,195],{"class":194},[40,397,398],{"class":198},"cx",[40,400,195],{"class":194},[40,402,93],{"class":73},[40,404,405],{"class":188}," values",[40,407,123],{"class":96},[40,409,410],{"class":73},"[",[40,412,169],{"class":136},[40,414,93],{"class":73},[40,416,179],{"class":136},[40,418,93],{"class":73},[40,420,174],{"class":136},[40,422,423],{"class":73},"],",[40,425,426],{"class":188}," dur",[40,428,123],{"class":96},[40,430,195],{"class":194},[40,432,433],{"class":198},"3s",[40,435,195],{"class":194},[40,437,438],{"class":73},"),\n",[40,440,442,444,446,448,450,452,455,457,459,461,463,465,467,469,472,474,477,479,481,483,485,487,489],{"class":42,"line":441},16,[40,443,387],{"class":77},[40,445,74],{"class":73},[40,447,19],{"class":77},[40,449,80],{"class":73},[40,451,195],{"class":194},[40,453,454],{"class":198},"r",[40,456,195],{"class":194},[40,458,93],{"class":73},[40,460,405],{"class":188},[40,462,123],{"class":96},[40,464,410],{"class":73},[40,466,299],{"class":136},[40,468,93],{"class":73},[40,470,471],{"class":136}," 38",[40,473,93],{"class":73},[40,475,476],{"class":136}," 24",[40,478,423],{"class":73},[40,480,426],{"class":188},[40,482,123],{"class":96},[40,484,195],{"class":194},[40,486,433],{"class":198},[40,488,195],{"class":194},[40,490,438],{"class":73},[40,492,494,496,498,500,502,504,507,509,511,513,515,517,520,522,525,527,530,532,534,536,538,540,542],{"class":42,"line":493},17,[40,495,387],{"class":77},[40,497,74],{"class":73},[40,499,19],{"class":77},[40,501,80],{"class":73},[40,503,195],{"class":194},[40,505,506],{"class":198},"opacity",[40,508,195],{"class":194},[40,510,93],{"class":73},[40,512,405],{"class":188},[40,514,123],{"class":96},[40,516,410],{"class":73},[40,518,519],{"class":136},"0.45",[40,521,93],{"class":73},[40,523,524],{"class":136}," 1",[40,526,93],{"class":73},[40,528,529],{"class":136}," 0.45",[40,531,423],{"class":73},[40,533,426],{"class":188},[40,535,123],{"class":96},[40,537,195],{"class":194},[40,539,433],{"class":198},[40,541,195],{"class":194},[40,543,438],{"class":73},[40,545,547],{"class":42,"line":546},18,[40,548,103],{"class":73},[40,550,552],{"class":42,"line":551},19,[40,553,245],{"emptyLinePlaceholder":244},[40,555,557,559,561,563,565,567],{"class":42,"line":556},20,[40,558,150],{"class":49},[40,560,74],{"class":73},[40,562,155],{"class":77},[40,564,80],{"class":73},[40,566,375],{"class":77},[40,568,103],{"class":73},[570,571],"svg-preview",{"alt":572,"src":573},"Animated SVG circle moving, growing, and changing opacity","\u002Fshowcase\u002Fref_animation_animate.svg",[26,575,577],{"id":576},"constructor-parameters","Constructor Parameters",[579,580,581,600],"table",{},[582,583,584],"thead",{},[585,586,587,591,594,597],"tr",{},[588,589,590],"th",{},"Parameter",[588,592,593],{},"Type",[588,595,596],{},"Default",[588,598,599],{},"Description",[601,602,603,623,643,663,682],"tbody",{},[585,604,605,610,615,618],{},[606,607,608],"td",{},[17,609,83],{},[606,611,612],{},[17,613,614],{},"str",[606,616,617],{},"required",[606,619,620,621,74],{},"SVG attribute name written to ",[17,622,109],{},[585,624,625,630,635,640],{},[606,626,627],{},[17,628,629],{},"repeatCount",[606,631,632],{},[17,633,634],{},"int | str",[606,636,637],{},[17,638,639],{},"\"indefinite\"",[606,641,642],{},"SVG repeat count. Use this exact camelCase keyword.",[585,644,645,650,655,660],{},[606,646,647],{},[17,648,649],{},"values",[606,651,652],{},[17,653,654],{},"list[Any]",[606,656,657],{},[17,658,659],{},"None",[606,661,662],{},"Keyframe values joined with semicolons. Non-list values are ignored.",[585,664,665,670,674,679],{},[606,666,667],{},[17,668,669],{},"dur",[606,671,672],{},[17,673,614],{},[606,675,676],{},[17,677,678],{},"\"2s\"",[606,680,681],{},"SVG duration.",[585,683,684,689,694,697],{},[606,685,686],{},[17,687,688],{},"**kwargs",[606,690,691],{},[17,692,693],{},"Any",[606,695,696],{},"none",[606,698,699,700,702],{},"Additional attributes for the ",[17,701,23],{}," element.",[14,704,705,707],{},[17,706,19],{}," always sets:",[579,709,710,720],{},[582,711,712],{},[585,713,714,717],{},[588,715,716],{},"Attribute",[588,718,719],{},"Value",[601,721,722,734,746,760],{},[585,723,724,729],{},[606,725,726],{},[17,727,728],{},"attributeType",[606,730,731],{},[17,732,733],{},"\"XML\"",[585,735,736,740],{},[606,737,738],{},[17,739,109],{},[606,741,742,743,745],{},"the ",[17,744,83],{}," argument",[585,747,748,752],{},[606,749,750],{},[17,751,669],{},[606,753,754,755,757,758],{},"provided ",[17,756,669],{},", or ",[17,759,678],{},[585,761,762,766],{},[606,763,764],{},[17,765,629],{},[606,767,754,768,757,770],{},[17,769,629],{},[17,771,639],{},[31,773,775],{"className":33,"code":774,"language":35,"meta":36,"style":36},"anim = dp.Animate(\"opacity\")\n\nprint(str(anim))\n# \u003Canimate xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" dur=\"2s\" attributeType=\"XML\" attributeName=\"opacity\" repeatCount=\"indefinite\" \u002F>\n",[17,776,777,800,804,821],{"__ignoreMap":36},[40,778,779,782,784,786,788,790,792,794,796,798],{"class":42,"line":43},[40,780,781],{"class":49},"anim ",[40,783,123],{"class":96},[40,785,126],{"class":49},[40,787,74],{"class":73},[40,789,19],{"class":77},[40,791,80],{"class":73},[40,793,195],{"class":194},[40,795,506],{"class":198},[40,797,195],{"class":194},[40,799,103],{"class":73},[40,801,802],{"class":42,"line":147},[40,803,245],{"emptyLinePlaceholder":244},[40,805,806,810,812,814,816,819],{"class":42,"line":241},[40,807,809],{"class":808},"sBTIf","print",[40,811,80],{"class":73},[40,813,614],{"class":89},[40,815,80],{"class":73},[40,817,818],{"class":77},"anim",[40,820,238],{"class":73},[40,822,823],{"class":42,"line":248},[40,824,826],{"class":825},"sxl37","# \u003Canimate xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" dur=\"2s\" attributeType=\"XML\" attributeName=\"opacity\" repeatCount=\"indefinite\" \u002F>\n",[26,828,829],{"id":649},"Values",[14,831,832,833,835,836,838,839,74],{},"If ",[17,834,649],{}," is a list, pyDreamplet stores the list on the instance and writes\nthe SVG ",[17,837,649],{}," attribute by joining items with ",[17,840,841],{},";",[31,843,845],{"className":33,"code":844,"language":35,"meta":36,"style":36},"anim = dp.Animate(\"opacity\", values=[0, 1, 0.5], dur=\"3s\")\n\nprint(anim.values)\n# [0, 1, 0.5]\n\nprint(anim.element.get(\"values\"))\n# 0;1;0.5\n",[17,846,847,901,905,920,925,929,957],{"__ignoreMap":36},[40,848,849,851,853,855,857,859,861,863,865,867,869,871,873,875,878,880,882,884,887,889,891,893,895,897,899],{"class":42,"line":43},[40,850,781],{"class":49},[40,852,123],{"class":96},[40,854,126],{"class":49},[40,856,74],{"class":73},[40,858,19],{"class":77},[40,860,80],{"class":73},[40,862,195],{"class":194},[40,864,506],{"class":198},[40,866,195],{"class":194},[40,868,93],{"class":73},[40,870,405],{"class":188},[40,872,123],{"class":96},[40,874,410],{"class":73},[40,876,877],{"class":136},"0",[40,879,93],{"class":73},[40,881,524],{"class":136},[40,883,93],{"class":73},[40,885,886],{"class":136}," 0.5",[40,888,423],{"class":73},[40,890,426],{"class":188},[40,892,123],{"class":96},[40,894,195],{"class":194},[40,896,433],{"class":198},[40,898,195],{"class":194},[40,900,103],{"class":73},[40,902,903],{"class":42,"line":147},[40,904,245],{"emptyLinePlaceholder":244},[40,906,907,909,911,913,915,918],{"class":42,"line":241},[40,908,809],{"class":808},[40,910,80],{"class":73},[40,912,818],{"class":77},[40,914,74],{"class":73},[40,916,649],{"class":917},"sm80-",[40,919,103],{"class":73},[40,921,922],{"class":42,"line":248},[40,923,924],{"class":825},"# [0, 1, 0.5]\n",[40,926,927],{"class":42,"line":266},[40,928,245],{"emptyLinePlaceholder":244},[40,930,931,933,935,937,939,942,944,947,949,951,953,955],{"class":42,"line":279},[40,932,809],{"class":808},[40,934,80],{"class":73},[40,936,818],{"class":77},[40,938,74],{"class":73},[40,940,941],{"class":917},"element",[40,943,74],{"class":73},[40,945,946],{"class":77},"get",[40,948,80],{"class":73},[40,950,195],{"class":194},[40,952,649],{"class":198},[40,954,195],{"class":194},[40,956,238],{"class":73},[40,958,959],{"class":42,"line":291},[40,960,961],{"class":825},"# 0;1;0.5\n",[14,963,964,965,968,969,971],{},"The current source annotates the getter as ",[17,966,967],{},"list[str]",", while the setter accepts\n",[17,970,654],{},". At runtime, the original list values are preserved on the Python\nobject and converted to strings only for the SVG attribute.",[14,973,974],{},"Non-list constructor values are ignored.",[31,976,978],{"className":33,"code":977,"language":35,"meta":36,"style":36},"anim = dp.Animate(\"opacity\", values=\"0;1;0\")\n\nprint(anim.values)\n# []\n\nprint(anim.has_attr(\"values\"))\n# False\n",[17,979,980,1015,1019,1033,1038,1042,1065],{"__ignoreMap":36},[40,981,982,984,986,988,990,992,994,996,998,1000,1002,1004,1006,1008,1011,1013],{"class":42,"line":43},[40,983,781],{"class":49},[40,985,123],{"class":96},[40,987,126],{"class":49},[40,989,74],{"class":73},[40,991,19],{"class":77},[40,993,80],{"class":73},[40,995,195],{"class":194},[40,997,506],{"class":198},[40,999,195],{"class":194},[40,1001,93],{"class":73},[40,1003,405],{"class":188},[40,1005,123],{"class":96},[40,1007,195],{"class":194},[40,1009,1010],{"class":198},"0;1;0",[40,1012,195],{"class":194},[40,1014,103],{"class":73},[40,1016,1017],{"class":42,"line":147},[40,1018,245],{"emptyLinePlaceholder":244},[40,1020,1021,1023,1025,1027,1029,1031],{"class":42,"line":241},[40,1022,809],{"class":808},[40,1024,80],{"class":73},[40,1026,818],{"class":77},[40,1028,74],{"class":73},[40,1030,649],{"class":917},[40,1032,103],{"class":73},[40,1034,1035],{"class":42,"line":248},[40,1036,1037],{"class":825},"# []\n",[40,1039,1040],{"class":42,"line":266},[40,1041,245],{"emptyLinePlaceholder":244},[40,1043,1044,1046,1048,1050,1052,1055,1057,1059,1061,1063],{"class":42,"line":279},[40,1045,809],{"class":808},[40,1047,80],{"class":73},[40,1049,818],{"class":77},[40,1051,74],{"class":73},[40,1053,1054],{"class":77},"has_attr",[40,1056,80],{"class":73},[40,1058,195],{"class":194},[40,1060,649],{"class":198},[40,1062,195],{"class":194},[40,1064,238],{"class":73},[40,1066,1067],{"class":42,"line":291},[40,1068,1069],{"class":825},"# False\n",[26,1071,1073],{"id":1072},"properties","Properties",[1075,1076,1078],"h3",{"id":1077},"repeat_count",[17,1079,1077],{},[31,1081,1083],{"className":33,"code":1082,"language":35,"meta":36,"style":36},"anim.repeat_count -> int | str\nanim.repeat_count = value\n",[17,1084,1085,1106],{"__ignoreMap":36},[40,1086,1087,1089,1091,1093,1097,1100,1103],{"class":42,"line":43},[40,1088,818],{"class":49},[40,1090,74],{"class":73},[40,1092,1077],{"class":917},[40,1094,1096],{"class":1095},"str-j"," ->",[40,1098,1099],{"class":89}," int",[40,1101,1102],{"class":96}," |",[40,1104,1105],{"class":89}," str\n",[40,1107,1108,1110,1112,1114,1117],{"class":42,"line":147},[40,1109,818],{"class":49},[40,1111,74],{"class":73},[40,1113,1077],{"class":917},[40,1115,1116],{"class":96}," =",[40,1118,1119],{"class":49}," value\n",[14,1121,1122,1123,110],{},"Reads and writes the SVG ",[17,1124,629],{},[31,1126,1128],{"className":33,"code":1127,"language":35,"meta":36,"style":36},"anim = dp.Animate(\"opacity\")\nanim.repeat_count = \"5\"\n\nprint(anim.element.get(\"repeatCount\"))\n# 5\n",[17,1129,1130,1152,1171,1175,1201],{"__ignoreMap":36},[40,1131,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150],{"class":42,"line":43},[40,1133,781],{"class":49},[40,1135,123],{"class":96},[40,1137,126],{"class":49},[40,1139,74],{"class":73},[40,1141,19],{"class":77},[40,1143,80],{"class":73},[40,1145,195],{"class":194},[40,1147,506],{"class":198},[40,1149,195],{"class":194},[40,1151,103],{"class":73},[40,1153,1154,1156,1158,1160,1162,1165,1168],{"class":42,"line":147},[40,1155,818],{"class":49},[40,1157,74],{"class":73},[40,1159,1077],{"class":917},[40,1161,1116],{"class":96},[40,1163,1164],{"class":194}," \"",[40,1166,1167],{"class":198},"5",[40,1169,1170],{"class":194},"\"\n",[40,1172,1173],{"class":42,"line":241},[40,1174,245],{"emptyLinePlaceholder":244},[40,1176,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197,1199],{"class":42,"line":248},[40,1178,809],{"class":808},[40,1180,80],{"class":73},[40,1182,818],{"class":77},[40,1184,74],{"class":73},[40,1186,941],{"class":917},[40,1188,74],{"class":73},[40,1190,946],{"class":77},[40,1192,80],{"class":73},[40,1194,195],{"class":194},[40,1196,629],{"class":198},[40,1198,195],{"class":194},[40,1200,238],{"class":73},[40,1202,1203],{"class":42,"line":266},[40,1204,1205],{"class":825},"# 5\n",[1075,1207,1209],{"id":1208},"values-1",[17,1210,649],{},[31,1212,1214],{"className":33,"code":1213,"language":35,"meta":36,"style":36},"anim.values -> list[str]\nanim.values = value: list[Any]\n",[17,1215,1216,1236],{"__ignoreMap":36},[40,1217,1218,1220,1222,1224,1226,1229,1231,1233],{"class":42,"line":43},[40,1219,818],{"class":49},[40,1221,74],{"class":73},[40,1223,649],{"class":917},[40,1225,1096],{"class":1095},[40,1227,1228],{"class":49}," list",[40,1230,410],{"class":73},[40,1232,614],{"class":89},[40,1234,1235],{"class":73},"]\n",[40,1237,1238,1240,1242,1244,1246,1249,1251,1253,1255,1257],{"class":42,"line":147},[40,1239,818],{"class":49},[40,1241,74],{"class":73},[40,1243,649],{"class":917},[40,1245,1116],{"class":96},[40,1247,1248],{"class":49}," value",[40,1250,86],{"class":73},[40,1252,1228],{"class":49},[40,1254,410],{"class":73},[40,1256,693],{"class":49},[40,1258,1235],{"class":73},[14,1260,1261,1262,1264],{},"Reads and writes the keyframe list. Setting it updates the SVG ",[17,1263,649],{},"\nattribute.",[31,1266,1268],{"className":33,"code":1267,"language":35,"meta":36,"style":36},"anim = dp.Animate(\"r\")\nanim.values = [8, 24, 8]\n\nprint(anim.element.get(\"values\"))\n# 8;24;8\n",[17,1269,1270,1292,1319,1323,1349],{"__ignoreMap":36},[40,1271,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290],{"class":42,"line":43},[40,1273,781],{"class":49},[40,1275,123],{"class":96},[40,1277,126],{"class":49},[40,1279,74],{"class":73},[40,1281,19],{"class":77},[40,1283,80],{"class":73},[40,1285,195],{"class":194},[40,1287,454],{"class":198},[40,1289,195],{"class":194},[40,1291,103],{"class":73},[40,1293,1294,1296,1298,1300,1302,1305,1308,1310,1312,1314,1317],{"class":42,"line":147},[40,1295,818],{"class":49},[40,1297,74],{"class":73},[40,1299,649],{"class":917},[40,1301,1116],{"class":96},[40,1303,1304],{"class":73}," [",[40,1306,1307],{"class":136},"8",[40,1309,93],{"class":73},[40,1311,476],{"class":136},[40,1313,93],{"class":73},[40,1315,1316],{"class":136}," 8",[40,1318,1235],{"class":73},[40,1320,1321],{"class":42,"line":241},[40,1322,245],{"emptyLinePlaceholder":244},[40,1324,1325,1327,1329,1331,1333,1335,1337,1339,1341,1343,1345,1347],{"class":42,"line":248},[40,1326,809],{"class":808},[40,1328,80],{"class":73},[40,1330,818],{"class":77},[40,1332,74],{"class":73},[40,1334,941],{"class":917},[40,1336,74],{"class":73},[40,1338,946],{"class":77},[40,1340,80],{"class":73},[40,1342,195],{"class":194},[40,1344,649],{"class":198},[40,1346,195],{"class":194},[40,1348,238],{"class":73},[40,1350,1351],{"class":42,"line":266},[40,1352,1353],{"class":825},"# 8;24;8\n",[26,1355,1357],{"id":1356},"attribute-names","Attribute Names",[14,1359,1360,1361,1363,1364,1367,1368,1367,1371,276,1374,757,1377,74],{},"Use SVG attribute names for ",[17,1362,83],{},", such as ",[17,1365,1366],{},"\"cx\"",", ",[17,1369,1370],{},"\"r\"",[17,1372,1373],{},"\"fill\"",[17,1375,1376],{},"\"opacity\"",[17,1378,1379],{},"\"stroke-dashoffset\"",[14,1381,1382,1383,1386,1387,1390,1391,74],{},"For additional constructor keyword arguments, pyDreamplet applies the normal\n",[17,1384,1385],{},"SvgElement"," attribute-name normalization. That means ",[17,1388,1389],{},"key_splines"," becomes\n",[17,1392,1393],{},"key-splines",[14,1395,1396,1397,74],{},"SVG attributes that are not Python identifiers can be set after construction\nwith ",[17,1398,1399],{},"attrs()",[31,1401,1403],{"className":33,"code":1402,"language":35,"meta":36,"style":36},"anim = dp.Animate(\"opacity\", values=[0, 1, 0], dur=\"2s\")\nanim.attrs({\"calcMode\": \"spline\", \"keySplines\": \"0.4 0 0.2 1;0.4 0 0.2 1\"})\n",[17,1404,1405,1459],{"__ignoreMap":36},[40,1406,1407,1409,1411,1413,1415,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1444,1446,1448,1450,1452,1455,1457],{"class":42,"line":43},[40,1408,781],{"class":49},[40,1410,123],{"class":96},[40,1412,126],{"class":49},[40,1414,74],{"class":73},[40,1416,19],{"class":77},[40,1418,80],{"class":73},[40,1420,195],{"class":194},[40,1422,506],{"class":198},[40,1424,195],{"class":194},[40,1426,93],{"class":73},[40,1428,405],{"class":188},[40,1430,123],{"class":96},[40,1432,410],{"class":73},[40,1434,877],{"class":136},[40,1436,93],{"class":73},[40,1438,524],{"class":136},[40,1440,93],{"class":73},[40,1442,1443],{"class":136}," 0",[40,1445,423],{"class":73},[40,1447,426],{"class":188},[40,1449,123],{"class":96},[40,1451,195],{"class":194},[40,1453,1454],{"class":198},"2s",[40,1456,195],{"class":194},[40,1458,103],{"class":73},[40,1460,1461,1463,1465,1468,1471,1473,1476,1478,1480,1482,1485,1487,1489,1491,1494,1496,1498,1500,1503,1505],{"class":42,"line":147},[40,1462,818],{"class":49},[40,1464,74],{"class":73},[40,1466,1467],{"class":77},"attrs",[40,1469,1470],{"class":73},"({",[40,1472,195],{"class":194},[40,1474,1475],{"class":198},"calcMode",[40,1477,195],{"class":194},[40,1479,86],{"class":73},[40,1481,1164],{"class":194},[40,1483,1484],{"class":198},"spline",[40,1486,195],{"class":194},[40,1488,93],{"class":73},[40,1490,1164],{"class":194},[40,1492,1493],{"class":198},"keySplines",[40,1495,195],{"class":194},[40,1497,86],{"class":73},[40,1499,1164],{"class":194},[40,1501,1502],{"class":198},"0.4 0 0.2 1;0.4 0 0.2 1",[40,1504,195],{"class":194},[40,1506,1507],{"class":73},"})\n",[1509,1510,1511],"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 .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 .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 .s-tzF, html code.shiki .s-tzF{--shiki-light:#E2931D;--shiki-default:#023B95;--shiki-dark:#79B8FF}html pre.shiki code .sWKEy, html code.shiki .sWKEy{--shiki-light:#39ADB5;--shiki-default:#A0111F;--shiki-dark:#F97583}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 .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 .sBTIf, html code.shiki .sBTIf{--shiki-light:#6182B8;--shiki-default:#023B95;--shiki-dark:#79B8FF}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 .sm80-, html code.shiki .sm80-{--shiki-light:#E53935;--shiki-default:#0E1116;--shiki-dark:#E1E4E8}html pre.shiki code .str-j, html code.shiki .str-j{--shiki-light:#90A4AE;--shiki-light-font-style:inherit;--shiki-default:#6E011A;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":36,"searchDepth":241,"depth":241,"links":1513},[1514,1515,1516,1517,1518,1522],{"id":28,"depth":147,"text":29},{"id":59,"depth":147,"text":60},{"id":576,"depth":147,"text":577},{"id":649,"depth":147,"text":829},{"id":1072,"depth":147,"text":1073,"children":1519},[1520,1521],{"id":1077,"depth":241,"text":1077},{"id":1208,"depth":241,"text":649},{"id":1356,"depth":147,"text":1357},"SVG animate elements, values, duration, and repeat count.","md",{"category":1526},"reference",{"title":5},"\u002Freference\u002Fanimation",{"title":5,"description":1523},"reference\u002Fanimation","PA73ad2H6DY6o5oxxUWdqMrNlhwYOc1WLr8tgH-6feI",1780692544479]