4

I realize this sounds silly. Let me explain:

I just came across this page about using CSS elements to create shapes- square, circle, triangle, star, yin-yang (yin-yang!), etc. using pseudo elements.

Having struggled with HTML5 Canvas drawing in the past, I immediately thought that some combination of JavaScript and CSS pseudo-elements should be able to draw just about anything.

So I first googled "CSS Fractals". No dice. Then "JS Fractals". Some dice, but not what I was looking for.

Am I crazy, or is there potential here? jQuery can add and remove elements from the DOM by the thousands all day long. It seems to me that--given the existence of triangles via pure CSS--there is potential for a nice drawing mechanism (2D and 3D) sans Canvas.

Any thoughts, frameworks, tutorials, white papers, etc would be appreciated!

jonsca
  • 585
Matt Cashatt
  • 3,325

2 Answers2

2

Donatello

This is what I think you have been looking for.

Priyadarshi Kunal
  • 470
1

Donatello, as the above answer suggests, is a great answer, especially if you're looking for graphs. If you want to do more general drawing, Donatello is built on Raphael.js, and it's more generalized. Raphael can do most anything you want when it comes to 2-D (and even simulated 3-D) graphics. Everything from charts to 3-D shaded spheres... it's pretty much amazing. If you want to do fractals and more computationally complex imaging, you might want to look at specialized libs that utilize web workers, for instance Fractaljs.

The combination of HTML5 Canvas, CSS3, and JavaScript (especially jQuery) is definitely the answer. Finding the right tolls and frameworks on top of those technologies is the next step. The ones listed here are a great place to start.

Jason Lewis
  • 2,113