https://github.com/colinmeinke/wilderness

An SVG animation API
https://github.com/colinmeinke/wilderness

animation javascript morph shapes svg timeline tween wilderness

Last synced: about 1 year ago
JSON representation

An SVG animation API

• Host: GitHub
• URL: https://github.com/colinmeinke/wilderness
• Owner: colinmeinke
• License: mit
• Created: 2016-05-09T16:28:28.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2019-01-14T20:58:07.000Z (over 7 years ago)
• Last Synced: 2025-05-07T07:19:03.105Z (about 1 year ago)
• Topics: animation, javascript, morph, shapes, svg, timeline, tween, wilderness
• Language: JavaScript
• Homepage: https://wilderness.now.sh
• Size: 437 KB
• Stars: 161
• Watchers: 8
• Forks: 8
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# Wilderness

An SVG animation API · [https://wilderness.now.sh](https://wilderness.now.sh)

[![gzip size](http://img.badgesize.io/https://unpkg.com/wilderness/dist/wilderness.production.js?compression=gzip&label=gzip%20size&style=flat&cache=false)](https://unpkg.com/wilderness/dist/wilderness.production.js) [![test coverage](https://img.shields.io/coveralls/colinmeinke/wilderness/master.svg?style=flat)](https://coveralls.io/github/colinmeinke/wilderness) [![travisci](https://img.shields.io/travis/colinmeinke/wilderness.svg?style=flat)](https://travis-ci.org/colinmeinke/wilderness) [![npm version](https://img.shields.io/npm/v/wilderness.svg?style=flat)](https://www.npmjs.com/package/wilderness)

## 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

```js

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](https://wilderness.now.sh/getting-started) · [View examples](./examples)