4 ms·

I didn't know you could embed CSS animations in an SVG file. It's a thing of beauty: https://nyan-sat.com/assets/licensed/orbital_comparison.svg https://nyan-s

by elwell 6y ago

I didn't know you could embed CSS animations in an SVG file. It's a thing of beauty: https://nyan-sat.com/assets/licensed/orbital_comparison.svg https://nyan-sat.com/assets/licensed/orbital_comparison.svg Be sure to view page source.

sillysaurusx 6y ago
This seems noticeably snappier than canvas, too.
- codezero 6y ago
  Oh gosh, now I'm going to go see how hard it would be to replicate the canvas API with programatic SVGs.
- pierrec 6y ago
  It works smoothly for a smallish diagram like this, but that's as far as it goes. I attempted to create a 100% SVG music score editor and only realized my mistake after having put way too much work into it: working with large scores was sluggish to the point of making the whole thing useless. If you want snappy, I believe the best approach currently is to use a library that emulates the canvas API on WebGL (for example Pixi.js).
sci_prog 6y ago
Wow! Thanks for noticing this. It is brilliant! Now just gotta think of a project where I could use this ha!
joeraut 6y ago
Cool CSS animations aside, that diagram is fantastic! Edit: It also handles i18n for EN, FR and ES by displaying different titles and hyperlinks for different system languages. Jaw dropped.
- jb_s 6y ago
  How can you even do that? SVG is insane edit: like this: <title>Comparison of several satellite navigation system orbits</title> <switch> <desc systemLanguage="es">Comparación de las órbitas geoestacionaria, GPS, GLONASS, Galileo y BeiDou (satélites de órbita media), Estación Espacial Internacional, Telescopio Espacial Hubble, Constelación Iridium y órbita cementerio con los cinturones de radiación de Van Allen y el tamaño nominal de la tierra, ilustración de CMG Lee. Bitmap de la Tierra https://commons.wikimedia.org/wiki/File:North_pole_february_ice-pack_1978-2002.png by Geo Swan. La órbita de la Luna es cerca de 9 veces más grande (en radio y largo) que la órbita geoestacionaria. Esta animación se mueve a 1 hora por segundo. En el archivo SVG, se puede posicionar el mouse sobre una órbita o su nombre para resaltarla y hacer clic para ir a su respectivo articulo en la Wikipedia.</desc>
