Additional shapes

Inspired by SVG Basic Shapes I recommend to allow the following shapes in addition to xywh:

• rect=x,y,w,h(,rx,ry)?
• circle=cx,cy,r
• ellipse=cx,cy,rx,ry
• polygon=x1,y1(,x2,y2)*

BigBuckBunny.jpg#circle=175,55,40

Like for xywh also pixel and percent prefixes are allowed:

BigBuckBunny.jpg#ellipse=percent:50,52,15,22

IMHO there is no necessity for 'open shapes' so I skipped line and polyline. I would
favor this extensions to a single shape (as proposed by Olivier A.) extension because
it is simpler and such will most probably cause less confusion. The existing shape xywh=x,y,w,h
can be substituted to rect=x,y,w,h.

Transformation

Like the basic shapes I got inspired by SVG here. To keep it simple we allow only the
following transformation:

• translate=tx(,ty)?
• scale=sx(,sy)?
• rotate=a,(,cx,cy)?
• skew=ax(,ay)?

BigBuckBunny.jpg#rect=230,100,80,55&rotate=25

Transformation are only evaluated if one and just one shape exists. For transformation pixel and percent prefixes are supported, too.

Animate Transformation

Some kind of a mixture from Toms S. idea and SVG. To keep urls shorter we just use the prefix a + the transformation name:

• aTranslate=d1,tx1(,ty1)(;d2,tx2(,ty2))*
• aScale=d1,sx1(,sy1)?(;d2,sx2(,sy2)?)*
• aRotate=d1,a1,(,cx1,cy1)?(;d2,a2,(,cx2,cy2)?)*
• aSkew=d,ax1(,ay1)(;d,ax2(,ay2))*

BigBuckBunny.jpg#rect=140,30,65,55&aTranslate=500,-90,90

Click to start animation!

d is defined as duration as may be defined in percent (for videos) or milliseconds (for images). That allows
to define animations also for images. The percentage refers to a time fragment of a video or (if absent) the whole video.

big_buck_bunny.mp4#ellipse=330,100,50,80&aTranslate=0.45,0,0;0.1,-50,50&aScale=0.45,1;0.1,0.7&t=0.5,4