I'm trying out some dynamic web page background generation using lines and text.
Take a look at my demo at http://74er.net/labs/lines.html (just focus on the yellow line).
It's a lame and inefficient method by literally creating a <span> element with 1 X 1 size and a yellow background with the X,Y position based on an ellispe formula.
My requirements is for the line creation are fairly simple (or rather straightforward):
- must be created at client-side and not a dynamic image generated by server scripts
- can be created based on a simple formula (circle, ellispe or just a straight line)
- can be contained in a DOM element (e.g. DIV so that I can layer it as a background)
- No HTML5 canvas technique (simply because it should be rendered on non-HTML5 compliant browsers)
- Not too taxing on the browser like my current implementation
There's not need for:
- really smooth curves (though that will be welcomed)
- dotted/dashed (I'll like that as well if feasible)
Based on the above, I am almost certain SVG (with Raphaël) is the way to go BUT I am put off by lack of native SVG support in some browsers.
I have looked at Walter Zorns library, and it is has some excellent performance tuning algorithms built-in. So it'll be my choice if I can't find a more creative implementation.
Let me know if you need further clarification.