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
  • 3
  • 10
  • 28
Matt Cashatt
  • 3,315
  • 5
  • 24
  • 35
  • It seems like a large leap to go from hacky shapes with border tricks, to drawing, in plain CSS and JS. Canvas is just JS anyway... – sevenseacat Jan 06 '12 at 04:28
  • 1
    I can see why it would seem that way, and maybe I am completely wrong here, but the issue is gnawing at me a bit. I spend most of my time working with large datasets--not graphics--so I am very familiar with how quickly I can render various styled elements to the view with jQuery/CSS/JSON (for providing the data). This includes rounded corners, shadows, gradients, etc. So it just seems like rendering and interacting with graphics in this paradigm may be worth looking into. To what end? I dunno yet. . . – Matt Cashatt Jan 06 '12 at 04:35
  • If canvas is too client-side / scripty for you, maybe you want to have a look at svg? – tdammers Jan 06 '12 at 07:31

2 Answers2

2

Donatello

This is what I think you have been looking for.

Priyadarshi Kunal
  • 470
  • 2
  • 6
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
  • 13
  • 18
  • 1
    He did say sans canvas... but hey. – sevenseacat Jan 06 '12 at 09:27
  • @Karpie, oops! Looks like I missed the 'sans'. I got that he was frustrated with Canvas, but I thought that was due to the lack of suitable frameworks... it can be a beast dealing with it raw. Thanks for pointing that out... but hopefully Donatello and/or Raphael can use their ninja turtle powers to defeat his fear of Canvas ;-) – Jason Lewis Jan 06 '12 at 09:31
  • @JasonLewis- Thanks for your answer! I had to select Expressions answer because it fit a bit better to the question, but your points were well taken. I am going to give canvas another year or so to mature but I know I will be back. The thing is, I can't quite get the cross-browser support or dev knowledge I need to move forward with it on an enterprise app at the moment, though I know how strong it is. Thanks again! – Matt Cashatt Jan 06 '12 at 14:06
  • @MatthewPatrickCashatt "Cross-browser support for an enterprise app" is one of the most terrifying phrases in the English language. I feel your pain. The only thing that saves my sanity having to support IE is being allowed to require Chrome Frame. Best of luck. – Jason Lewis Jan 06 '12 at 15:39
  • @JasonLewis- Sadly, about half of my projects come from Microsoft, so Chrome Frame is a no-go :) :). – Matt Cashatt Jan 06 '12 at 15:44
  • Not sure if using Sass/SCSS to generate your CSS3 is an option for you, but there's some amazing graphical wizardry you can do with Sass functions, etc: http://sassymothereffingtextshadow.com/ – Jason Lewis Jan 06 '12 at 17:00