bounty - Javascript and SVG odometer effect library with motion blur

  •        21

JavaScript odometer or slot machine effect library for smoothly transitioning numbers with motion blur. Library uses functional approach and ES7 Function Bind Syntax. Internally based on SVG. See the live version.



Related Projects

Macaw - Powerful and easy-to-use vector graphics Swift library with SVG support

  •    Swift

Macaw is a powerful and easy-to-use vector graphics library written in Swift. Modern designs contain tons of illustrations and complex animations. Mobile developers have to spend a lot of time on converting designs into native views that will be resizable for different screens. With Macaw you can reduce development time to a minimum and describe all graphics in high level scene elements. Or even render SVG graphics right from your design tool with Macaw events and animation support.

macSVG - macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ---

  •    Objective-C

May 8, 2018 – macSVG v1.1.4 is released, with minor user interface improvements, and various bug fixes. See the Release Notes for details. macSVG is a MIT-licensed open-source macOS app for designing HTML5 SVG 1.1 (Scalable Vector Graphics) art and animation.

SVGInjector - Fast, caching, dynamic inline SVG DOM injection library

  •    Javascript

A fast, caching, dynamic inline SVG DOM injection library. Developed by Waybury for use in iconic.js, part of the Iconic icon system. There are a number of ways to use SVG on a page (object, embed, iframe, img, CSS background-image) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM.

odometer - Smoothly transitions numbers with ease. #hubspot-open-source

  •    CSS

Odometer is a Javascript and CSS library for smoothly transitioning numbers.

vivus - JavaScript library to make drawing animation on SVG

  •    Javascript

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. Try Vivus with your SVG on Vivus Instant. If you plan to use the library to animate a single SVG without callback or controls, this will allow you to download your animated SVG, powered by CSS, JavaScript free.

ticker - An Android text view with scrolling text change animation

  •    Java

There are some breaking API changes introduced in ticker 2.0. Please refer to the 2.0 migration doc. Ticker is a simple Android UI component for displaying scrolling text. Think about how an odometer scrolls when going from one number to the next, that is similar to what Ticker does. The Ticker handles smooth animations between strings and also string resizing (e.g. animate from "9999" to "10000").

anime - JavaScript Animation Engine

  •    Javascript

Anime (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects. The targets property defines the elements or JS Objects to animate.

GreenSock-JS - GreenSock's GSAP JavaScript animation library (including Draggable).

  •    Javascript

GSAP is a JavaScript library for creating high-performance animations that work in every major browser. No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems on over 4 million sites. GSAP works around countless browser inconsistencies; your animations 'just work'. CSS properties, SVG, canvas libraries, custom properties of generic objects, colors, strings...animate anything! At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See the "Why GSAP?" article for what makes GSAP so special. Unlike monolithic frameworks that dictate how you structure your apps, GSAP is completely flexible; sprinkle it wherever you want. React, Vue, Angular or vanilla JS - doesn't matter. Simply put, GSAP is the most robust high-performance animation library on the planet, which is probably why every major ad network excludes it from file size calculations.

Element - Programmatic UI for macOS

  •    Swift

Programmatic UI Framework for macOS. Swift handles app logic, CSS/SVG handles design and JSON handles struture.

GraphicsJS - A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology

  •    Javascript

GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.GraphicsJS is a JavaScript graphics library that allows you to draw absolutely anything, including any sort of interactive and animated graphics with any visual effects.

postcss-write-svg - Write SVGs directly in CSS

  •    Javascript

Write SVG lets you write SVGs directly in CSS. @svg at-rules generate SVG elements available to CSS. Within an @svg, descendant at-rules (like @rect) are interpreted as elements, while declarations (like width) are interpreted as attributes.

rough - Create graphics with a hand-drawn, sketchy, appearance

  •    Javascript

Rough.js is a light weight (~9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG.

php-svg-lib - SVG file parsing / rendering library

  •    PHP

The main purpose of this lib is to rasterize SVG to a surface which can be an image or a PDF for example, through a \Svg\Surface PHP interface. This project was initialized by the need to render SVG documents inside PDF files for the DomPdf project.

js-code-to-svg-flowchart - js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart

  •    Javascript

Why? While I've been working on Under-the-hood-ReactJS I spent enormous amount of time on creating schemes. Each change in code or flowchart affects all entire scheme instantly, forcing you to move and align 'broken pieces'. Just repeated manual work... Imagine a library which takes any JS code and generate SVG flowchart from it, works on client and server. Allows you easily adjust styles scheme for your context or demonstrate your code logic from different abstractions levels. Highlighting, destructing whole blocks, custom modifiers for your needs etc.

Hover - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on

  •    CSS

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS. Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.

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.

awesome-bug-bounty - A comprehensive curated list of available Bug Bounty & Disclosure Programs and Write-ups


A comprehensive curated list of Bug Bounty Programs and write-ups from the Bug Bounty hunters. To the extent possible under law, Dheeraj Joshi has waived all copyright and related or neighboring rights to this work.

Apache Batik - The Apache Foundation’s Java-based toolkit for SVG generation and manipulation

  •    Java

Batik is a Java based toolkit for applications which handle images in the Scalable Vector Graphics (SVG) format for various purposes, such as viewing, generation or manipulation. The project's ambition is to give developers a set of core modules which can be used together or individually to support specific SVG solutions. Examples of modules are an SVG parser, an SVG generator and an SVG DOM implementation.