https://github.com/nicklasvraa/animated_svgs

Examples of animated vector graphics
https://github.com/nicklasvraa/animated_svgs

animation javascript svg

Last synced: about 1 month ago
JSON representation

Examples of animated vector graphics

• Host: GitHub
• URL: https://github.com/nicklasvraa/animated_svgs
• Owner: NicklasVraa
• License: gpl-3.0
• Created: 2022-11-30T14:03:38.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-03T16:25:35.000Z (about 1 year ago)
• Last Synced: 2024-05-01T17:07:38.526Z (7 months ago)
• Topics: animation, javascript, svg
• Homepage:
• Size: 11.4 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Animated Vector Graphics

Everyone likes SVGs. They're compact and infinitely scalable. In fact, they can be animated and interactive using a JavaScript library called GSAP. The code can even be written inside the SVG-file itself.

Simply create the svg in inkscape, illustrator, or other vector-drawing software. Open the file in a text-editor and add your code.

Check out the examples. Only gifs are shown, along with a snippet of the code. Download them, open in a browser, and check out the real results.

Note: only tested with Chrome.

---

## A starry night

![Starry Night](gifs/night.gif)

```html

  function anim() {

    var master = new TimelineMax({repeat:-1});

    master.add(waves(), 0).add(clouds(), 0).add(moon(), 0).add(stars(), 0);

    master.timeScale(1.6);

    master.running = true;

    var light = {

      mask  : document.getElementById('light_mask'),

      cone  : document.getElementById('light_cone'),

      torch : document.getElementById('torch'),

      isOn  : false

    };

    // More code...

  }

```

---

## A tree, waving in the wind

![Waving Tree](gifs/tree.gif)

```html

  function anim() {

    const branch_1 = document.getElementById('branch_1');

    const branch_2 = document.getElementById('branch_2');

    const branch_3 = document.getElementById('branch_3');

    const front_leaves_2 = document.getElementById('front_leaves');

    var tl = new TimelineMax({repeat:1, yoyo:true});

    tl

      .to(branch_3, 3, {rotation:-2, transformOrigin:'0% 100%', ease:Power1.easeInOut}, 0)

      .to(branch_1, 3, {rotation:-1, transformOrigin:'100% 100%', ease:Power1.easeInOut}, 0)

      .to(branch_2, 3, {rotation:-1, transformOrigin:'50% 100%', ease:Power1.easeInOut}, 0)

      .to(front_leaves_2, 3, {rotation:-1, x:-2, transformOrigin:'50% 50%', ease:Power1.easeInOut}, 0)

  }

```

Open the raw files to check out the full code.

---

**LEGAL NOTICE**: This repository, including any and all of its forks and derivatives, may NOT be used in the development or training of any machine learning model of any kind, without the explicit permission of the owner of the original repository.