0000000000100 6y ago
The guy who made this seems to have done a lot of these SVG/CSS amalgomations. https://en.wikipedia.org/wiki/User:Cmglee/Dynamic_SVG_for_Wikimedia_projects https://en.wikipedia.org/wiki/User:Cmglee/Dynamic_SVG_for_Wi... This subtraction game is particularly interesting: https://upload.wikimedia.org/wikipedia/commons/4/4d/Subtraction_game_SMIL.svg https://upload.wikimedia.org/wikipedia/commons/4/4d/Subtract...
- yipbub 6y ago
  Interesting challenge! Solution: fgnegre jvaf, nyjnlf pubbfr crapvy orybatvat gb gur yrsg bs n zhygvcyr bs sbhe (jvgu crapvyf ahzorerq sebz bar gb gjragl bar) (Decipher with https://rot13.com/ https://rot13.com/)
Cyphase 6y ago
This animation[1] is going to be the picture of the day on the English Wikipedia on August 21st, 2020.[2] [1] https://en.wikipedia.org/wiki/File:Comparison_satellite_navigation_orbits.svg https://en.wikipedia.org/wiki/File:Comparison_satellite_navi... [2] https://en.wikipedia.org/wiki/Template:POTD/2020-08-21 https://en.wikipedia.org/wiki/Template:POTD/2020-08-21
Brajeshwar 6y ago
There was a recent story about free Vector Illustrations[1]. If I'm guessing it right, most of these SVGs are CSS animated, if not, it should be. So, my business-partner, friend, and co-founder is like 10x better than me in design and front-end. Around 2012-13, he showed me how to animate some diagrammatic illustration with SVG and CSS. That was when I realized how brilliant it is to code animations and was thus highly scalable and responsive. 1. https://www.pixeltrue.com/free-illustrations https://www.pixeltrue.com/free-illustrations
- m-p-3 6y ago
  On a similar tangent, you might find this interesting https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/
saagarjha 6y ago
SVG is great, it's sort of a simplified iframe in an img element. It's great for implementing crispy animations that you don't want to have to fiddle with the DOM for.
superkuh 6y ago
You can even embed and run javascript from within an svg, http://nowhere.superkuh.com/js.svg http://nowhere.superkuh.com/js.svg

by elwell 6y ago

sillysaurusx 6y ago

This seems noticeably snappier than canvas, too.

codezero 6y ago
Oh gosh, now I'm going to go see how hard it would be to replicate the canvas API with programatic SVGs.
pierrec 6y ago
It works smoothly for a smallish diagram like this, but that's as far as it goes. I attempted to create a 100% SVG music score editor and only realized my mistake after having put way too much work into it: working with large scores was sluggish to the point of making the whole thing useless. If you want snappy, I believe the best approach currently is to use a library that emulates the canvas API on WebGL (for example Pixi.js).

sci_prog 6y ago

Wow! Thanks for noticing this. It is brilliant! Now just gotta think of a project where I could use this ha!

joeraut 6y ago

Cool CSS animations aside, that diagram is fantastic! Edit: It also handles i18n for EN, FR and ES by displaying different titles and hyperlinks for different system languages. Jaw dropped.

jb_s 6y ago
How can you even do that? SVG is insane edit: like this: <title>Comparison of several satellite navigation system orbits</title> <switch> <desc systemLanguage="es">Comparación de las órbitas geoestacionaria, GPS, GLONASS, Galileo y BeiDou (satélites de órbita media), Estación Espacial Internacional, Telescopio Espacial Hubble, Constelación Iridium y órbita cementerio con los cinturones de radiación de Van Allen y el tamaño nominal de la tierra, ilustración de CMG Lee. Bitmap de la Tierra https://commons.wikimedia.org/wiki/File:North_pole_february_ice-pack_1978-2002.png by Geo Swan. La órbita de la Luna es cerca de 9 veces más grande (en radio y largo) que la órbita geoestacionaria. Esta animación se mueve a 1 hora por segundo. En el archivo SVG, se puede posicionar el mouse sobre una órbita o su nombre para resaltarla y hacer clic para ir a su respectivo articulo en la Wikipedia.</desc>

0000000000100 6y ago

The guy who made this seems to have done a lot of these SVG/CSS amalgomations. https://en.wikipedia.org/wiki/User:Cmglee/Dynamic_SVG_for_Wikimedia_projects https://en.wikipedia.org/wiki/User:Cmglee/Dynamic_SVG_for_Wi... This subtraction game is particularly interesting: https://upload.wikimedia.org/wikipedia/commons/4/4d/Subtraction_game_SMIL.svg https://upload.wikimedia.org/wikipedia/commons/4/4d/Subtract...

yipbub 6y ago
Interesting challenge! Solution: fgnegre jvaf, nyjnlf pubbfr crapvy orybatvat gb gur yrsg bs n zhygvcyr bs sbhe (jvgu crapvyf ahzorerq sebz bar gb gjragl bar) (Decipher with https://rot13.com/ https://rot13.com/)

Cyphase 6y ago

This animation[1] is going to be the picture of the day on the English Wikipedia on August 21st, 2020.[2] [1] https://en.wikipedia.org/wiki/File:Comparison_satellite_navigation_orbits.svg https://en.wikipedia.org/wiki/File:Comparison_satellite_navi... [2] https://en.wikipedia.org/wiki/Template:POTD/2020-08-21 https://en.wikipedia.org/wiki/Template:POTD/2020-08-21

Brajeshwar 6y ago

There was a recent story about free Vector Illustrations[1]. If I'm guessing it right, most of these SVGs are CSS animated, if not, it should be. So, my business-partner, friend, and co-founder is like 10x better than me in design and front-end. Around 2012-13, he showed me how to animate some diagrammatic illustration with SVG and CSS. That was when I realized how brilliant it is to code animations and was thus highly scalable and responsive. 1. https://www.pixeltrue.com/free-illustrations https://www.pixeltrue.com/free-illustrations

m-p-3 6y ago
On a similar tangent, you might find this interesting https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/

saagarjha 6y ago

SVG is great, it's sort of a simplified iframe in an img element. It's great for implementing crispy animations that you don't want to have to fiddle with the DOM for.

superkuh 6y ago

You can even embed and run javascript from within an svg, http://nowhere.superkuh.com/js.svg http://nowhere.superkuh.com/js.svg