Cool, Bruce! It almost seems paradoxical in the way it moves, reminding me a bit of those wooden winding toys.
Seems like we'll need a machinery collection somewhere now. Would you mind if I stuck this example (with credit, of course) on a page somewhere? It would be fun to build little components and then let people hook them together sorta like the motors in Phun (http://www.phunland.com/wiki/Home ) BTW the animation of the top thing could save the poor browser a bit of work using <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="60" begin="0s" dur="4s" repeatCount="indefinite" /> because of the sixfold symmetry. It seems like the browser might be happier having to only manage 4 seconds of animation (and then having that delightful instant of taking a breath) instead of 24 before starting over. The Reuleaux triangle (http://en.wikipedia.org/wiki/Reuleaux_triangle ) would be another instance. (Someone really should start lacing Wikipedia with SVG animation since the particular animation there is thoroughly icky. Starting with the entry on SVG would be a good start.) It is a good example of why re-inventing the wheel is sometimes a good planetary exercise: sometimes people get too stubborn. cheers David ----- Original Message ----- From: bruce To: svg-developers@yahoogroups.com Sent: Wednesday, October 13, 2010 3:08 PM Subject: [svg-developers] Re: fun but buggy -- gears David These are interesting examples. I will add another: <?xml version="1.0" standalone="no"?> <svg width="100%" height="100%" viewBox="-100 -150 200 300" xmlns="http://www.w3.org/2000/svg";> <g> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" begin="0s" dur="24s" repeatCount="indefinite" /> <circle cx="0" cy="0" r="100" fill="blue" /> <rect x="-10" y="-100" width="20" height="200" fill="gray" /> <rect x="-10" y="-100" width="20" height="200" fill="gray" transform="rotate(60)"/> <rect x="-10" y="-100" width="20" height="200" fill="gray" transform="rotate(120)"/> </g> <g transform="translate(0,45)"> <g> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" begin="0s" dur="12s" repeatCount="indefinite" /> <circle cx="0" cy="45" r="10" fill="red" /> <circle cx="0" cy="45" r="10" fill="red" transform="rotate(120)"/> <circle cx="0" cy="45" r="10" fill="red" transform="rotate(240)"/> <line x1="0" y1="0" x2="0" y2="45" stroke-width="6" stroke="black" stroke-linecap="round" /> <line x1="0" y1="0" x2="0" y2="45" stroke-width="6" stroke="black" stroke-linecap="round" transform="rotate(120)"/> <line x1="0" y1="0" x2="0" y2="45" stroke-width="6" stroke="black" stroke-linecap="round" transform="rotate(240)"/> </g> </g> </svg> This is a quick and dirty version of a roller gear. To see a physical picture of one see: http://lumberjocks.com/projects/23791 All browsers work fine except IE. I haven't tested it with ASV. Enjoy! --- In svg-developers@yahoogroups.com, "ddailey" <ddai...@...> wrote: > > Here are a couple of interesting examples / difficult browser calisthenics: > http://granite.sru.edu/~ddailey/svg/animoval3.svg > and > http://granite.sru.edu/~ddailey/svg/animoval4.svg > > The first works much as I think it should in Opera, Chrome and IE/ASV. FF4 runs only one of the gears. Safari screws up the stroke's gradient. IE/ASV, though and Opera/Chrome/Safari don't agree about the proper values for animating dashoffset.In IE/ASV, using values="0;24" and values="24;0" respectively for the two animations seems to line up the gear teeth well, whereas for the others I had to do values="12;36" and values="24;0" to keep the teeth from colliding. > > The second example seems to work well only in IE/ASV and Chrome -- a first for those two to team up in bettering Opera in my experience! ASV and both webkit browsers seem to get the outergear to spin. FF seems to see that there is something there, but stalls before it can make a go of it, and Opera for some odd reason seems to ignore that particular animation. > > Btw, I rather liked the slighty readjustment that ASV and webkit experience due to the circumference of the ellipse being irrational -- something like it might be expected, I think, in a physical model. > > At first I was annoyed that I couldn't get the gradient to extend out into the teeth, but then I remembered the r attribute of a radial gradient (.5 by default). I could have varied it but decided not to. > > It would be fun to make more complex machines sorta like this based on SMIL, but we'd have to figure out which browers are doing it right first I suppose. > > Do let me know if it is my code of the browsers that are goofy here. > > cheers > David > > > > [Non-text portions of this message have been removed] > [Non-text portions of this message have been removed] ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
