Displaying 1 to 7 from 7 results

termtosvg - Record terminal sessions as SVG animations

  •    Python

termtosvg is a Unix terminal recorder written in Python that renders your command line sessions as standalone SVG animations.

jquery-drawsvg - Lightweight, simple to use jQuery plugin to animate SVG paths

  •    Javascript

This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. Look at the demos for more advanced usages.

nuxt-type - Small demo showing custom page animations with a fake typography site

  •    Vue

Small demo showing custom page animations in Vue 2 with a fake typography site, currently using a custom build of Nuxt, pre 1.0.0beta release. Using GreenSock for the animations, including SplitText. Nuxt.js is a framework for creating Universal Vue.js Applications. It presets all the configuration needed to make your development of a Vue.js Application Server Rendered more enjoyable.

progress-bar-animation - Making a Doughnut Progress Bar - research notes

  •    Javascript

Looking through the different CSS pie chart implementations I decided that CSS is not fitted for the job. All solutions were hacks that would be hard to control. I was also worried that it will be cumbersome to make it work on all the browsers that we support. Canvas, with almost universal support, seemed more appealing. However, canvas would require me to implement timing (e.g. easing functions) and scaling (to support higher dpis) myself. Besides, I though that it would not utilize GPU as well as CSS transitions/transforms. SVG seemed like the best of both worlds: it's universally supported, doesn't need any hacks to create a required shape, utilizes CSS transitions to create animations and fits all screen dpis out of the box. So, I dusted off my SVG knowledge and started coding. Happy with the result, I sprinkled it with some CSS magic and made a short video showing it in action.

svg-workshop - Starter Materials for Advanced SVG Workshop

  •    HTML

This repo houses the materials and resources for the Building and Animating SVGs Animation Workshop. Most of the materials for the course are outlined below, but there are also directories housed here of very basic examples of some of the techniques we will cover so that students don't have to spend a lot of time researching in order to get started. It is recommended that students use CodePen to create work for the duration of the course, as we'll use preprocessors like SCSS as well as Babel for ES6 and codepen makes it easy to do so without time devoted to setup. If you like, you can also scroll to the CodePen collection section and fork one of the existing pens in those collections, they are comprehensive. GreenSock pens in the collection use member's only plugins that are CodePen-safe. For MorphSVG, DrawSVG, and FindShapeIndex sections, localhost will fail and using CodePen is recommended. For sections covering React-Motion, it may make more sense to use Create-React-App so that your workflow more closely mirrors development, but that decision is up to you.

drawing_animation - A Flutter library for gradually painting SVG path objects on canvas (drawing line animation)

  •    Dart

The rendering library exposes a central widget called AnimatedDrawing which allows to render SVG paths (via AnimatedDrawing.svg) or Flutter Path objects (via AnimatedDrawing.paths) in a drawing like fashion. By default every animation repeats infinitely. For running an animation only once you can use a callback to set run to false after the first animation cycle completed (see field onFinish).