Reanimate: Haskell library for building declarative animations from SVG graphics

1. reanimate

   1 14 1,134 0.0 Haskell

   Haskell library for building declarative animations based on SVG graphics

   

   Is this the discussion you're referring to? https://github.com/reanimate/reanimate/discussions/210

   It's actually pretty interesting to read. The author makes a not totally unreasonable argument as for why it uses unsafePerformIO.

   Now what I'm really curious about is why the very first example on the site I clicked into the source code for, a simple 59-line example, is using unsafePerformIO. That actually worries me more because it suggests that as a user I might have to use unsafePerformIO. https://github.com/reanimate/reanimate/blob/d4d3898831edb4aa...

2. CodeRabbit

   coderabbit.ai featured

   CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

   

3. plot-create-react-app-example

   2 1 38 10.0 JavaScript

   An example of Observable Plot with Create React App

   

   Yeah, I wish this project had a React component backend.

   D3.js and Observable Plot don't work that well with modern reactive frontend frameworks either though. They don't diff the SVG tree. The recommended way to react to some data change is to rebuild the whole SVG in a useEffect [1], when in fact you could just have a reactive SVG tree [2]. You just have to unpack and recode what would D3 do (see the case about Axis in the last link). Using enter(), update() and exit() seems to no longer be the way to do things. Also, React components offers great composability to the programmer.

   I wish there was a maintained React version of Observable Plot; just like what React-Three-Fiber [3] does with Three.js. Or maybe a version of this Reanimate lib into a React component.

   [1] https://github.com/observablehq/plot-create-react-app-exampl...

   [2] https://wattenberger.com/blog/react-and-d3

   [3] https://github.com/pmndrs/react-three-fiber

4. plot-create-react-app-exampl

   3 1 - -

   Yeah, I wish this project had a React component backend.

   D3.js and Observable Plot don't work that well with modern reactive frontend frameworks either though. They don't diff the SVG tree. The recommended way to react to some data change is to rebuild the whole SVG in a useEffect [1], when in fact you could just have a reactive SVG tree [2]. You just have to unpack and recode what would D3 do (see the case about Axis in the last link). Using enter(), update() and exit() seems to no longer be the way to do things. Also, React components offers great composability to the programmer.

   I wish there was a maintained React version of Observable Plot; just like what React-Three-Fiber [3] does with Three.js. Or maybe a version of this Reanimate lib into a React component.

   [1] https://github.com/observablehq/plot-create-react-app-exampl...

   [2] https://wattenberger.com/blog/react-and-d3

   [3] https://github.com/pmndrs/react-three-fiber

5. react-three-fiber

   4 115 28,366 9.2 TypeScript

   🇨🇭 A React renderer for Three.js

   

   Yeah, I wish this project had a React component backend.

   D3.js and Observable Plot don't work that well with modern reactive frontend frameworks either though. They don't diff the SVG tree. The recommended way to react to some data change is to rebuild the whole SVG in a useEffect [1], when in fact you could just have a reactive SVG tree [2]. You just have to unpack and recode what would D3 do (see the case about Axis in the last link). Using enter(), update() and exit() seems to no longer be the way to do things. Also, React components offers great composability to the programmer.

   I wish there was a maintained React version of Observable Plot; just like what React-Three-Fiber [3] does with Three.js. Or maybe a version of this Reanimate lib into a React component.

   [1] https://github.com/observablehq/plot-create-react-app-exampl...

   [2] https://wattenberger.com/blog/react-and-d3

   [3] https://github.com/pmndrs/react-three-fiber

6. clumsy-graphics

   5 7 11 0.0 TypeScript

   a tool for rapidly developing animations where frames are described using svg elements à la react 🙃

   

   for those interested in a typescript / react alternative checkout https://github.com/clumsycomputer/clumsy-graphics

7. SaaSHub

   www.saashub.com featured

   SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

   

Suggest a related project