Technically this is completely off topic as it doesn't use ODS or SAS/GRAPH, but I spent almost an hour doing it so I can't not post it now. Here's the same in JavaScript, using a slightly modified version of the original SAS code to create the SVG, and vivus.js to animate it:
The SAS code to generate the SVG looks like:
data _null_;
length shapeID $ 20. x 8 y 8;
gh = 40; * grid height ;
gw = 30; * grid width ;
file "/pub/ht/bunny/my.svg"; * target SVG location and write header ;
if _n_ eq 1 then
put '<svg width="' gw +(-1) '0" height="' gh +(-1) '0" viewBox="0 0 ' gh gw '" id="bunny">';
infile "/pub/programs/EB.txt" lrecl=1000 end=EOF; * File contains points to plot from math-aids.com;
input;
if _infile_=:'Shape' then do;
shapeID=_infile_;
if _n_ gt 1 then put '"/>'; * unless its the first element we will need to close last one ;
if shapeID in ('Shape 16' 'Shape 17' 'Shape 21' 'Shape 22'
'Shape 3' 'Shape 4' 'Shape 5' 'Shape 6'
'Shape 9' 'Shape 10' 'Shape 11' 'Shape 12') then
put '<polygon fill="none" stroke="#FF8A65" stroke-width="0.2" points="' @;
* if this is a polygon then it is a polygon, else it is a polyline ;
else put '<polyline fill="none" stroke="#FF8A65" stroke-width="0.2" points="' @;
end;
else do;
i=1;
do while(scan(_infile_, i, ' ')^='');
x=scan(_infile_, i, '(), ') + ((gw / 2));
put x +(-1) ',' @;
y=((gh / 2) - scan(_infile_, i+1, '(), '));
put y @;
i+2;
output;
end;
end;
if EOF then put '"/></svg>';
run;
The Vivus JS constructor to animate it looks like:
new Vivus('bunny', {
type: 'oneByOne',
duration: 800,
pathTimingFunction: Vivus.EASE_OUT,
});
If anyone wants to see the generated SVG or have a play around with the JavaScript code, the example is up on JsFiddle: http://jsfiddle.net/m3xswhnz/.
Hurray for long weekends.
Nik
... View more