Hacker News Reader

Comment by elwell | Hacker News Reader

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

Be sure to view page source.

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_Wi...

This subtraction game is particularly interesting: https://upload.wikimedia.org/wikipedia/commons/4/4d/Subtract...

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/)

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

On a similar tangent, you might find this interesting

https://mermaid-js.github.io/mermaid/#/

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.

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>

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.

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_navi...

[2] https://en.wikipedia.org/wiki/Template:POTD/2020-08-21

This seems noticeably snappier than canvas, too.

Oh gosh, now I'm going to go see how hard it would be to replicate the canvas API with programatic SVGs.

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).

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

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

Reply on news.ycombinator.com