• Stars
    star
    154
  • Rank 242,095 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated almost 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An SVG animation API

Wilderness

An SVG animation API Β· https://wilderness.now.sh

gzip size test coverage travisci npm version

Summary

  • πŸŽ‰ Small file size (15.1kb minified + gzip)
  • 🌟 Simple, functional API
  • 🐣 Morph from anything, to anything
  • ⏱️ Queue multiple animations on a timeline
  • πŸš€ Powerful playback control

Hello world

import { shape, render, timeline, play } from 'wilderness'

const morph = shape(
  { el: document.querySelector('circle') },
  { el: document.querySelector('rect') },
)

const animation = timeline(morph, {
  iterations: Infinity,
  alternate: true
})

render(document.querySelector('svg'), animation)

play(animation)

Learn Wilderness Β· View examples

More Repositories

1

ghost-storage-adapter-s3

An AWS S3 storage adapter for Ghost
JavaScript
182
star
2

react-svg-chart

Animated SVG charts for React
JavaScript
110
star
3

svg-points

A specification for storing SVG shape data in Javascript, and some handy conversion functions
JavaScript
98
star
4

svg-tween

Animate between SVG shapes
JavaScript
79
star
5

svg-arc-to-cubic-bezier

A function that takes an SVG arc curve as input, and maps it to one or more cubic bezier curves
JavaScript
75
star
6

universal-js

A universal Javascript starter kit inc. React, Redux, Redux Dev Tools, Universal Redux Router, CSS Modules, hot module reloading, Babel for ES2015+ and ESLint
JavaScript
66
star
7

points

A specification for storing shape data in Javascript, and some handy manipulation functions
JavaScript
44
star
8

universal-redux-router

A router that turns URL params into first-class Redux state and runs action creators on navigation
JavaScript
22
star
9

wilderness-dom-node

A set of functions to convert between SVG DOM nodes, Plain Shape Objects and Frame Shapes
JavaScript
14
star
10

css-modules-universal-example

An example of how to set up CSS modules with Webpack
JavaScript
13
star
11

svg-shapes

Get point data from SVG shapes. Convert point data to an SVG path
JavaScript
10
star
12

tweening

A little tweening library
JavaScript
4
star
13

wilderness-core

The SVG animation engine behind Wilderness
JavaScript
4
star
14

package

A quick start JS package template
JavaScript
4
star
15

wilderness-react

A React API for building and animating SVG
3
star
16

wilderness-docs

Wilderness documentation
JavaScript
2
star
17

consent.js

A simple Javascript API to ask for and store consent
JavaScript
2
star
18

tweening-color-middleware

Color middleware for tweening
JavaScript
2
star
19

wordz

JavaScript
1
star
20

oaxaca-syntax-theme

A minimal syntax theme for Atom
CSS
1
star
21

yasmineawwad

JavaScript
1
star
22

docs

Front-end development documentation
1
star
23

hello-github-actions

1
star
24

goodidea

List and rank your ideas
Vue
1
star
25

meinke

Graham's website
HTML
1
star
26

colinmeinke

Personal website / playground
HTML
1
star
27

holmbank

Dad's website
JavaScript
1
star
28

tienda-docs

Documentation site for Tienda – an ecommerce plugin for Craft CMS
HTML
1
star
29

theyvoteforyou

They want you to vote for them. But do they vote for you?
HTML
1
star
30

postcss-calc-function

A PostCSS plugin to resolve the CSS calc function
JavaScript
1
star
31

taxyear

Svelte
1
star
32

stupid-add-function

A stupid add function to test package
JavaScript
1
star
33

craft-react

Craft for content. React for UI.
PHP
1
star
34

www-https-redirect

A simple express server for www > https redirects
JavaScript
1
star