[{"data":1,"prerenderedAt":2964},["ShallowReactive",2],{"docs:\u002Ftutorials\u002Fpolar-noise":3,"svg-preview:\u002Fshowcase\u002Fpolar_noise.svg:dark":2963},{"id":4,"title":5,"body":6,"description":2953,"extension":2954,"meta":2955,"navigation":2957,"path":2959,"seo":2960,"stem":2961,"__hash__":2962},"docs\u002Ftutorials\u002Fpolar-noise.md","Polar Noise",{"type":7,"value":8,"toc":2944},"minimark",[9,13,17,20,25,36,168,171,175,186,447,450,454,461,661,668,672,683,1044,1051,1062,1066,1069,1367,1377,1381,1392,1874,1877,1881,2935,2940],[10,11,5],"h1",{"id":12},"polar-noise",[14,15,16],"p",{},"This tutorial builds a stack of animated organic shapes from points sampled\naround a circle. Each point starts as a polar vector, then two-dimensional\nsimplex noise changes its radius. Several versions of every path are generated\nand animated to create a continuous wave motion.",[14,18,19],{},"The final SVG has no background, so the same file can be displayed on both\nlight and dark pages.",[21,22,24],"h2",{"id":23},"imports-and-canvas","Imports and Canvas",[14,26,27,31,32,35],{},[28,29,30],"code",{},"Vector.from_polar()"," converts an angle in degrees into a unit vector.\n",[28,33,34],{},"SimplexNoise2D"," supplies repeatable radius offsets.",[37,38,43],"pre",{"className":39,"code":40,"language":41,"meta":42,"style":42},"language-python shiki shiki-themes material-theme-lighter github-light-high-contrast github-dark","import pydreamplet as dp\nfrom pydreamplet.noise import SimplexNoise2D\n\ntheme = dp.Theme()\nnoise = SimplexNoise2D(seed=42)\nsvg = dp.SVG(1024, 1024)\n","python","",[28,44,45,64,85,92,114,140],{"__ignoreMap":42},[46,47,50,54,58,61],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"sED7I","import",[46,55,57],{"class":56},"soTeR"," pydreamplet ",[46,59,60],{"class":52},"as",[46,62,63],{"class":56}," dp\n",[46,65,67,70,73,77,80,82],{"class":48,"line":66},2,[46,68,69],{"class":52},"from",[46,71,72],{"class":56}," pydreamplet",[46,74,76],{"class":75},"sVsmf",".",[46,78,79],{"class":56},"noise ",[46,81,53],{"class":52},[46,83,84],{"class":56}," SimplexNoise2D\n",[46,86,88],{"class":48,"line":87},3,[46,89,91],{"emptyLinePlaceholder":90},true,"\n",[46,93,95,98,102,105,107,111],{"class":48,"line":94},4,[46,96,97],{"class":56},"theme ",[46,99,101],{"class":100},"sWKEy","=",[46,103,104],{"class":56}," dp",[46,106,76],{"class":75},[46,108,110],{"class":109},"sAK04","Theme",[46,112,113],{"class":75},"()\n",[46,115,117,119,121,124,127,131,133,137],{"class":48,"line":116},5,[46,118,79],{"class":56},[46,120,101],{"class":100},[46,122,123],{"class":109}," SimplexNoise2D",[46,125,126],{"class":75},"(",[46,128,130],{"class":129},"sYEV4","seed",[46,132,101],{"class":100},[46,134,136],{"class":135},"sNpir","42",[46,138,139],{"class":75},")\n",[46,141,143,146,148,150,152,155,157,160,163,166],{"class":48,"line":142},6,[46,144,145],{"class":56},"svg ",[46,147,101],{"class":100},[46,149,104],{"class":56},[46,151,76],{"class":75},[46,153,154],{"class":109},"SVG",[46,156,126],{"class":75},[46,158,159],{"class":135},"1024",[46,161,162],{"class":75},",",[46,164,165],{"class":135}," 1024",[46,167,139],{"class":75},[14,169,170],{},"Using a fixed seed keeps the generated artwork stable between runs. Changing\nthe seed creates a different family of contours while preserving the rest of\nthe composition.",[21,172,174],{"id":173},"add-a-drop-shadow","Add a Drop Shadow",[14,176,177,178,181,182,185],{},"SVG filters belong in a ",[28,179,180],{},"\u003Cdefs>"," element. Here ",[28,183,184],{},"feDropShadow"," separates the\noverlapping shapes without adding a background color.",[37,187,189],{"className":39,"code":188,"language":41,"meta":42,"style":42},"defs = svg.ensure_defs()\nshadow = dp.Filter(\n    id=\"drop-shadow\",\n    x=\"-20%\",\n    y=\"-20%\",\n    width=\"140%\",\n    height=\"140%\",\n)\nshadow.append(\n    dp.SvgElement(\n        \"feDropShadow\",\n        dx=0,\n        dy=10,\n        stdDeviation=8,\n        flood_color=\"#000000\",\n        flood_opacity=0.65,\n    )\n)\ndefs.append(shadow)\n",[28,190,191,208,225,245,261,276,292,308,313,326,339,351,364,377,390,407,420,426,431],{"__ignoreMap":42},[46,192,193,196,198,201,203,206],{"class":48,"line":49},[46,194,195],{"class":56},"defs ",[46,197,101],{"class":100},[46,199,200],{"class":56}," svg",[46,202,76],{"class":75},[46,204,205],{"class":109},"ensure_defs",[46,207,113],{"class":75},[46,209,210,213,215,217,219,222],{"class":48,"line":66},[46,211,212],{"class":56},"shadow ",[46,214,101],{"class":100},[46,216,104],{"class":56},[46,218,76],{"class":75},[46,220,221],{"class":109},"Filter",[46,223,224],{"class":75},"(\n",[46,226,227,230,232,236,240,242],{"class":48,"line":87},[46,228,229],{"class":129},"    id",[46,231,101],{"class":100},[46,233,235],{"class":234},"sqo_7","\"",[46,237,239],{"class":238},"s_jvP","drop-shadow",[46,241,235],{"class":234},[46,243,244],{"class":75},",\n",[46,246,247,250,252,254,257,259],{"class":48,"line":94},[46,248,249],{"class":129},"    x",[46,251,101],{"class":100},[46,253,235],{"class":234},[46,255,256],{"class":238},"-20%",[46,258,235],{"class":234},[46,260,244],{"class":75},[46,262,263,266,268,270,272,274],{"class":48,"line":116},[46,264,265],{"class":129},"    y",[46,267,101],{"class":100},[46,269,235],{"class":234},[46,271,256],{"class":238},[46,273,235],{"class":234},[46,275,244],{"class":75},[46,277,278,281,283,285,288,290],{"class":48,"line":142},[46,279,280],{"class":129},"    width",[46,282,101],{"class":100},[46,284,235],{"class":234},[46,286,287],{"class":238},"140%",[46,289,235],{"class":234},[46,291,244],{"class":75},[46,293,295,298,300,302,304,306],{"class":48,"line":294},7,[46,296,297],{"class":129},"    height",[46,299,101],{"class":100},[46,301,235],{"class":234},[46,303,287],{"class":238},[46,305,235],{"class":234},[46,307,244],{"class":75},[46,309,311],{"class":48,"line":310},8,[46,312,139],{"class":75},[46,314,316,319,321,324],{"class":48,"line":315},9,[46,317,318],{"class":56},"shadow",[46,320,76],{"class":75},[46,322,323],{"class":109},"append",[46,325,224],{"class":75},[46,327,329,332,334,337],{"class":48,"line":328},10,[46,330,331],{"class":109},"    dp",[46,333,76],{"class":75},[46,335,336],{"class":109},"SvgElement",[46,338,224],{"class":75},[46,340,342,345,347,349],{"class":48,"line":341},11,[46,343,344],{"class":234},"        \"",[46,346,184],{"class":238},[46,348,235],{"class":234},[46,350,244],{"class":75},[46,352,354,357,359,362],{"class":48,"line":353},12,[46,355,356],{"class":129},"        dx",[46,358,101],{"class":100},[46,360,361],{"class":135},"0",[46,363,244],{"class":75},[46,365,367,370,372,375],{"class":48,"line":366},13,[46,368,369],{"class":129},"        dy",[46,371,101],{"class":100},[46,373,374],{"class":135},"10",[46,376,244],{"class":75},[46,378,380,383,385,388],{"class":48,"line":379},14,[46,381,382],{"class":129},"        stdDeviation",[46,384,101],{"class":100},[46,386,387],{"class":135},"8",[46,389,244],{"class":75},[46,391,393,396,398,400,403,405],{"class":48,"line":392},15,[46,394,395],{"class":129},"        flood_color",[46,397,101],{"class":100},[46,399,235],{"class":234},[46,401,402],{"class":238},"#000000",[46,404,235],{"class":234},[46,406,244],{"class":75},[46,408,410,413,415,418],{"class":48,"line":409},16,[46,411,412],{"class":129},"        flood_opacity",[46,414,101],{"class":100},[46,416,417],{"class":135},"0.65",[46,419,244],{"class":75},[46,421,423],{"class":48,"line":422},17,[46,424,425],{"class":75},"    )\n",[46,427,429],{"class":48,"line":428},18,[46,430,139],{"class":75},[46,432,434,437,439,441,443,445],{"class":48,"line":433},19,[46,435,436],{"class":56},"defs",[46,438,76],{"class":75},[46,440,323],{"class":109},[46,442,126],{"class":75},[46,444,318],{"class":109},[46,446,139],{"class":75},[14,448,449],{},"The expanded filter bounds prevent the blurred shadow from being clipped near\nthe edge of a path.",[21,451,453],{"id":452},"center-the-drawing","Center the Drawing",[14,455,456,457,460],{},"All generated coordinates are relative to ",[28,458,459],{},"(0, 0)",". Translating one group to\nthe center keeps the point-generation code independent from the canvas size.",[37,462,464],{"className":39,"code":463,"language":41,"meta":42,"style":42},"margin = 64\ngroup = dp.G(pos=(svg.w \u002F 2, svg.h \u002F 2))\nsvg.append(group)\n\nshape_count = 8\nmin_radius = 20\nmax_radius = svg.w \u002F 2 - margin\nradius_step = (max_radius - min_radius) \u002F (shape_count - 1)\npalette = dp.generate_colors(\"#db45f9\", n=shape_count)\n",[28,465,466,476,530,545,549,559,569,592,626],{"__ignoreMap":42},[46,467,468,471,473],{"class":48,"line":49},[46,469,470],{"class":56},"margin ",[46,472,101],{"class":100},[46,474,475],{"class":135}," 64\n",[46,477,478,481,483,485,487,490,492,495,497,499,502,504,508,511,514,516,518,520,523,525,527],{"class":48,"line":66},[46,479,480],{"class":56},"group ",[46,482,101],{"class":100},[46,484,104],{"class":56},[46,486,76],{"class":75},[46,488,489],{"class":109},"G",[46,491,126],{"class":75},[46,493,494],{"class":129},"pos",[46,496,101],{"class":100},[46,498,126],{"class":75},[46,500,501],{"class":109},"svg",[46,503,76],{"class":75},[46,505,507],{"class":506},"sm80-","w",[46,509,510],{"class":100}," \u002F",[46,512,513],{"class":135}," 2",[46,515,162],{"class":75},[46,517,200],{"class":109},[46,519,76],{"class":75},[46,521,522],{"class":506},"h",[46,524,510],{"class":100},[46,526,513],{"class":135},[46,528,529],{"class":75},"))\n",[46,531,532,534,536,538,540,543],{"class":48,"line":87},[46,533,501],{"class":56},[46,535,76],{"class":75},[46,537,323],{"class":109},[46,539,126],{"class":75},[46,541,542],{"class":109},"group",[46,544,139],{"class":75},[46,546,547],{"class":48,"line":94},[46,548,91],{"emptyLinePlaceholder":90},[46,550,551,554,556],{"class":48,"line":116},[46,552,553],{"class":56},"shape_count ",[46,555,101],{"class":100},[46,557,558],{"class":135}," 8\n",[46,560,561,564,566],{"class":48,"line":142},[46,562,563],{"class":56},"min_radius ",[46,565,101],{"class":100},[46,567,568],{"class":135}," 20\n",[46,570,571,574,576,578,580,582,584,586,589],{"class":48,"line":294},[46,572,573],{"class":56},"max_radius ",[46,575,101],{"class":100},[46,577,200],{"class":56},[46,579,76],{"class":75},[46,581,507],{"class":506},[46,583,510],{"class":100},[46,585,513],{"class":135},[46,587,588],{"class":100}," -",[46,590,591],{"class":56}," margin\n",[46,593,594,597,599,602,604,607,610,613,615,617,619,621,624],{"class":48,"line":310},[46,595,596],{"class":56},"radius_step ",[46,598,101],{"class":100},[46,600,601],{"class":75}," (",[46,603,573],{"class":56},[46,605,606],{"class":100},"-",[46,608,609],{"class":56}," min_radius",[46,611,612],{"class":75},")",[46,614,510],{"class":100},[46,616,601],{"class":75},[46,618,553],{"class":56},[46,620,606],{"class":100},[46,622,623],{"class":135}," 1",[46,625,139],{"class":75},[46,627,628,631,633,635,637,640,642,644,647,649,651,654,656,659],{"class":48,"line":315},[46,629,630],{"class":56},"palette ",[46,632,101],{"class":100},[46,634,104],{"class":56},[46,636,76],{"class":75},[46,638,639],{"class":109},"generate_colors",[46,641,126],{"class":75},[46,643,235],{"class":234},[46,645,646],{"class":238},"#db45f9",[46,648,235],{"class":234},[46,650,162],{"class":75},[46,652,653],{"class":129}," n",[46,655,101],{"class":100},[46,657,658],{"class":109},"shape_count",[46,660,139],{"class":75},[14,662,663,664,667],{},"The first shape uses the largest radius. Each following shape moves inward by\n",[28,665,666],{},"radius_step",", producing nested layers.",[21,669,671],{"id":670},"generate-one-noisy-contour","Generate One Noisy Contour",[14,673,674,675,678,679,682],{},"For every angle, create two unit vectors. ",[28,676,677],{},"direction"," determines the position\nof the point. ",[28,680,681],{},"noise_direction"," determines where the noise field is sampled.",[37,684,686],{"className":39,"code":685,"language":41,"meta":42,"style":42},"line = dp.LineGenerator(curve=\"linear\")\noffset = dp.Vector(1, 1)\n\nbase_radius = max_radius\nphase = 0\npoints: list[tuple[float, float]] = []\n\nangle = 0.0\nwhile angle \u003C 360:\n    direction = dp.Vector.from_polar(angle)\n    noise_direction = dp.Vector.from_polar(angle + phase)\n    radius = base_radius + noise.noise(\n        noise_direction.x,\n        noise_direction.y,\n        frequency=1.5,\n        amplitude=50,\n    )\n    points.append((direction * radius + offset).xy)\n    angle += 5\n\npath_data = f\"{line(points)} Z\"\n",[28,687,688,718,743,747,757,767,804,808,818,835,860,889,911,923,934,946,958,962,996,1007,1012],{"__ignoreMap":42},[46,689,690,693,695,697,699,702,704,707,709,711,714,716],{"class":48,"line":49},[46,691,692],{"class":56},"line ",[46,694,101],{"class":100},[46,696,104],{"class":56},[46,698,76],{"class":75},[46,700,701],{"class":109},"LineGenerator",[46,703,126],{"class":75},[46,705,706],{"class":129},"curve",[46,708,101],{"class":100},[46,710,235],{"class":234},[46,712,713],{"class":238},"linear",[46,715,235],{"class":234},[46,717,139],{"class":75},[46,719,720,723,725,727,729,732,734,737,739,741],{"class":48,"line":66},[46,721,722],{"class":56},"offset ",[46,724,101],{"class":100},[46,726,104],{"class":56},[46,728,76],{"class":75},[46,730,731],{"class":109},"Vector",[46,733,126],{"class":75},[46,735,736],{"class":135},"1",[46,738,162],{"class":75},[46,740,623],{"class":135},[46,742,139],{"class":75},[46,744,745],{"class":48,"line":87},[46,746,91],{"emptyLinePlaceholder":90},[46,748,749,752,754],{"class":48,"line":94},[46,750,751],{"class":56},"base_radius ",[46,753,101],{"class":100},[46,755,756],{"class":56}," max_radius\n",[46,758,759,762,764],{"class":48,"line":116},[46,760,761],{"class":56},"phase ",[46,763,101],{"class":100},[46,765,766],{"class":135}," 0\n",[46,768,769,772,775,778,781,784,786,790,792,795,798,801],{"class":48,"line":142},[46,770,771],{"class":56},"points",[46,773,774],{"class":75},":",[46,776,777],{"class":56}," list",[46,779,780],{"class":75},"[",[46,782,783],{"class":56},"tuple",[46,785,780],{"class":75},[46,787,789],{"class":788},"s-tzF","float",[46,791,162],{"class":75},[46,793,794],{"class":788}," float",[46,796,797],{"class":75},"]]",[46,799,800],{"class":100}," =",[46,802,803],{"class":75}," []\n",[46,805,806],{"class":48,"line":294},[46,807,91],{"emptyLinePlaceholder":90},[46,809,810,813,815],{"class":48,"line":310},[46,811,812],{"class":56},"angle ",[46,814,101],{"class":100},[46,816,817],{"class":135}," 0.0\n",[46,819,820,823,826,829,832],{"class":48,"line":315},[46,821,822],{"class":52},"while",[46,824,825],{"class":56}," angle ",[46,827,828],{"class":100},"\u003C",[46,830,831],{"class":135}," 360",[46,833,834],{"class":75},":\n",[46,836,837,840,842,844,846,848,850,853,855,858],{"class":48,"line":328},[46,838,839],{"class":56},"    direction ",[46,841,101],{"class":100},[46,843,104],{"class":56},[46,845,76],{"class":75},[46,847,731],{"class":506},[46,849,76],{"class":75},[46,851,852],{"class":109},"from_polar",[46,854,126],{"class":75},[46,856,857],{"class":109},"angle",[46,859,139],{"class":75},[46,861,862,865,867,869,871,873,875,877,879,881,884,887],{"class":48,"line":341},[46,863,864],{"class":56},"    noise_direction ",[46,866,101],{"class":100},[46,868,104],{"class":56},[46,870,76],{"class":75},[46,872,731],{"class":506},[46,874,76],{"class":75},[46,876,852],{"class":109},[46,878,126],{"class":75},[46,880,812],{"class":109},[46,882,883],{"class":100},"+",[46,885,886],{"class":109}," phase",[46,888,139],{"class":75},[46,890,891,894,896,899,901,904,906,909],{"class":48,"line":353},[46,892,893],{"class":56},"    radius ",[46,895,101],{"class":100},[46,897,898],{"class":56}," base_radius ",[46,900,883],{"class":100},[46,902,903],{"class":56}," noise",[46,905,76],{"class":75},[46,907,908],{"class":109},"noise",[46,910,224],{"class":75},[46,912,913,916,918,921],{"class":48,"line":366},[46,914,915],{"class":109},"        noise_direction",[46,917,76],{"class":75},[46,919,920],{"class":506},"x",[46,922,244],{"class":75},[46,924,925,927,929,932],{"class":48,"line":379},[46,926,915],{"class":109},[46,928,76],{"class":75},[46,930,931],{"class":506},"y",[46,933,244],{"class":75},[46,935,936,939,941,944],{"class":48,"line":392},[46,937,938],{"class":129},"        frequency",[46,940,101],{"class":100},[46,942,943],{"class":135},"1.5",[46,945,244],{"class":75},[46,947,948,951,953,956],{"class":48,"line":409},[46,949,950],{"class":129},"        amplitude",[46,952,101],{"class":100},[46,954,955],{"class":135},"50",[46,957,244],{"class":75},[46,959,960],{"class":48,"line":422},[46,961,425],{"class":75},[46,963,964,967,969,971,974,977,980,983,985,988,991,994],{"class":48,"line":428},[46,965,966],{"class":56},"    points",[46,968,76],{"class":75},[46,970,323],{"class":109},[46,972,973],{"class":75},"((",[46,975,976],{"class":109},"direction ",[46,978,979],{"class":100},"*",[46,981,982],{"class":109}," radius ",[46,984,883],{"class":100},[46,986,987],{"class":109}," offset",[46,989,990],{"class":75},").",[46,992,993],{"class":506},"xy",[46,995,139],{"class":75},[46,997,998,1001,1004],{"class":48,"line":433},[46,999,1000],{"class":56},"    angle ",[46,1002,1003],{"class":100},"+=",[46,1005,1006],{"class":135}," 5\n",[46,1008,1010],{"class":48,"line":1009},20,[46,1011,91],{"emptyLinePlaceholder":90},[46,1013,1015,1018,1020,1024,1026,1030,1032,1034,1036,1038,1041],{"class":48,"line":1014},21,[46,1016,1017],{"class":56},"path_data ",[46,1019,101],{"class":100},[46,1021,1023],{"class":1022},"sfdCM"," f",[46,1025,235],{"class":238},[46,1027,1029],{"class":1028},"smmm7","{",[46,1031,48],{"class":109},[46,1033,126],{"class":75},[46,1035,771],{"class":109},[46,1037,612],{"class":75},[46,1039,1040],{"class":1028},"}",[46,1042,1043],{"class":238}," Z\"\n",[14,1045,1046,1047,1050],{},"Sampling noise along a unit circle makes the beginning and end of the contour\nmeet naturally. The small ",[28,1048,1049],{},"offset"," avoids sampling the exact same symmetric\ncoordinates around the noise origin.",[14,1052,1053,1054,1057,1058,1061],{},"An angle step of ",[28,1055,1056],{},"5"," provides enough detail for this composition while keeping\nthe animated SVG compact. Appending ",[28,1059,1060],{},"Z"," closes the contour, connecting the last\nsampled point back to the first so the fill has a clean boundary.",[21,1063,1065],{"id":1064},"build-animation-frames","Build Animation Frames",[14,1067,1068],{},"SVG path morphing requires every value to contain a compatible sequence of\npath commands. Each phase therefore uses the same angle loop and the same\nnumber of points.",[37,1070,1072],{"className":39,"code":1071,"language":41,"meta":42,"style":42},"wave_phases = (0, 90, 180, 270, 360)\nwave_paths: list[str] = []\n\nfor phase in wave_phases:\n    points = []\n    angle = 0.0\n    while angle \u003C 360:\n        direction = dp.Vector.from_polar(angle)\n        noise_direction = dp.Vector.from_polar(angle + phase)\n        radius = base_radius + noise.noise(\n            noise_direction.x,\n            noise_direction.y,\n            frequency=1.5,\n            amplitude=50,\n        )\n        points.append((direction * radius + offset).xy)\n        angle += 5\n\n    wave_paths.append(f\"{line(points)} Z\")\n",[28,1073,1074,1106,1127,1131,1147,1156,1164,1177,1200,1227,1246,1257,1267,1278,1289,1294,1321,1330,1334],{"__ignoreMap":42},[46,1075,1076,1079,1081,1083,1085,1087,1090,1092,1095,1097,1100,1102,1104],{"class":48,"line":49},[46,1077,1078],{"class":56},"wave_phases ",[46,1080,101],{"class":100},[46,1082,601],{"class":75},[46,1084,361],{"class":135},[46,1086,162],{"class":75},[46,1088,1089],{"class":135}," 90",[46,1091,162],{"class":75},[46,1093,1094],{"class":135}," 180",[46,1096,162],{"class":75},[46,1098,1099],{"class":135}," 270",[46,1101,162],{"class":75},[46,1103,831],{"class":135},[46,1105,139],{"class":75},[46,1107,1108,1111,1113,1115,1117,1120,1123,1125],{"class":48,"line":66},[46,1109,1110],{"class":56},"wave_paths",[46,1112,774],{"class":75},[46,1114,777],{"class":56},[46,1116,780],{"class":75},[46,1118,1119],{"class":788},"str",[46,1121,1122],{"class":75},"]",[46,1124,800],{"class":100},[46,1126,803],{"class":75},[46,1128,1129],{"class":48,"line":87},[46,1130,91],{"emptyLinePlaceholder":90},[46,1132,1133,1136,1139,1142,1145],{"class":48,"line":94},[46,1134,1135],{"class":52},"for",[46,1137,1138],{"class":56}," phase ",[46,1140,1141],{"class":52},"in",[46,1143,1144],{"class":56}," wave_phases",[46,1146,834],{"class":75},[46,1148,1149,1152,1154],{"class":48,"line":116},[46,1150,1151],{"class":56},"    points ",[46,1153,101],{"class":100},[46,1155,803],{"class":75},[46,1157,1158,1160,1162],{"class":48,"line":142},[46,1159,1000],{"class":56},[46,1161,101],{"class":100},[46,1163,817],{"class":135},[46,1165,1166,1169,1171,1173,1175],{"class":48,"line":294},[46,1167,1168],{"class":52},"    while",[46,1170,825],{"class":56},[46,1172,828],{"class":100},[46,1174,831],{"class":135},[46,1176,834],{"class":75},[46,1178,1179,1182,1184,1186,1188,1190,1192,1194,1196,1198],{"class":48,"line":310},[46,1180,1181],{"class":56},"        direction ",[46,1183,101],{"class":100},[46,1185,104],{"class":56},[46,1187,76],{"class":75},[46,1189,731],{"class":506},[46,1191,76],{"class":75},[46,1193,852],{"class":109},[46,1195,126],{"class":75},[46,1197,857],{"class":109},[46,1199,139],{"class":75},[46,1201,1202,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1225],{"class":48,"line":315},[46,1203,1204],{"class":56},"        noise_direction ",[46,1206,101],{"class":100},[46,1208,104],{"class":56},[46,1210,76],{"class":75},[46,1212,731],{"class":506},[46,1214,76],{"class":75},[46,1216,852],{"class":109},[46,1218,126],{"class":75},[46,1220,812],{"class":109},[46,1222,883],{"class":100},[46,1224,886],{"class":109},[46,1226,139],{"class":75},[46,1228,1229,1232,1234,1236,1238,1240,1242,1244],{"class":48,"line":328},[46,1230,1231],{"class":56},"        radius ",[46,1233,101],{"class":100},[46,1235,898],{"class":56},[46,1237,883],{"class":100},[46,1239,903],{"class":56},[46,1241,76],{"class":75},[46,1243,908],{"class":109},[46,1245,224],{"class":75},[46,1247,1248,1251,1253,1255],{"class":48,"line":341},[46,1249,1250],{"class":109},"            noise_direction",[46,1252,76],{"class":75},[46,1254,920],{"class":506},[46,1256,244],{"class":75},[46,1258,1259,1261,1263,1265],{"class":48,"line":353},[46,1260,1250],{"class":109},[46,1262,76],{"class":75},[46,1264,931],{"class":506},[46,1266,244],{"class":75},[46,1268,1269,1272,1274,1276],{"class":48,"line":366},[46,1270,1271],{"class":129},"            frequency",[46,1273,101],{"class":100},[46,1275,943],{"class":135},[46,1277,244],{"class":75},[46,1279,1280,1283,1285,1287],{"class":48,"line":379},[46,1281,1282],{"class":129},"            amplitude",[46,1284,101],{"class":100},[46,1286,955],{"class":135},[46,1288,244],{"class":75},[46,1290,1291],{"class":48,"line":392},[46,1292,1293],{"class":75},"        )\n",[46,1295,1296,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319],{"class":48,"line":409},[46,1297,1298],{"class":56},"        points",[46,1300,76],{"class":75},[46,1302,323],{"class":109},[46,1304,973],{"class":75},[46,1306,976],{"class":109},[46,1308,979],{"class":100},[46,1310,982],{"class":109},[46,1312,883],{"class":100},[46,1314,987],{"class":109},[46,1316,990],{"class":75},[46,1318,993],{"class":506},[46,1320,139],{"class":75},[46,1322,1323,1326,1328],{"class":48,"line":422},[46,1324,1325],{"class":56},"        angle ",[46,1327,1003],{"class":100},[46,1329,1006],{"class":135},[46,1331,1332],{"class":48,"line":428},[46,1333,91],{"emptyLinePlaceholder":90},[46,1335,1336,1339,1341,1343,1345,1348,1350,1352,1354,1356,1358,1360,1362,1365],{"class":48,"line":433},[46,1337,1338],{"class":56},"    wave_paths",[46,1340,76],{"class":75},[46,1342,323],{"class":109},[46,1344,126],{"class":75},[46,1346,1347],{"class":1022},"f",[46,1349,235],{"class":238},[46,1351,1029],{"class":1028},[46,1353,48],{"class":109},[46,1355,126],{"class":75},[46,1357,771],{"class":109},[46,1359,612],{"class":75},[46,1361,1040],{"class":1028},[46,1363,1364],{"class":238}," Z\"",[46,1366,139],{"class":75},[14,1368,1369,1370,1373,1374,1376],{},"The final phase is ",[28,1371,1372],{},"360",", which returns to the orientation used by phase ",[28,1375,361],{},".\nThat gives the animation matching start and end states for a seamless loop.",[21,1378,1380],{"id":1379},"layer-and-animate-the-shapes","Layer and Animate the Shapes",[14,1382,1383,1384,1387,1388,1391],{},"Create one path for each palette color. The path starts with the first frame,\nand an SVG ",[28,1385,1386],{},"\u003Canimate>"," element cycles its ",[28,1389,1390],{},"d"," attribute through all generated\nframes.",[37,1393,1395],{"className":39,"code":1394,"language":41,"meta":42,"style":42},"wave_duration = \"7s\"\n\nfor shape_index, color in enumerate(palette):\n    base_radius = max_radius - shape_index * radius_step\n    wave_paths = []\n\n    for phase in wave_phases:\n        points = []\n        angle = 0.0\n        while angle \u003C 360:\n            direction = dp.Vector.from_polar(angle)\n            noise_direction = dp.Vector.from_polar(angle + phase)\n            radius = base_radius + noise.noise(\n                noise_direction.x,\n                noise_direction.y,\n                frequency=1.5,\n                amplitude=50,\n            )\n            points.append((direction * radius + offset).xy)\n            angle += 5\n\n        wave_paths.append(f\"{line(points)} Z\")\n\n    path = dp.Path(\n        wave_paths[0],\n        opacity=0.75,\n        stroke=theme.ink,\n        fill=color,\n        filter=\"url(#drop-shadow)\",\n    )\n    path.append(dp.Animate(\"d\", values=wave_paths, dur=wave_duration))\n    group.append(path)\n",[28,1396,1397,1413,1417,1443,1463,1472,1476,1489,1498,1506,1519,1542,1569,1588,1599,1609,1620,1631,1636,1663,1672,1676,1708,1713,1730,1742,1755,1773,1786,1803,1808,1857],{"__ignoreMap":42},[46,1398,1399,1402,1404,1407,1410],{"class":48,"line":49},[46,1400,1401],{"class":56},"wave_duration ",[46,1403,101],{"class":100},[46,1405,1406],{"class":234}," \"",[46,1408,1409],{"class":238},"7s",[46,1411,1412],{"class":234},"\"\n",[46,1414,1415],{"class":48,"line":66},[46,1416,91],{"emptyLinePlaceholder":90},[46,1418,1419,1421,1424,1426,1429,1431,1435,1437,1440],{"class":48,"line":87},[46,1420,1135],{"class":52},[46,1422,1423],{"class":56}," shape_index",[46,1425,162],{"class":75},[46,1427,1428],{"class":56}," color ",[46,1430,1141],{"class":52},[46,1432,1434],{"class":1433},"sBTIf"," enumerate",[46,1436,126],{"class":75},[46,1438,1439],{"class":109},"palette",[46,1441,1442],{"class":75},"):\n",[46,1444,1445,1448,1450,1453,1455,1458,1460],{"class":48,"line":94},[46,1446,1447],{"class":56},"    base_radius ",[46,1449,101],{"class":100},[46,1451,1452],{"class":56}," max_radius ",[46,1454,606],{"class":100},[46,1456,1457],{"class":56}," shape_index ",[46,1459,979],{"class":100},[46,1461,1462],{"class":56}," radius_step\n",[46,1464,1465,1468,1470],{"class":48,"line":116},[46,1466,1467],{"class":56},"    wave_paths ",[46,1469,101],{"class":100},[46,1471,803],{"class":75},[46,1473,1474],{"class":48,"line":142},[46,1475,91],{"emptyLinePlaceholder":90},[46,1477,1478,1481,1483,1485,1487],{"class":48,"line":294},[46,1479,1480],{"class":52},"    for",[46,1482,1138],{"class":56},[46,1484,1141],{"class":52},[46,1486,1144],{"class":56},[46,1488,834],{"class":75},[46,1490,1491,1494,1496],{"class":48,"line":310},[46,1492,1493],{"class":56},"        points ",[46,1495,101],{"class":100},[46,1497,803],{"class":75},[46,1499,1500,1502,1504],{"class":48,"line":315},[46,1501,1325],{"class":56},[46,1503,101],{"class":100},[46,1505,817],{"class":135},[46,1507,1508,1511,1513,1515,1517],{"class":48,"line":328},[46,1509,1510],{"class":52},"        while",[46,1512,825],{"class":56},[46,1514,828],{"class":100},[46,1516,831],{"class":135},[46,1518,834],{"class":75},[46,1520,1521,1524,1526,1528,1530,1532,1534,1536,1538,1540],{"class":48,"line":341},[46,1522,1523],{"class":56},"            direction ",[46,1525,101],{"class":100},[46,1527,104],{"class":56},[46,1529,76],{"class":75},[46,1531,731],{"class":506},[46,1533,76],{"class":75},[46,1535,852],{"class":109},[46,1537,126],{"class":75},[46,1539,857],{"class":109},[46,1541,139],{"class":75},[46,1543,1544,1547,1549,1551,1553,1555,1557,1559,1561,1563,1565,1567],{"class":48,"line":353},[46,1545,1546],{"class":56},"            noise_direction ",[46,1548,101],{"class":100},[46,1550,104],{"class":56},[46,1552,76],{"class":75},[46,1554,731],{"class":506},[46,1556,76],{"class":75},[46,1558,852],{"class":109},[46,1560,126],{"class":75},[46,1562,812],{"class":109},[46,1564,883],{"class":100},[46,1566,886],{"class":109},[46,1568,139],{"class":75},[46,1570,1571,1574,1576,1578,1580,1582,1584,1586],{"class":48,"line":366},[46,1572,1573],{"class":56},"            radius ",[46,1575,101],{"class":100},[46,1577,898],{"class":56},[46,1579,883],{"class":100},[46,1581,903],{"class":56},[46,1583,76],{"class":75},[46,1585,908],{"class":109},[46,1587,224],{"class":75},[46,1589,1590,1593,1595,1597],{"class":48,"line":379},[46,1591,1592],{"class":109},"                noise_direction",[46,1594,76],{"class":75},[46,1596,920],{"class":506},[46,1598,244],{"class":75},[46,1600,1601,1603,1605,1607],{"class":48,"line":392},[46,1602,1592],{"class":109},[46,1604,76],{"class":75},[46,1606,931],{"class":506},[46,1608,244],{"class":75},[46,1610,1611,1614,1616,1618],{"class":48,"line":409},[46,1612,1613],{"class":129},"                frequency",[46,1615,101],{"class":100},[46,1617,943],{"class":135},[46,1619,244],{"class":75},[46,1621,1622,1625,1627,1629],{"class":48,"line":422},[46,1623,1624],{"class":129},"                amplitude",[46,1626,101],{"class":100},[46,1628,955],{"class":135},[46,1630,244],{"class":75},[46,1632,1633],{"class":48,"line":428},[46,1634,1635],{"class":75},"            )\n",[46,1637,1638,1641,1643,1645,1647,1649,1651,1653,1655,1657,1659,1661],{"class":48,"line":433},[46,1639,1640],{"class":56},"            points",[46,1642,76],{"class":75},[46,1644,323],{"class":109},[46,1646,973],{"class":75},[46,1648,976],{"class":109},[46,1650,979],{"class":100},[46,1652,982],{"class":109},[46,1654,883],{"class":100},[46,1656,987],{"class":109},[46,1658,990],{"class":75},[46,1660,993],{"class":506},[46,1662,139],{"class":75},[46,1664,1665,1668,1670],{"class":48,"line":1009},[46,1666,1667],{"class":56},"            angle ",[46,1669,1003],{"class":100},[46,1671,1006],{"class":135},[46,1673,1674],{"class":48,"line":1014},[46,1675,91],{"emptyLinePlaceholder":90},[46,1677,1679,1682,1684,1686,1688,1690,1692,1694,1696,1698,1700,1702,1704,1706],{"class":48,"line":1678},22,[46,1680,1681],{"class":56},"        wave_paths",[46,1683,76],{"class":75},[46,1685,323],{"class":109},[46,1687,126],{"class":75},[46,1689,1347],{"class":1022},[46,1691,235],{"class":238},[46,1693,1029],{"class":1028},[46,1695,48],{"class":109},[46,1697,126],{"class":75},[46,1699,771],{"class":109},[46,1701,612],{"class":75},[46,1703,1040],{"class":1028},[46,1705,1364],{"class":238},[46,1707,139],{"class":75},[46,1709,1711],{"class":48,"line":1710},23,[46,1712,91],{"emptyLinePlaceholder":90},[46,1714,1716,1719,1721,1723,1725,1728],{"class":48,"line":1715},24,[46,1717,1718],{"class":56},"    path ",[46,1720,101],{"class":100},[46,1722,104],{"class":56},[46,1724,76],{"class":75},[46,1726,1727],{"class":109},"Path",[46,1729,224],{"class":75},[46,1731,1733,1735,1737,1739],{"class":48,"line":1732},25,[46,1734,1681],{"class":109},[46,1736,780],{"class":75},[46,1738,361],{"class":135},[46,1740,1741],{"class":75},"],\n",[46,1743,1745,1748,1750,1753],{"class":48,"line":1744},26,[46,1746,1747],{"class":129},"        opacity",[46,1749,101],{"class":100},[46,1751,1752],{"class":135},"0.75",[46,1754,244],{"class":75},[46,1756,1758,1761,1763,1766,1768,1771],{"class":48,"line":1757},27,[46,1759,1760],{"class":129},"        stroke",[46,1762,101],{"class":100},[46,1764,1765],{"class":109},"theme",[46,1767,76],{"class":75},[46,1769,1770],{"class":506},"ink",[46,1772,244],{"class":75},[46,1774,1776,1779,1781,1784],{"class":48,"line":1775},28,[46,1777,1778],{"class":129},"        fill",[46,1780,101],{"class":100},[46,1782,1783],{"class":109},"color",[46,1785,244],{"class":75},[46,1787,1789,1792,1794,1796,1799,1801],{"class":48,"line":1788},29,[46,1790,1791],{"class":129},"        filter",[46,1793,101],{"class":100},[46,1795,235],{"class":234},[46,1797,1798],{"class":238},"url(#drop-shadow)",[46,1800,235],{"class":234},[46,1802,244],{"class":75},[46,1804,1806],{"class":48,"line":1805},30,[46,1807,425],{"class":75},[46,1809,1811,1814,1816,1818,1820,1823,1825,1828,1830,1832,1834,1836,1838,1841,1843,1845,1847,1850,1852,1855],{"class":48,"line":1810},31,[46,1812,1813],{"class":56},"    path",[46,1815,76],{"class":75},[46,1817,323],{"class":109},[46,1819,126],{"class":75},[46,1821,1822],{"class":109},"dp",[46,1824,76],{"class":75},[46,1826,1827],{"class":109},"Animate",[46,1829,126],{"class":75},[46,1831,235],{"class":234},[46,1833,1390],{"class":238},[46,1835,235],{"class":234},[46,1837,162],{"class":75},[46,1839,1840],{"class":129}," values",[46,1842,101],{"class":100},[46,1844,1110],{"class":109},[46,1846,162],{"class":75},[46,1848,1849],{"class":129}," dur",[46,1851,101],{"class":100},[46,1853,1854],{"class":109},"wave_duration",[46,1856,529],{"class":75},[46,1858,1860,1863,1865,1867,1869,1872],{"class":48,"line":1859},32,[46,1861,1862],{"class":56},"    group",[46,1864,76],{"class":75},[46,1866,323],{"class":109},[46,1868,126],{"class":75},[46,1870,1871],{"class":109},"path",[46,1873,139],{"class":75},[14,1875,1876],{},"The outer path is appended first and the smaller paths are appended afterward,\nso every inner layer remains visible above the previous one.",[21,1878,1880],{"id":1879},"complete-script","Complete Script",[37,1882,1884],{"className":39,"code":1883,"language":41,"meta":42,"style":42},"import pydreamplet as dp\nfrom pydreamplet.noise import SimplexNoise2D\n\ntheme = dp.Theme()\nnoise = SimplexNoise2D(seed=42)\nsvg = dp.SVG(1024, 1024)\n\ndefs = svg.ensure_defs()\nshadow = dp.Filter(\n    id=\"drop-shadow\",\n    x=\"-20%\",\n    y=\"-20%\",\n    width=\"140%\",\n    height=\"140%\",\n)\nshadow.append(\n    dp.SvgElement(\n        \"feDropShadow\",\n        dx=0,\n        dy=10,\n        stdDeviation=8,\n        flood_color=\"#000000\",\n        flood_opacity=0.65,\n    )\n)\ndefs.append(shadow)\n\nmargin = 64\ngroup = dp.G(pos=(svg.w \u002F 2, svg.h \u002F 2))\nsvg.append(group)\n\nshape_count = 8\nline = dp.LineGenerator(curve=\"linear\")\noffset = dp.Vector(1, 1)\npalette = dp.generate_colors(\"#db45f9\", n=shape_count)\nmin_radius = 20\nmax_radius = svg.w \u002F 2 - margin\nradius_step = (max_radius - min_radius) \u002F (shape_count - 1)\nwave_phases = (0, 90, 180, 270, 360)\nwave_duration = \"7s\"\n\nfor shape_index, color in enumerate(palette):\n    base_radius = max_radius - shape_index * radius_step\n    wave_paths: list[str] = []\n\n    for phase in wave_phases:\n        points: list[tuple[float, float]] = []\n        angle = 0.0\n        while angle \u003C 360:\n            direction = dp.Vector.from_polar(angle)\n            noise_direction = dp.Vector.from_polar(angle + phase)\n            radius = base_radius + noise.noise(\n                noise_direction.x,\n                noise_direction.y,\n                frequency=1.5,\n                amplitude=50,\n            )\n            points.append((direction * radius + offset).xy)\n            angle += 5\n\n        wave_paths.append(f\"{line(points)} Z\")\n\n    path = dp.Path(\n        wave_paths[0],\n        opacity=0.75,\n        stroke=theme.ink,\n        fill=color,\n        filter=\"url(#drop-shadow)\",\n    )\n    path.append(dp.Animate(\"d\", values=wave_paths, dur=wave_duration))\n    group.append(path)\n\nsvg.save(\"polar_noise.svg\")\n",[28,1885,1886,1896,1910,1914,1928,1946,1968,1972,1986,2000,2014,2028,2042,2056,2070,2074,2084,2094,2104,2114,2124,2134,2148,2158,2162,2166,2180,2184,2192,2236,2250,2254,2262,2289,2312,2343,2352,2373,2402,2431,2444,2449,2470,2487,2506,2511,2524,2551,2560,2573,2596,2623,2642,2653,2664,2675,2686,2691,2718,2727,2732,2763,2768,2783,2794,2805,2820,2831,2846,2851,2894,2909,2914],{"__ignoreMap":42},[46,1887,1888,1890,1892,1894],{"class":48,"line":49},[46,1889,53],{"class":52},[46,1891,57],{"class":56},[46,1893,60],{"class":52},[46,1895,63],{"class":56},[46,1897,1898,1900,1902,1904,1906,1908],{"class":48,"line":66},[46,1899,69],{"class":52},[46,1901,72],{"class":56},[46,1903,76],{"class":75},[46,1905,79],{"class":56},[46,1907,53],{"class":52},[46,1909,84],{"class":56},[46,1911,1912],{"class":48,"line":87},[46,1913,91],{"emptyLinePlaceholder":90},[46,1915,1916,1918,1920,1922,1924,1926],{"class":48,"line":94},[46,1917,97],{"class":56},[46,1919,101],{"class":100},[46,1921,104],{"class":56},[46,1923,76],{"class":75},[46,1925,110],{"class":109},[46,1927,113],{"class":75},[46,1929,1930,1932,1934,1936,1938,1940,1942,1944],{"class":48,"line":116},[46,1931,79],{"class":56},[46,1933,101],{"class":100},[46,1935,123],{"class":109},[46,1937,126],{"class":75},[46,1939,130],{"class":129},[46,1941,101],{"class":100},[46,1943,136],{"class":135},[46,1945,139],{"class":75},[46,1947,1948,1950,1952,1954,1956,1958,1960,1962,1964,1966],{"class":48,"line":142},[46,1949,145],{"class":56},[46,1951,101],{"class":100},[46,1953,104],{"class":56},[46,1955,76],{"class":75},[46,1957,154],{"class":109},[46,1959,126],{"class":75},[46,1961,159],{"class":135},[46,1963,162],{"class":75},[46,1965,165],{"class":135},[46,1967,139],{"class":75},[46,1969,1970],{"class":48,"line":294},[46,1971,91],{"emptyLinePlaceholder":90},[46,1973,1974,1976,1978,1980,1982,1984],{"class":48,"line":310},[46,1975,195],{"class":56},[46,1977,101],{"class":100},[46,1979,200],{"class":56},[46,1981,76],{"class":75},[46,1983,205],{"class":109},[46,1985,113],{"class":75},[46,1987,1988,1990,1992,1994,1996,1998],{"class":48,"line":315},[46,1989,212],{"class":56},[46,1991,101],{"class":100},[46,1993,104],{"class":56},[46,1995,76],{"class":75},[46,1997,221],{"class":109},[46,1999,224],{"class":75},[46,2001,2002,2004,2006,2008,2010,2012],{"class":48,"line":328},[46,2003,229],{"class":129},[46,2005,101],{"class":100},[46,2007,235],{"class":234},[46,2009,239],{"class":238},[46,2011,235],{"class":234},[46,2013,244],{"class":75},[46,2015,2016,2018,2020,2022,2024,2026],{"class":48,"line":341},[46,2017,249],{"class":129},[46,2019,101],{"class":100},[46,2021,235],{"class":234},[46,2023,256],{"class":238},[46,2025,235],{"class":234},[46,2027,244],{"class":75},[46,2029,2030,2032,2034,2036,2038,2040],{"class":48,"line":353},[46,2031,265],{"class":129},[46,2033,101],{"class":100},[46,2035,235],{"class":234},[46,2037,256],{"class":238},[46,2039,235],{"class":234},[46,2041,244],{"class":75},[46,2043,2044,2046,2048,2050,2052,2054],{"class":48,"line":366},[46,2045,280],{"class":129},[46,2047,101],{"class":100},[46,2049,235],{"class":234},[46,2051,287],{"class":238},[46,2053,235],{"class":234},[46,2055,244],{"class":75},[46,2057,2058,2060,2062,2064,2066,2068],{"class":48,"line":379},[46,2059,297],{"class":129},[46,2061,101],{"class":100},[46,2063,235],{"class":234},[46,2065,287],{"class":238},[46,2067,235],{"class":234},[46,2069,244],{"class":75},[46,2071,2072],{"class":48,"line":392},[46,2073,139],{"class":75},[46,2075,2076,2078,2080,2082],{"class":48,"line":409},[46,2077,318],{"class":56},[46,2079,76],{"class":75},[46,2081,323],{"class":109},[46,2083,224],{"class":75},[46,2085,2086,2088,2090,2092],{"class":48,"line":422},[46,2087,331],{"class":109},[46,2089,76],{"class":75},[46,2091,336],{"class":109},[46,2093,224],{"class":75},[46,2095,2096,2098,2100,2102],{"class":48,"line":428},[46,2097,344],{"class":234},[46,2099,184],{"class":238},[46,2101,235],{"class":234},[46,2103,244],{"class":75},[46,2105,2106,2108,2110,2112],{"class":48,"line":433},[46,2107,356],{"class":129},[46,2109,101],{"class":100},[46,2111,361],{"class":135},[46,2113,244],{"class":75},[46,2115,2116,2118,2120,2122],{"class":48,"line":1009},[46,2117,369],{"class":129},[46,2119,101],{"class":100},[46,2121,374],{"class":135},[46,2123,244],{"class":75},[46,2125,2126,2128,2130,2132],{"class":48,"line":1014},[46,2127,382],{"class":129},[46,2129,101],{"class":100},[46,2131,387],{"class":135},[46,2133,244],{"class":75},[46,2135,2136,2138,2140,2142,2144,2146],{"class":48,"line":1678},[46,2137,395],{"class":129},[46,2139,101],{"class":100},[46,2141,235],{"class":234},[46,2143,402],{"class":238},[46,2145,235],{"class":234},[46,2147,244],{"class":75},[46,2149,2150,2152,2154,2156],{"class":48,"line":1710},[46,2151,412],{"class":129},[46,2153,101],{"class":100},[46,2155,417],{"class":135},[46,2157,244],{"class":75},[46,2159,2160],{"class":48,"line":1715},[46,2161,425],{"class":75},[46,2163,2164],{"class":48,"line":1732},[46,2165,139],{"class":75},[46,2167,2168,2170,2172,2174,2176,2178],{"class":48,"line":1744},[46,2169,436],{"class":56},[46,2171,76],{"class":75},[46,2173,323],{"class":109},[46,2175,126],{"class":75},[46,2177,318],{"class":109},[46,2179,139],{"class":75},[46,2181,2182],{"class":48,"line":1757},[46,2183,91],{"emptyLinePlaceholder":90},[46,2185,2186,2188,2190],{"class":48,"line":1775},[46,2187,470],{"class":56},[46,2189,101],{"class":100},[46,2191,475],{"class":135},[46,2193,2194,2196,2198,2200,2202,2204,2206,2208,2210,2212,2214,2216,2218,2220,2222,2224,2226,2228,2230,2232,2234],{"class":48,"line":1788},[46,2195,480],{"class":56},[46,2197,101],{"class":100},[46,2199,104],{"class":56},[46,2201,76],{"class":75},[46,2203,489],{"class":109},[46,2205,126],{"class":75},[46,2207,494],{"class":129},[46,2209,101],{"class":100},[46,2211,126],{"class":75},[46,2213,501],{"class":109},[46,2215,76],{"class":75},[46,2217,507],{"class":506},[46,2219,510],{"class":100},[46,2221,513],{"class":135},[46,2223,162],{"class":75},[46,2225,200],{"class":109},[46,2227,76],{"class":75},[46,2229,522],{"class":506},[46,2231,510],{"class":100},[46,2233,513],{"class":135},[46,2235,529],{"class":75},[46,2237,2238,2240,2242,2244,2246,2248],{"class":48,"line":1805},[46,2239,501],{"class":56},[46,2241,76],{"class":75},[46,2243,323],{"class":109},[46,2245,126],{"class":75},[46,2247,542],{"class":109},[46,2249,139],{"class":75},[46,2251,2252],{"class":48,"line":1810},[46,2253,91],{"emptyLinePlaceholder":90},[46,2255,2256,2258,2260],{"class":48,"line":1859},[46,2257,553],{"class":56},[46,2259,101],{"class":100},[46,2261,558],{"class":135},[46,2263,2265,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287],{"class":48,"line":2264},33,[46,2266,692],{"class":56},[46,2268,101],{"class":100},[46,2270,104],{"class":56},[46,2272,76],{"class":75},[46,2274,701],{"class":109},[46,2276,126],{"class":75},[46,2278,706],{"class":129},[46,2280,101],{"class":100},[46,2282,235],{"class":234},[46,2284,713],{"class":238},[46,2286,235],{"class":234},[46,2288,139],{"class":75},[46,2290,2292,2294,2296,2298,2300,2302,2304,2306,2308,2310],{"class":48,"line":2291},34,[46,2293,722],{"class":56},[46,2295,101],{"class":100},[46,2297,104],{"class":56},[46,2299,76],{"class":75},[46,2301,731],{"class":109},[46,2303,126],{"class":75},[46,2305,736],{"class":135},[46,2307,162],{"class":75},[46,2309,623],{"class":135},[46,2311,139],{"class":75},[46,2313,2315,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2337,2339,2341],{"class":48,"line":2314},35,[46,2316,630],{"class":56},[46,2318,101],{"class":100},[46,2320,104],{"class":56},[46,2322,76],{"class":75},[46,2324,639],{"class":109},[46,2326,126],{"class":75},[46,2328,235],{"class":234},[46,2330,646],{"class":238},[46,2332,235],{"class":234},[46,2334,162],{"class":75},[46,2336,653],{"class":129},[46,2338,101],{"class":100},[46,2340,658],{"class":109},[46,2342,139],{"class":75},[46,2344,2346,2348,2350],{"class":48,"line":2345},36,[46,2347,563],{"class":56},[46,2349,101],{"class":100},[46,2351,568],{"class":135},[46,2353,2355,2357,2359,2361,2363,2365,2367,2369,2371],{"class":48,"line":2354},37,[46,2356,573],{"class":56},[46,2358,101],{"class":100},[46,2360,200],{"class":56},[46,2362,76],{"class":75},[46,2364,507],{"class":506},[46,2366,510],{"class":100},[46,2368,513],{"class":135},[46,2370,588],{"class":100},[46,2372,591],{"class":56},[46,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392,2394,2396,2398,2400],{"class":48,"line":2375},38,[46,2377,596],{"class":56},[46,2379,101],{"class":100},[46,2381,601],{"class":75},[46,2383,573],{"class":56},[46,2385,606],{"class":100},[46,2387,609],{"class":56},[46,2389,612],{"class":75},[46,2391,510],{"class":100},[46,2393,601],{"class":75},[46,2395,553],{"class":56},[46,2397,606],{"class":100},[46,2399,623],{"class":135},[46,2401,139],{"class":75},[46,2403,2405,2407,2409,2411,2413,2415,2417,2419,2421,2423,2425,2427,2429],{"class":48,"line":2404},39,[46,2406,1078],{"class":56},[46,2408,101],{"class":100},[46,2410,601],{"class":75},[46,2412,361],{"class":135},[46,2414,162],{"class":75},[46,2416,1089],{"class":135},[46,2418,162],{"class":75},[46,2420,1094],{"class":135},[46,2422,162],{"class":75},[46,2424,1099],{"class":135},[46,2426,162],{"class":75},[46,2428,831],{"class":135},[46,2430,139],{"class":75},[46,2432,2434,2436,2438,2440,2442],{"class":48,"line":2433},40,[46,2435,1401],{"class":56},[46,2437,101],{"class":100},[46,2439,1406],{"class":234},[46,2441,1409],{"class":238},[46,2443,1412],{"class":234},[46,2445,2447],{"class":48,"line":2446},41,[46,2448,91],{"emptyLinePlaceholder":90},[46,2450,2452,2454,2456,2458,2460,2462,2464,2466,2468],{"class":48,"line":2451},42,[46,2453,1135],{"class":52},[46,2455,1423],{"class":56},[46,2457,162],{"class":75},[46,2459,1428],{"class":56},[46,2461,1141],{"class":52},[46,2463,1434],{"class":1433},[46,2465,126],{"class":75},[46,2467,1439],{"class":109},[46,2469,1442],{"class":75},[46,2471,2473,2475,2477,2479,2481,2483,2485],{"class":48,"line":2472},43,[46,2474,1447],{"class":56},[46,2476,101],{"class":100},[46,2478,1452],{"class":56},[46,2480,606],{"class":100},[46,2482,1457],{"class":56},[46,2484,979],{"class":100},[46,2486,1462],{"class":56},[46,2488,2490,2492,2494,2496,2498,2500,2502,2504],{"class":48,"line":2489},44,[46,2491,1338],{"class":56},[46,2493,774],{"class":75},[46,2495,777],{"class":56},[46,2497,780],{"class":75},[46,2499,1119],{"class":788},[46,2501,1122],{"class":75},[46,2503,800],{"class":100},[46,2505,803],{"class":75},[46,2507,2509],{"class":48,"line":2508},45,[46,2510,91],{"emptyLinePlaceholder":90},[46,2512,2514,2516,2518,2520,2522],{"class":48,"line":2513},46,[46,2515,1480],{"class":52},[46,2517,1138],{"class":56},[46,2519,1141],{"class":52},[46,2521,1144],{"class":56},[46,2523,834],{"class":75},[46,2525,2527,2529,2531,2533,2535,2537,2539,2541,2543,2545,2547,2549],{"class":48,"line":2526},47,[46,2528,1298],{"class":56},[46,2530,774],{"class":75},[46,2532,777],{"class":56},[46,2534,780],{"class":75},[46,2536,783],{"class":56},[46,2538,780],{"class":75},[46,2540,789],{"class":788},[46,2542,162],{"class":75},[46,2544,794],{"class":788},[46,2546,797],{"class":75},[46,2548,800],{"class":100},[46,2550,803],{"class":75},[46,2552,2554,2556,2558],{"class":48,"line":2553},48,[46,2555,1325],{"class":56},[46,2557,101],{"class":100},[46,2559,817],{"class":135},[46,2561,2563,2565,2567,2569,2571],{"class":48,"line":2562},49,[46,2564,1510],{"class":52},[46,2566,825],{"class":56},[46,2568,828],{"class":100},[46,2570,831],{"class":135},[46,2572,834],{"class":75},[46,2574,2576,2578,2580,2582,2584,2586,2588,2590,2592,2594],{"class":48,"line":2575},50,[46,2577,1523],{"class":56},[46,2579,101],{"class":100},[46,2581,104],{"class":56},[46,2583,76],{"class":75},[46,2585,731],{"class":506},[46,2587,76],{"class":75},[46,2589,852],{"class":109},[46,2591,126],{"class":75},[46,2593,857],{"class":109},[46,2595,139],{"class":75},[46,2597,2599,2601,2603,2605,2607,2609,2611,2613,2615,2617,2619,2621],{"class":48,"line":2598},51,[46,2600,1546],{"class":56},[46,2602,101],{"class":100},[46,2604,104],{"class":56},[46,2606,76],{"class":75},[46,2608,731],{"class":506},[46,2610,76],{"class":75},[46,2612,852],{"class":109},[46,2614,126],{"class":75},[46,2616,812],{"class":109},[46,2618,883],{"class":100},[46,2620,886],{"class":109},[46,2622,139],{"class":75},[46,2624,2626,2628,2630,2632,2634,2636,2638,2640],{"class":48,"line":2625},52,[46,2627,1573],{"class":56},[46,2629,101],{"class":100},[46,2631,898],{"class":56},[46,2633,883],{"class":100},[46,2635,903],{"class":56},[46,2637,76],{"class":75},[46,2639,908],{"class":109},[46,2641,224],{"class":75},[46,2643,2645,2647,2649,2651],{"class":48,"line":2644},53,[46,2646,1592],{"class":109},[46,2648,76],{"class":75},[46,2650,920],{"class":506},[46,2652,244],{"class":75},[46,2654,2656,2658,2660,2662],{"class":48,"line":2655},54,[46,2657,1592],{"class":109},[46,2659,76],{"class":75},[46,2661,931],{"class":506},[46,2663,244],{"class":75},[46,2665,2667,2669,2671,2673],{"class":48,"line":2666},55,[46,2668,1613],{"class":129},[46,2670,101],{"class":100},[46,2672,943],{"class":135},[46,2674,244],{"class":75},[46,2676,2678,2680,2682,2684],{"class":48,"line":2677},56,[46,2679,1624],{"class":129},[46,2681,101],{"class":100},[46,2683,955],{"class":135},[46,2685,244],{"class":75},[46,2687,2689],{"class":48,"line":2688},57,[46,2690,1635],{"class":75},[46,2692,2694,2696,2698,2700,2702,2704,2706,2708,2710,2712,2714,2716],{"class":48,"line":2693},58,[46,2695,1640],{"class":56},[46,2697,76],{"class":75},[46,2699,323],{"class":109},[46,2701,973],{"class":75},[46,2703,976],{"class":109},[46,2705,979],{"class":100},[46,2707,982],{"class":109},[46,2709,883],{"class":100},[46,2711,987],{"class":109},[46,2713,990],{"class":75},[46,2715,993],{"class":506},[46,2717,139],{"class":75},[46,2719,2721,2723,2725],{"class":48,"line":2720},59,[46,2722,1667],{"class":56},[46,2724,1003],{"class":100},[46,2726,1006],{"class":135},[46,2728,2730],{"class":48,"line":2729},60,[46,2731,91],{"emptyLinePlaceholder":90},[46,2733,2735,2737,2739,2741,2743,2745,2747,2749,2751,2753,2755,2757,2759,2761],{"class":48,"line":2734},61,[46,2736,1681],{"class":56},[46,2738,76],{"class":75},[46,2740,323],{"class":109},[46,2742,126],{"class":75},[46,2744,1347],{"class":1022},[46,2746,235],{"class":238},[46,2748,1029],{"class":1028},[46,2750,48],{"class":109},[46,2752,126],{"class":75},[46,2754,771],{"class":109},[46,2756,612],{"class":75},[46,2758,1040],{"class":1028},[46,2760,1364],{"class":238},[46,2762,139],{"class":75},[46,2764,2766],{"class":48,"line":2765},62,[46,2767,91],{"emptyLinePlaceholder":90},[46,2769,2771,2773,2775,2777,2779,2781],{"class":48,"line":2770},63,[46,2772,1718],{"class":56},[46,2774,101],{"class":100},[46,2776,104],{"class":56},[46,2778,76],{"class":75},[46,2780,1727],{"class":109},[46,2782,224],{"class":75},[46,2784,2786,2788,2790,2792],{"class":48,"line":2785},64,[46,2787,1681],{"class":109},[46,2789,780],{"class":75},[46,2791,361],{"class":135},[46,2793,1741],{"class":75},[46,2795,2797,2799,2801,2803],{"class":48,"line":2796},65,[46,2798,1747],{"class":129},[46,2800,101],{"class":100},[46,2802,1752],{"class":135},[46,2804,244],{"class":75},[46,2806,2808,2810,2812,2814,2816,2818],{"class":48,"line":2807},66,[46,2809,1760],{"class":129},[46,2811,101],{"class":100},[46,2813,1765],{"class":109},[46,2815,76],{"class":75},[46,2817,1770],{"class":506},[46,2819,244],{"class":75},[46,2821,2823,2825,2827,2829],{"class":48,"line":2822},67,[46,2824,1778],{"class":129},[46,2826,101],{"class":100},[46,2828,1783],{"class":109},[46,2830,244],{"class":75},[46,2832,2834,2836,2838,2840,2842,2844],{"class":48,"line":2833},68,[46,2835,1791],{"class":129},[46,2837,101],{"class":100},[46,2839,235],{"class":234},[46,2841,1798],{"class":238},[46,2843,235],{"class":234},[46,2845,244],{"class":75},[46,2847,2849],{"class":48,"line":2848},69,[46,2850,425],{"class":75},[46,2852,2854,2856,2858,2860,2862,2864,2866,2868,2870,2872,2874,2876,2878,2880,2882,2884,2886,2888,2890,2892],{"class":48,"line":2853},70,[46,2855,1813],{"class":56},[46,2857,76],{"class":75},[46,2859,323],{"class":109},[46,2861,126],{"class":75},[46,2863,1822],{"class":109},[46,2865,76],{"class":75},[46,2867,1827],{"class":109},[46,2869,126],{"class":75},[46,2871,235],{"class":234},[46,2873,1390],{"class":238},[46,2875,235],{"class":234},[46,2877,162],{"class":75},[46,2879,1840],{"class":129},[46,2881,101],{"class":100},[46,2883,1110],{"class":109},[46,2885,162],{"class":75},[46,2887,1849],{"class":129},[46,2889,101],{"class":100},[46,2891,1854],{"class":109},[46,2893,529],{"class":75},[46,2895,2897,2899,2901,2903,2905,2907],{"class":48,"line":2896},71,[46,2898,1862],{"class":56},[46,2900,76],{"class":75},[46,2902,323],{"class":109},[46,2904,126],{"class":75},[46,2906,1871],{"class":109},[46,2908,139],{"class":75},[46,2910,2912],{"class":48,"line":2911},72,[46,2913,91],{"emptyLinePlaceholder":90},[46,2915,2917,2919,2921,2924,2926,2928,2931,2933],{"class":48,"line":2916},73,[46,2918,501],{"class":56},[46,2920,76],{"class":75},[46,2922,2923],{"class":109},"save",[46,2925,126],{"class":75},[46,2927,235],{"class":234},[46,2929,2930],{"class":238},"polar_noise.svg",[46,2932,235],{"class":234},[46,2934,139],{"class":75},[2936,2937],"svg-preview",{"alt":2938,"src":2939},"Layered animated polar contours shaped by two-dimensional simplex noise.","\u002Fshowcase\u002Fpolar_noise.svg",[2941,2942,2943],"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 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 .sNpir, html code.shiki .sNpir{--shiki-light:#F76D47;--shiki-default:#023B95;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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 .sm80-, html code.shiki .sm80-{--shiki-light:#E53935;--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 .sfdCM, html code.shiki .sfdCM{--shiki-light:#9C3EDA;--shiki-default:#A0111F;--shiki-dark:#F97583}html pre.shiki code .smmm7, html code.shiki .smmm7{--shiki-light:#F76D47;--shiki-default:#A0111F;--shiki-dark:#79B8FF}html pre.shiki code .sBTIf, html code.shiki .sBTIf{--shiki-light:#6182B8;--shiki-default:#023B95;--shiki-dark:#79B8FF}",{"title":42,"searchDepth":87,"depth":87,"links":2945},[2946,2947,2948,2949,2950,2951,2952],{"id":23,"depth":66,"text":24},{"id":173,"depth":66,"text":174},{"id":452,"depth":66,"text":453},{"id":670,"depth":66,"text":671},{"id":1064,"depth":66,"text":1065},{"id":1379,"depth":66,"text":1380},{"id":1879,"depth":66,"text":1880},"Build layered animated SVG waves from polar vectors, simplex noise, generated colors, filters, and path morphing.","md",{"category":2956},"tutorials",{"title":2958},"Polar noise","\u002Ftutorials\u002Fpolar-noise",{"title":5,"description":2953},"tutorials\u002Fpolar-noise","IyJaoKQcbgVuSEyvzQMfd1z5f3Esqy4mwzcFZJesNLs",null,1781452408241]