Check out this, imvho, fairly cool css3 "fractal" animation I did...

C

Chris M. Thomasson

The CSS3 animation should render with webkit or mozilla. For some reason,
webkit seems to perform better. Anyway...



Here is _half_ of the fractal in motion:

http://webpages.charter.net/appcore/ctfractal.html



Here is the same half with different curve:

http://webpages.charter.net/appcore/ctfractal_s.html



Here is the fractal at max "distortion" or wave collapse/cancel I guess:

http://webpages.charter.net/appcore/ctfractal_ss.html



When I mention "half" of the fractal, I mean I would like to add a mirror
image. Imagine the static picture in the motionless fractal with a mirror
image partner. Will get that done when I get some more time.


Well, it seems when I put the other half in, it kind of looks like strands
of dna or something. Anyway, I did not expect the picture I get. It looks 3d
at moments but its totally stored in 2d. Keep in mind that the "motionless"
fractal is actually moving, but it cancels.





BTW, sorry for the sloppy html! ;^(


I need to refine this, and scale it up by a couple orders of magnitude.
 
D

dorayme

Chris M. Thomasson said:
The CSS3 animation should render with webkit or mozilla. For some reason,
webkit seems to perform better. Anyway...



Here is _half_ of the fractal in motion:

http://webpages.charter.net/appcore/ctfractal.html



Here is the same half with different curve:

http://webpages.charter.net/appcore/ctfractal_s.html



Here is the fractal at max "distortion" or wave collapse/cancel I guess:

http://webpages.charter.net/appcore/ctfractal_ss.html



When I mention "half" of the fractal, I mean I would like to add a mirror
image. Imagine the static picture in the motionless fractal with a mirror
image partner. Will get that done when I get some more time.


Well, it seems when I put the other half in, it kind of looks like strands
of dna or something. Anyway, I did not expect the picture I get. It looks 3d
at moments but its totally stored in 2d. Keep in mind that the "motionless"
fractal is actually moving, but it cancels.





BTW, sorry for the sloppy html! ;^(


I need to refine this, and scale it up by a couple orders of magnitude.

FF on my setup seems to struggle a little, you are right. It should
not be hard to attend to the HTML, use a doctype that does not put
your doc into quirks mode and a few other small matters.


btw, a sharper and more dramatic show comes with

..ccommon
{
width:90%;

Nice stuff to play with.
 
C

Chris M. Thomasson

"dorayme" wrote in message

Chris M. Thomasson said:
The CSS3 animation should render with webkit or mozilla. For some reason,
webkit seems to perform better. Anyway... [...]
I need to refine this, and scale it up by a couple orders of magnitude.
FF on my setup seems to struggle a little, you are right.

Yeah. The more I expand the fractal, the worse Mozilla seems to perform.
Humm...

It should
not be hard to attend to the HTML, use a doctype that does not put
your doc into quirks mode and a few other small matters.

100% Agreed.

btw, a sharper and more dramatic show comes with

.ccommon
{
width:90%;


Wow That looks pretty awesome! Thanks for that.

:^)

Nice stuff to play with.

Thanks again. I am trying to come up with a formula so that one can
infinitely fly through the fractal in motion. However, I will be forced to
use the canvas and javascript/requestAnimationFrame in order to accomplish
this task. Once I have the formula worked out, I think I have all I need to
automate the generation of an animated finite portion of the fractal in pure
CSS3 and HTML5.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top