GIFsmos V

GIFsmos V is a web app for creating vector animations from Desmos graphs.

https://jpanneton.dev/gifsmos-v

Demo

Loading (989 KB)	Tesseract (6.04 MB)	Phase (679 KB)

Note: each animation above is 2.4s long and has 80 frames (~33 FPS).

How it works

As opposed to GIFsmos, GIFsmos V is using the SVG screenshot format from the Desmos API to capture frames. Then, instead of using gifshot to assemble a GIF from the captured PNG frames, each SVG gets pre-processed and assembled using a JavaScript version of svgasm. Here are the detailed steps:

1. Capture SVG screenshots of the graph using the Desmos API
2. Remove the first <rect> element from each SVG (background node)
3. Optimize each SVG using svgo
4. Create a new output SVG containing each input frame as groups (<g>) identified by unique IDs
5. Add a viewBox attribute to the output SVG with the requested width and height
6. Embed a linear CSS animation that makes each frame visible one after the other using the provided time interval
7. Export the output SVG

Using GIFsmos V

Creating, importing and saving graphs

Start by making something dynamic and awesome in the Desmos graphing calculator! You can do that right inside of GIFsmos V, or you can import one of your saved graphs from desmos.com by pasting its URL into the expressions list in GIFsmos V, and it will be automatically imported for you.

Conversely, if you build something great in GIFsmos V that you want to save to your Desmos account, click "edit graph on Desmos" (at the bottom of the expressions list or the graph paper), and it will open a copy of your graph on desmos.com.

Note that you can disable the grid as well as the axes in Desmos' settings. This can be useful before capturing to streamline the generated animation and get a pure transparent background (without any grid or axes).

To learn more about using the graphing calculator to build cool stuff, check out the Learn Desmos resources.

Capturing snapshots

GIFsmos V generates your animated SVG from a list of snapshots taken from the graph paper. You can add a single frame to the list by clicking the camera button.

GIFsmos V also has a multi-capture mode that lets you generate multiple snapshots from a slider in the graphing calculator. Open the multi-capture panel and enter the relevant information in the input fields:

Option	Description
Slider Index	The index of the expression that contains the slider values you want to capture
Slider Min	The first slider value to capture
Slider Max	The last slider value to capture
Manual Step	Mode to manually control slider steps and frame interval
Slider Step	How much to increment the slider in-between captures (controls the smoothness of the animation)
Interval	How much time to wait in-between captures in ms (controls the speed of the animation)
Auto Step	Mode to automatically calculate slider steps and frame interval based on target animation FPS and duration
Target FPS	Target animation FPS
Duration	Target animation duration in ms
Ease Slope	Slider step ease factor (default = linear)
Ease Pos	Slider step ease timing (default = center)

Finally, click the "Capture" button, and GIFsmos V will automatically capture one snapshot for each slider value defined by the min, max, and step.

Previewing

Click the preview button to open the preview panel. You can preview your future SVG animation either by scrubbing through the snapshots with the slider, or by clicking the play/pause button on the preview image. The animation will run at (roughly) a speed determined by the "Interval" option in the burst panel, so it will give you a good idea of what the final SVG animation will look like.

Adjusting image settings

Click the settings button to open the settings panel. There you can set the desired image dimensions which will affect how the elements are scaled within the graph (applies to both the captured snapshots and the final SVG animation), as well as the viewport computing strategy.

If the "Oversample" option is checked, images will be captured at double the resolution without changing the nominal viewport dimensions. For instance, an oversampled 300x300 image will actually result in a 600x600 image. Note that this setting may not be as useful when exporting SVG animations, since they are naturally vectorial and may be resized losslessly anyway.

Generating and downloading a SVG

Inside the preview panel, once you're happy with the results, click the "Download SVG" button to generate your final image and save it to your browser's default download location (named gifsmos.svg). Note that a single frame will be exported in standard SVG (no animation).

Generating and downloading a MOV

You can also click on "Download MOV" to download a rasterized version of the SVG animation in transparent video format. The generated file is in MOV format (QuickTime) and is encoded using the PNG codec. This feature is useful if you want to embed the animation in a video (e.g. for YouTube) using a video editing software. Unlike the original GIFsmos, background transparency is preserved. Note that a single frame will be exported in PNG (image format). Also, processing time may be quite long, since it's using ffmpeg.wasm in single-threaded mode under the hood (for browser compatibility).

Developer quick-start

1. Install Node.
2. Clone the repo.
3. cd into the project root.
4. Run npm install to install project dependencies.
5. Run npm start to start the development server on http://localhost:3000/.

To run the test suite:

npm test

To build a static version of the app:

npm run build

Image credits

The sidebar icons in GIFsmos V are from the "World Wide Web" collection created by Dara Ullrich. It can be found here on The Noun Project.