1var circle = {
2    "center":{ "x":200, "y":200 },
3    "radius":100
4}
5
6var gradients = {
7    "grad1": { "cx":200, "cy":200, "r":300,
8        "stops": [
9            { "offset":0, "color": argb(76,0,0,255) },
10            { "offset":1, "color": argb( 0,0,0,255) }
11        ]
12    },
13    "grad2": { "cx":200, "cy":200, "r":300,
14        "stops": [
15            { "offset":0, "color": argb(76,0,255,0) },
16            { "offset":1, "color": argb( 0,0,255,0) }
17        ]
18    },
19    "grad3": { "cx":200, "cy":200, "r":300,
20        "stops": [
21            { "offset":0, "color": argb(76,255,0,0) },
22            { "offset":1, "color": argb( 0,255,0,0) }
23        ]
24    },
25    "grad4": { "cx":200, "cy":200, "r":300,
26        "stops": [
27            { "offset":0, "color": argb(76,192,63,192) },
28            { "offset":1, "color": argb( 0,192,63,192) }
29        ]
30    },
31    "grad5": { "cx":200, "cy":200, "r":300,
32        "stops": [
33            { "offset":0, "color": argb(76,127,127,0) },
34            { "offset":1, "color": argb( 0,127,127,0) }
35        ]
36    },
37    "grad6": { "cx":200, "cy":200, "r":300,
38        "stops": [
39            { "offset":0, "color": argb(76,127,0,127) },
40            { "offset":1, "color": argb( 0,127,0,127) }
41        ]
42    },
43    "grad7": { "cx":200, "cy":200, "r":300,
44        "stops": [
45            { "offset":0, "color": argb(76,0,127,127) },
46            { "offset":1, "color": argb( 0,0,127,127) }
47        ]
48    },
49    "grad8": { "cx":200, "cy":200, "r":300,
50        "stops": [
51            { "offset":0, "color": argb(76,63,192,63) },
52            { "offset":1, "color": argb( 0,63,192,63) }
53        ]
54    }
55};
56
57var paths = {
58    "cubicSegment1": [
59        { "cubic": [ 200,200, 200,200, 200,200, 200,200 ] }
60    ],
61    "cubicSegment2": [
62        { "cubic": [ 200,200, 250,200, 300,200, 300,100 ] }
63    ],
64    "curveSegment1": [
65        { "cubic": [ 200,200, 250,200, 300,150, 300,100 ] }
66    ],
67    "curveSegment2": [
68        { "cubic": [ 200,200, 250,200, 300,150, 200,100 ] }
69    ],
70    "curveSegment3": [
71        { "cubic": [ 200,200, 350,200, 250,-150, 170,300 ] }
72    ],
73    "diagSegment": [
74        { "line":  [ 200,200, 100,100 ] }
75    ],
76    "horzSegment": [
77        { "line":  [ 200,200, 341.4,200 ] }
78    ],
79    "lineSegment": [
80        { "line":  [ 200,200, 200 + circle.radius * Math.cos(-22.5 * Math.PI / 180),
81                              200 + circle.radius * Math.sin(-22.5 * Math.PI / 180) ] }
82    ],
83    "span1": [
84        { "quad":  [ 200,200, 300,300, 200,300 ] }
85    ],
86    "span2": [
87        { "cubic": [ 200,200, 100,300, 100,400, 200,300 ] }
88    ],
89    "span3": [
90        { "cubic": [ 200,200, 300,100, 100,400, 300,200 ] }
91    ],
92    "span4": [
93        { "quad":  [ 200,200, 300,300, 400,300 ] }
94    ],
95    "span5": [
96        { "quad":  [ 200,200, 280,320, 200,400 ] }
97    ],
98    "span6": [
99        { "quad":  [ 200,200, 60,340, 100,400 ] }
100    ],
101    "vertSegment": [
102        { "line":  [ 200,200, 200,341.4 ] }
103    ],
104    "wedge1": [
105        { "line":  [ 200,200, 500,500 ] },
106        { "arcTo": [ 375.74,624.36, 200,624.26, 424.26 ] },
107        { "close": null }
108    ],
109    "wedge2": [
110        { "line":  [ 200,200, 200,624.26 ] },
111        { "arcTo": [ 24.265,624.26, -100,500, 424.26 ] },
112        { "close": null }
113    ],
114    "wedge3": [
115        { "line":  [ 200,200, 500,-100 ] },
116        { "arcTo": [ 1138.22,537.70, 240,622.5, 424.26 ] },
117        { "close": null }
118    ],
119    "wedge4": [
120        { "line":  [ 200,200, 500,500 ] },
121        { "arcTo": [ 530.79,438.42, 579.47,389.74, 424.26 ] },
122        { "close": null }
123    ],
124    "wedge5": [
125        { "line":  [ 200,200, 389.74,579.47 ] },
126        { "arcTo": [ 284.94,563.441, 200,500, 424.26 ] },
127        { "close": null }
128    ],
129    "wedge6": [
130        { "line":  [ 200,200, 10.26,579.47 ] },
131        { "arcTo": [ -51.318,548.68, -100,500, 424.26 ] },
132        { "close": null }
133    ],
134    "wedgeXY1": [
135        { "line":  [ 200,200, 500,-100 ] },
136        { "arcTo": [ 624.26,24.265, 624.26,200, 424.26 ] },
137        { "close": null }
138    ],
139    "wedgeXY2": [
140        { "line":  [ 200,200, 200,-175.74 ] },
141        { "arcTo": [ 364.83,-196.61, 500,-100, 424.26 ] },
142        { "close": null }
143    ],
144    "wedgeXY3": [
145        { "line":  [ 200,200, -100,-100 ] },
146        { "arcTo": [ 35.170,-196.61, 200,-175.74, 424.26 ] },
147        { "close": null }
148    ],
149    "wedgeXY4": [
150        { "line":  [ 200,200, -175.74,200 ] },
151        { "arcTo": [ -196.61,35.170, -100,-100, 424.26 ] },
152        { "close": null }
153    ],
154    "wedgeXY5": [
155        { "line":  [ 200,200, -100,500 ] },
156        { "arcTo": [ -196.61,364.83, -175.74,200, 424.26 ] },
157        { "close": null }
158    ],
159    "wedgeXY6": [
160        { "line":  [ 200,200, -100,500 ] },
161        { "arcTo": [ 75.735,500, 200,624.26, 424.26 ] },
162        { "close": null }
163    ],
164    "wedgeXY7": [
165        { "line":  [ 200,200, 200,624.26 ] },
166        { "arcTo": [ 324.26,500, 500,500, 424.26 ] },
167        { "close": null }
168    ],
169    "wedgeXY8": [
170        { "line":  [ 200,200, 500,500 ] },
171        { "arcTo": [ 500,324.26, 624.26,200, 424.26 ] },
172        { "close": null }
173    ],
174    "xaxis": [
175        { "line":  [ 100,200, 300,200 ] }
176    ],
177    "yaxis": [
178        { "line":  [ 200,100, 200,300 ] }
179    ]
180};
181
182var text = {
183    "curve1d1": {
184        "string":"Some curves initially occupy", "x":400, "y":200
185    },
186    "curve1d2": {
187        "string":"one-dimensional sectors, then diverge.", "x":400, "y":240
188    },
189    "curveMultiple1": {
190        "string":"A curve span may cover more", "x":400, "y":200
191    },
192    "curveMultiple2": {
193        "string":"than one sector.", "x":400, "y":240
194    },
195    "line1DDest1": {
196        "string":"Some lines occupy one-dimensional", "x":400, "y":200
197    },
198    "line1DDest2": {
199        "string":"sectors.", "x":400, "y":240
200    },
201    "lineSingle": {
202        "string":"Line spans are contained by a single sector.", "x":400, "y":200
203    },
204    "sector1": {
205        "string":"A sector is a wedge of a circle", "x":400, "y":200
206    },
207    "sector2": {
208        "string":"containing a range of points.", "x":400, "y":240
209    },
210    "sectorXY1": {
211        "string":"X > 0   Y < 0   -Y < X", "x":500, "y":460
212    },
213    "sectorXY2": {
214        "string":"X > 0   Y < 0   -Y > X", "x":500, "y":460
215    },
216    "sectorXY3": {
217        "string":"X < 0   Y < 0    Y < X", "x":500, "y":460
218    },
219    "sectorXY4": {
220        "string":"X < 0   Y < 0    Y > X", "x":500, "y":460
221    },
222    "sectorXY5": {
223        "string":"X < 0   Y > 0   -Y > X", "x":500, "y":460
224    },
225    "sectorXY6": {
226        "string":"X < 0   Y > 0   -Y < X", "x":500, "y":460
227    },
228    "sectorXY7": {
229        "string":"X > 0   Y > 0    Y > X", "x":500, "y":460
230    },
231    "sectorXY8": {
232        "string":"X > 0   Y > 0    Y < X", "x":500, "y":460
233    },
234    "sectorXY9": {
235        "string":"X > 0   Y == 0", "x":500, "y":460
236    },
237    "sectorXY10": {
238        "string":"Y > 0   0 == X", "x":500, "y":460
239    },
240    "sectorXY11": {
241        "string":"X < 0   Y == X", "x":500, "y":460
242    },
243    "sectorXYA": {
244        "string":"X > 0   Y > 0    Y < X", "x":500, "y":310
245    },
246    "sectorXYB": {
247        "string":"X < 0   Y > 0   -Y < X", "x":500, "y":360
248    },
249    "sectorXYC": {
250        "string":"X < 0   Y < 0    Y < X", "x":500, "y":410
251    },
252    "spanWedge": {
253        "string":"All spans are contained by a wedge", "x":400, "y":200
254    },
255    "trivialWedge1": {
256        "string":"Wedges that don't overlap can be", "x":400, "y":200
257    },
258    "trivialWedge2": {
259        "string":"easily sorted.", "x":400, "y":240
260    },
261    "xaxis1": {
262        "string":"-X", "x":100, "y":220
263    },
264    "xaxis2": {
265        "string":"+X", "x":300, "y":220
266    },
267    "yaxis1": {
268        "string":"-Y", "x":205, "y":100
269    },
270    "yaxis2": {
271        "string":"+Y", "x":205, "y":300
272    }
273};
274
275var typefaces = {
276    "description": { "style":"normal", "family":"Helvetica,Arial" }
277};
278
279var paints = {
280    "axisStroke":    { "style":"stroke",   "color":rgb(191,191,191) },
281    "axisTextDesc":  { "paint":"textBase", "color":rgb(191,191,191) },
282    "axisTextRight": { "paint":"axisTextDesc", "textAlign":"right" },
283    "axisTextTop":   { "paint":"axisTextDesc", "textBaseline":"hanging" },
284    "diagSegment":   { "style":"stroke",    "color":rgb(127,63,127), "strokeWidth":2 },
285    "gradient1":     { "style":"fill",      "gradient":"gradients.grad1", "color":alpha(255) },
286    "gradient2":     { "paint":"gradient1", "gradient":"gradients.grad2" },
287    "gradient3":     { "paint":"gradient1", "gradient":"gradients.grad3" },
288    "gradient4":     { "paint":"gradient1", "gradient":"gradients.grad4" },
289    "gradient5":     { "paint":"gradient1", "gradient":"gradients.grad5" },
290    "gradient6":     { "paint":"gradient1", "gradient":"gradients.grad6" },
291    "gradient7":     { "paint":"gradient1", "gradient":"gradients.grad7" },
292    "gradient8":     { "paint":"gradient1", "gradient":"gradients.grad8" },
293    "horzSegment":   { "paint":"diagSegment", "color":rgb(192,92,31) },
294    "picture":       { "color":alpha(255) },
295    "sectorADesc":   { "paint":"textBase", "color":rgb(0,0,255) },
296    "sectorBDesc":   { "paint":"textBase", "color":rgb(0,127,0) },
297    "sectorCDesc":   { "paint":"textBase", "color":rgb(255,0,0) },
298    "sectorXY1":     { "paint":"textBase", "color":rgb(192,63,192) },
299    "sectorXY2":     { "paint":"textBase", "color":rgb(127,127,0) },
300    "sectorXY3":     { "paint":"textBase", "color":rgb(255,0,0) },
301    "sectorXY4":     { "paint":"textBase", "color":rgb(127,0,127) },
302    "sectorXY5":     { "paint":"textBase", "color":rgb(0,127,127) },
303    "sectorXY6":     { "paint":"textBase", "color":rgb(0,127,0) },
304    "sectorXY7":     { "paint":"textBase", "color":rgb(63,192,63) },
305    "sectorXY8":     { "paint":"textBase", "color":rgb(0,0,255) },
306    "sectorXY9":     { "paint":"textBase", "color":rgb(192,92,31) },
307    "sectorXY10":    { "paint":"textBase", "color":rgb(31,92,192) },
308    "sectorXY11":    { "paint":"textBase", "color":rgb(127,63,127) },
309
310    "stroke":        { "style":"stroke",   "color":rgb(0,0,0) },
311    "textBase":      { "style":"fill",     "color":rgb(0,0,0), "typeface":"description",
312            "textSize":"1.3rem" },
313    "vertSegment":   { "paint":"diagSegment", "color":rgb(31,92,192) },
314};
315
316var pictures = {
317     "curve1DDestText": [
318        { "draw":"text.curve1d1", "paint":"paints.textBase" },
319        { "draw":"text.curve1d2", "paint":"paints.textBase" }
320    ],
321     "curveMultipleText": [
322        { "draw":"text.curveMultiple1", "paint":"paints.textBase" },
323        { "draw":"text.curveMultiple2", "paint":"paints.textBase" }
324    ],
325    "line1DDestText": [
326        { "draw":"text.line1DDest1", "paint":"paints.textBase" },
327        { "draw":"text.line1DDest2", "paint":"paints.textBase" }
328    ],
329    "sectorXYA": [
330        { "draw":"text.sectorXYA", "paint":"paints.sectorADesc" },
331        { "draw":"paths.wedgeXY8", "paint":"paints.gradient1" }
332    ],
333    "sectorXYB": [
334        { "draw":"text.sectorXYB", "paint":"paints.sectorBDesc" },
335        { "draw":"paths.wedgeXY6", "paint":"paints.gradient2" }
336    ],
337    "sectorXYC": [
338        { "draw":"text.sectorXYC", "paint":"paints.sectorCDesc" },
339        { "draw":"paths.wedgeXY3", "paint":"paints.gradient3" }
340    ],
341    "sectorText": [
342        { "draw":"text.sector1", "paint":"paints.textBase" },
343        { "draw":"text.sector2", "paint":"paints.textBase" }
344    ],
345    "trivialWedgeSpans": [
346        { "draw":"paths.span4", "paint":"paints.stroke" },
347        { "draw":"paths.wedge4", "paint":"paints.gradient4" },
348        { "draw":"paths.span5", "paint":"paints.stroke" },
349        { "draw":"paths.wedge5", "paint":"paints.gradient5" },
350        { "draw":"paths.span6", "paint":"paints.stroke" },
351        { "draw":"paths.wedge6", "paint":"paints.gradient6" }
352    ],
353    "trivialWedgeText": [
354        { "draw":"text.trivialWedge1", "paint":"paints.textBase" },
355        { "draw":"text.trivialWedge2", "paint":"paints.textBase" }
356    ],
357    "xaxis": [
358        { "draw":"paths.xaxis", "paint":"paints.axisStroke" },
359        { "draw":"text.xaxis1", "paint":"paints.axisTextDesc" },
360        { "draw":"text.xaxis2", "paint":"paints.axisTextRight" }
361    ],
362    "yaxis": [
363        { "draw":"paths.yaxis", "paint":"paints.axisStroke" },
364        { "draw":"text.yaxis1", "paint":"paints.axisTextTop" },
365        { "draw":"text.yaxis2", "paint":"paints.axisTextDesc" }
366    ],
367    "axes": [
368        { "draw":"pictures.xaxis", "paint":"paints.picture" },
369        { "draw":"pictures.yaxis", "paint":"paints.picture" }
370    ]
371};
372
373var gradientLookup = [
374    0, 4, 5, 3, 6, 7, 2, 8, 1
375];
376
377var keyframes = {
378    "_default": [
379        { "actions": [
380            { "range":[0,255], "paint":"paints.picture", "target":"paint.color",
381                    "params":"target", "formula":"alpha(value, params)" }
382        ]}
383    ],
384    "keyframe1": [
385        { "time":   0, "duration":1000, "canvas":"clear", "actions": [
386            { "draw":"text.spanWedge", "paint":"paints.textBase" }
387        ]},
388        { "time":1000, "duration":1000, "actions": [
389            { "ref":"span1", "draw":"paths.span1", "paint":"paints.stroke" }
390        ]},
391        { "time":1500, "duration":1500, "actions": [
392            { "ref":"wedge1", "draw":"paths.wedge1", "paint":"paints.gradient1" }
393        ]},
394        { "time":3500, "duration": 500, "actions": [
395            { "ref":"span1", "range":[255,0] },
396            { "ref":"wedge1", "range":[255,0] }
397        ]},
398        { "time":4000, "duration":1000, "actions": [
399            { "ref":"span2", "draw":"paths.span2", "paint":"paints.stroke" }
400        ]},
401        { "time":4500, "duration":1500, "actions": [
402            { "ref":"wedge2", "draw":"paths.wedge2", "paint":"paints.gradient2" }
403        ]},
404        { "time":6500, "duration": 500, "actions": [
405            { "ref":"span2", "range":[255,0] },
406            { "ref":"wedge2", "range":[255,0] }
407        ]},
408        { "time":7000, "duration":1000, "actions": [
409            { "draw":"paths.span3", "paint":"paints.stroke" }
410        ]},
411        { "time":7500, "duration":1500, "actions": [
412            { "draw":"paths.wedge3", "paint":"paints.gradient3" }
413        ]}
414    ],
415    "keyframe2": [
416        { "time":   0, "duration":1000, "canvas":"clear", "actions": [
417            { "draw":"pictures.trivialWedgeText", "paint":"paints.picture" }
418        ]},
419        { "time":2000, "duration":1500, "actions": [
420            { "draw":"pictures.trivialWedgeSpans", "paint":"paints.picture" }
421        ]}
422    ],
423    "keyframe3": [
424        { "time":   0, "duration":1000, "canvas":"clear", "actions": [
425            { "draw":"pictures.sectorText" },
426            { "draw":"pictures.xaxis" }
427        ]},
428        { "time": 500, "duration":1000, "actions": [
429            { "draw":"pictures.yaxis" }
430        ]},
431        { "time":2000, "duration":1500, "actions": [
432            { "draw":"pictures.sectorXYA" }
433        ]},
434        { "time":3000, "duration":1500, "actions": [
435            { "draw":"pictures.sectorXYB" }
436        ]},
437        { "time":4000, "duration":1500, "actions": [
438            { "draw":"pictures.sectorXYC" }
439        ]}
440    ],
441    "keyframe4": [
442        { "time":   0, "duration":1000, "canvas":"clear", "actions": [
443            { "draw":"text.lineSingle", "paint":"paints.textBase" },
444            { "draw":"pictures.axes" }
445        ]},
446        { "time":1000, "duration":1000, "actions": [
447            { "ref":"line", "draw":"paths.lineSegment", "paint":"paints.stroke" }
448        ]},
449        { "time":1850, "duration":1000, "actions": [
450            { "ref":"sectorXY1", "draw":"text.sectorXY1", "paint":"paints.sectorXY1" },
451            { "ref":"sectorXY1", "target":"draw.y", "formula":260 },
452            { "ref":"wedgeXY1", "draw":"paths.wedgeXY1", "paint":"paints.gradient4" }
453        ]},
454        { "time":3000, "duration":4000, "actions": [
455            { "ref":"line", "target":"draw[0].line[2]",
456                "range":[-22.5 * Math.PI / 180, (-22.5 - 360) * Math.PI / 180], "params":"circle",
457                "formula":"params.center.x + params.radius * Math.cos(value)"
458            },
459            { "ref":"line", "target":"draw[0].line[3]",
460                "range":[-22.5 * Math.PI / 180, (-22.5 - 360) * Math.PI / 180], "params":"circle",
461                "formula":"params.center.y + params.radius * Math.sin(value)"
462            }
463        ]},
464        { "for":["i=2", "i<=8", "++i"], "time":"2250 + 500 * i", "duration":100, "actions": [
465            { "ref":"'sectorXY' + i", "draw":"'text.sectorXY' + i",
466                    "paint":"'paints.sectorXY' + i" },
467            { "ref":"'sectorXY' + i", "target":"draw.y", "formula":260 },
468            { "ref":"'wedgeXY' + i", "draw":"'paths.wedgeXY' + i",
469                    "paint":"'paints.gradient' + gradientLookup[i]" },
470            { "ref":"'sectorXY' + (i - 1)", "range":[255,0] },
471            { "ref":"'wedgeXY' + (i - 1)", "range":[255,0] }
472        ]},
473        { "time":2250 + 500 * 9, "duration":100, "actions": [
474            { "ref":"sectorXY1" },
475            { "ref":"wedgeXY1" },
476            { "ref":"sectorXY8", "range":[255,0] },
477            { "ref":"wedgeXY8", "range":[255,0] }
478        ]}
479    ],
480    "keyframe5": [
481        { "time":   0, "duration":1000, "canvas":"clear", "actions": [
482            { "draw":"pictures.curveMultipleText" },
483            { "draw":"pictures.axes" }
484        ]},
485        { "time":1000, "duration":1000, "actions": [
486            { "ref":"curve", "draw":"paths.curveSegment1", "paint":"paints.stroke" }
487        ]},
488        { "time":2000, "duration":1000, "actions": [
489            { "draw":"text.sectorXY1", "paint":"paints.sectorXY1",
490                    "target":"draw.y", "formula":260 + 1 * 25},
491            { "draw":"paths.wedgeXY1", "paint":"paints.gradient4" }
492        ]},
493        { "time":3000, "duration":1000, "actions": [
494            { "ref":"curve", "range":[0,1], "target":"draw",
495                "params":["paths.curveSegment1","paths.curveSegment2"],
496                "formula":"interp_paths(value, params)"
497            }
498        ]},
499        { "time":4000, "duration":1000, "actions": [
500            { "draw":"text.sectorXY2", "paint":"paints.sectorXY2",
501                    "target":"draw.y", "formula":260 + 2 * 25},
502            { "draw":"paths.wedgeXY2", "paint":"paints.gradient5" }
503        ]},
504        { "time":5000, "duration":1000, "actions": [
505            { "ref":"curve", "range":[0,1], "target":"draw",
506                "params":["paths.curveSegment2","paths.curveSegment3"],
507                "formula":"interp_paths(value, params)"
508            }
509        ]},
510        { "for":["i=3", "i<=6", "++i"], "time":"6000", "actions": [
511            { "ref":"'text' + i", "draw":"'text.sectorXY' + i", "paint":"'paints.sectorXY' + i",
512                    "target":"draw.y", "formula":"260 + i * 25" },
513        ]},
514        { "for":["i=3", "i<=6", "++i"], "time":"6000", "duration":1000, "actions": [
515            { "ref":"'text' + i" },
516        ]},
517        { "time":6000, "duration":1000, "actions": [
518            { "draw":"paths.wedgeXY3", "paint":"paints.gradient3" },
519            { "draw":"paths.wedgeXY4", "paint":"paints.gradient6" },
520            { "draw":"paths.wedgeXY5", "paint":"paints.gradient7" },
521            { "draw":"paths.wedgeXY6", "paint":"paints.gradient2" },
522        ]}
523    ],
524    "keyframe6": [
525        { "time":   0, "duration":1000, "canvas":"clear", "actions": [
526            { "draw":"pictures.line1DDestText" },
527            { "draw":"pictures.axes" }
528        ]},
529        { "time":2000, "duration":1000, "actions": [
530            { "ref":"xy9", "draw":"text.sectorXY9", "paint":"paints.sectorXY9" },
531            { "ref":"xy9", "target":"draw.y", "formula":260 + 25},
532            { "draw":"paths.horzSegment", "paint":"paints.horzSegment" }
533        ]},
534        { "time":3000, "duration":1000, "actions": [
535            { "ref":"xy10", "draw":"text.sectorXY10", "paint":"paints.sectorXY10" },
536            { "ref":"xy10", "target":"draw.y", "formula":260 + 50 },
537            { "draw":"paths.vertSegment", "paint":"paints.vertSegment" }
538        ]},
539        { "time":4000, "duration":1000, "actions": [
540            { "ref":"xy11", "draw":"text.sectorXY11", "paint":"paints.sectorXY11" },
541            { "ref":"xy11", "target":"draw.y", "formula":260 + 75 },
542            { "draw":"paths.diagSegment", "paint":"paints.diagSegment" }
543        ]}
544    ],
545    "keyframe7": [
546        { "time":   0, "duration":1000, "canvas":"clear", "actions": [
547            { "draw":"pictures.curve1DDestText" },
548            { "draw":"pictures.axes" }
549        ]},
550        { "time":2000, "duration":1000, "actions": [
551            { "ref":"cubic", "draw":"paths.cubicSegment1", "paint":"paints.stroke" },
552            { "ref":"cubic", "range":[0,1], "target":"draw",
553                "params":"paths.cubicSegment2", "formula":"path_partial(value, params)" },
554            { "ref":"xy9", "draw":"text.sectorXY9", "paint":"paints.sectorXY9" },
555            { "ref":"xy9", "target":"draw.y", "formula":260 + 25},
556            { "draw":"paths.horzSegment", "paint":"paints.horzSegment" }
557        ]},
558        { "time":3000, "duration":1000, "actions": [
559            { "ref":"xy1", "draw":"text.sectorXY1", "paint":"paints.sectorXY1" },
560            { "ref":"xy1", "target":"draw.y", "formula":260 + 60},
561            { "draw":"paths.wedgeXY1", "paint":"paints.gradient4" }
562        ]},
563    ]
564};
565