Where are all the animated SVGs?

Re:Where are all the animated SVGs? by jazzyjackson on Tuesday February 11, 2020 @04:22PM (#22303010)

Back in 2013 the game magazine Polygon created really stunning illuminations in their Playstation 4 and Xbox One reviews. It's what got my interested in the more advanced uses of SVG and CSS -- it uses a clever trick where it uses the bezier curves as paths that are then filled in by offsetting the stroke fill... here it is.

  stroke-dasharray: 422px, 422px;
  stroke-dashoffset: 0px;
  fill: rgba(255, 255, 255, 0.333);

https://www.polygon.com/a/ps4-review/controller

https://www.polygon.com/a/xbox-one-review#console

[ Parent | on HN ]

Re:Where are all the animated SVGs? by type_enthusiast on Tuesday February 11, 2020 @04:31PM (#22303106)

Used this same trick (but with SMIL) for an automotive client back ca. 2004. They wanted their electrical systems' documentation diagrams to be in SVG, with signals being animated in a similar fashion. At the time the only viewer that supported it was Adobe's ActiveX plugin! (Not claiming credit for the trick; AFAIR I found it on a web forum somewhere... wish I remember who invented it)

[ Parent | on HN ]

Re:Where are all the animated SVGs? by neilduncan on Wednesday February 12, 2020 @09:56AM (#22309254)

There was a great blog post, explaining how the team did it.

https://product.voxmedia.com/2013/11/25/5426880/polygon-feat...

[ Parent | on HN ]

Re:Where are all the animated SVGs? by scarejunba on Tuesday February 11, 2020 @04:59PM (#22303367)

That is remarkable art. Thanks for sharing it!

[ Parent | on HN ]

Re:Where are all the animated SVGs? by notJim on Tuesday February 11, 2020 @07:09PM (#22304391)

Those graphics are gorgeous. So crisp!

[ Parent | on HN ]