simple svg animations demo

[A Gloom]

import attached tiddler, open in edit mode, with preview window open experiment with element & animation attribute and see the effects in the preview window

with nesting animation elements in svg elements, animations can be done with Thomas' svg editor I do believe (but not sure, I hand coded the demo in a simple tiddler with preview window)

I forgot to add comment tag annotations identifying each element-- will have to do that when I'm back up

[A Gloom]

Revised- added black barckground so it can be seen as originally designed, the light colors used probably didn't display very weel on ppl's normal white backgrounds-- it's still isn't always remebered I operate my computer counter to how everyone does-- regardless, austere I stride on

new attachment has annotations identifying  elements and their animation

12 animated elements

animation of opacity (central gow), radius (shrinking circles), rotation animation (rings), motion animation along a path (orbiting orbs)

these are simple 2D animations to keep it simple, no z-axis so it doesn't have a 3D appearence

[Mohammad]

Cool job!
Why not to submit to Thomas SVG Live Editor!

It was siad, it will collect cool svgs to add to its library.

--Mohammad

[Thomas Elmiger]

A Gloom, that is a really, really nice example – thanks a lot!

It’s is simply amazing what you are capable of coding by hand.

As suggested, I have adopted (and adapted) it for my SVG editor, I hope that’s o.k. and I did not make too many mistakes. What I wanted to change:

- adapt to 128 x 128 canvas

- simplify code even more (.00 removed from numbers, common/redundant settings of several elements moved to superior new <g> element)

- coding style as in my other examples (istead of style="fill:..." I use fill="...)

Result:

https://tid.li/tw5/apps/svg.html#Animations%202:%5B%5BAnimations%202%5D%5D%20%5B%5BSVG%20Editor%5D%5D%20%5B%5BWelcome%20Player%20Two%5D%5D

Thanks again and all the best

Thomas

[A Gloom]

Thomas.

It’s is simply amazing what you are capable of coding by hand.

Ty, with programs and sites not working with my system theme, I often have to do it the old fashioned way-- and recent FF update has bypassed the system theme the browser is utilitizing so some sites have become unuseable again-- like Svg-edit online...

Your editor applies my system theme well, so it may be my go to when I desire to use an editor.

 

The animations I whipped up while I was adding animations to some of my maps and diagrams-- like an animated route on a map and a tutorial slide show

As suggested, I have adopted (and adapted) it for my SVG editor, I hope that’s o.k. and I did not make too many mistakes. What I wanted to change: 

No problem at all : )  Anything I post I post so others can use it (especially since I chosen to concentrate on my project and not try making plugins or wikis).  If I have anything else svg related I think will help you, I'll post it for your editor-- I have a whole sidebar tab of svg experiments in the WikiWitchery-- maybe a skull with glowing eyes that dims and flares? >> <<

 

- simplify code even more (.00 removed from numbers, common/redundant settings of several elements moved to superior new <g> element)

 

I went to check it out for any tricks for my bag of coding tricks : D  The original I left in longhand because I figured the code would be easier to understand (code streamlining can cofuse beginners)