svg-animation
Implement SVG animation in JavaScript using Web Animations
File Explorer
Download Latest Version (.zip)- bowser.js
- additive-check.js
- additive.html
- animate-check.js
- animate.html
- animateMotion-autoReverse-check.js
- animateMotion-autoReverse.html
- animateMotion-iterationComposite-check.js
- animateMotion-iterationComposite.html
- animateMotion-keyPoints-check.js
- animateMotion-keyPoints.html
- animateMotion-keyTimes-check.js
- animateMotion-keyTimes.html
- animateMotion-paced-check.js
- animateMotion-paced.html
- animateMotion-stationary-check.js
- animateMotion-stationary.html
- animateTransform-check.js
- animateTransform.html
- append-animateMotion-check.js
- append-animateMotion.html
- append-set-check.js
- append-set.html
- append-target-check.js
- append-target.html
- begin-end-element-check.js
- begin-end-element.html
- begin-end-events-check.js
- begin-end-events.html
- bounce-check.js
- bounce.html
- calcMode-linear-check.js
- calcMode-linear.html
- circle-check.js
- circle.html
- click-check.js
- click.html
- clock-values-check.js
- clock-values.html
- color-check.js
- color.html
- colorMatrix-properties-check.js
- colorMatrix-properties.html
- composite-properties-check.js
- composite-properties.html
- escape-punctuation-check.js
- escape-punctuation.html
- fillDefault-check.js
- fillDefault.html
- freeze-check.js
- freeze.html
- get-current-time-check.js
- get-current-time.html
- get-simple-duration-check.js
- get-simple-duration.html
- get-start-time-check.js
- get-start-time.html
- get-target-element-check.js
- get-target-element.html
- keySplines-check.js
- keySplines.html
- keystroke-check.js
- keystroke.html
- keyTimes-check.js
- keyTimes.html
- line-properties-check.js
- line-properties.html
- min-max-check.js
- min-max.html
- mouseout-check.js
- mouseout.html
- mouseover-check.js
- mouseover.html
- multiply-by-zero-check.js
- multiply-by-zero.html
- on-begin-end-check.js
- on-begin-end.html
- orphan-mpath-check.js
- orphan-mpath.html
- path-arc-check.js
- path-arc.html
- path-cubic-check.js
- path-cubic.html
- path-line-check.js
- path-line.html
- path-quadratic-check.js
- path-quadratic.html
- path-relative-arc-check.js
- path-relative-arc.html
- path-relative-cubic-check.js
- path-relative-cubic.html
- path-relative-line-check.js
- path-relative-line.html
- path-relative-quadratic-check.js
- path-relative-quadratic.html
- repeat-count-dur-check.js
- repeat-count-dur.html
- repeatDur-check.js
- repeatDur.html
- restart-always-check.js
- restart-always.html
- restart-never-check.js
- restart-never.html
- restart-whenNotActive-check.js
- restart-whenNotActive.html
- restartDefault-always-check.js
- restartDefault-always.html
- restartDefault-never-check.js
- restartDefault-never.html
- restartDefault-whenNotActive-check.js
- restartDefault-whenNotActive.html
- set-check.js
- set.html
- simple-list-begin-end-check.js
- simple-list-begin-end.html
- skip-non-svg-targets-check.js
- skip-non-svg-targets.html
- spinner-check.js
- spinner.html
- spotlight-properties-check.js
- spotlight-properties.html
- stop-properties-check.js
- stop-properties.html
- stroke-properties-check.js
- stroke-properties.html
- sync-base-check.js
- sync-base-event-check.js
- sync-base-event.html
- sync-base.html
- text-properties-check.js
- text-properties.html
- textPath-check.js
- textPath.html
- timing-cycle-backwards-check.js
- timing-cycle-backwards.html
- timing-cycle-forwards-check.js
- timing-cycle-forwards.html
- timing-cycle-one-check.js
- timing-cycle-one.html
- timing-cycle-single-element-check.js
- timing-cycle-single-element.html
- timing-cycle-three-check.js
- timing-cycle-three.html
- timing-cycle-two-check.js
- timing-cycle-two.html
- timing-sequence-two-elements-check.js
- timing-sequence-two-elements.html
- use-animation-check.js
- use-animation.html
- use-parent-check.js
- use-parent.html
- use-recursively-check.js
- use-recursively.html
- values-check.js
- values.html
- xlink-href-check.js
- xlink-href.html
- testharness.css
- testharness.js
- testharnessreport.js
- instance-time-list-test.js
- parse-test.js
- priority-queue-test.js
- harness.js
- test-runner.html
- update-testcases.py
- requirements.txt
- setup.sh
- generate-spinner.py
- .gitignore
- karma.conf.js
- LICENSE
- Makefile
- package.json
- README.md
- run-lint.sh
- smil-in-javascript.js
- web-animations.js
# Installation Guide
1. Get the code
git clone https://github.com/ericwilligers/svg-animation
Downloads the entire project code from GitHub to your computer.
cd svg-animation
Moves into the project folder you just downloaded.
2. Node.js
Easy RecommendedPrerequisites
npm install
Downloads and installs the libraries listed in package.json.
npm start
Starts the development/run server.
After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.
3. Python
EasyPrerequisites
β οΈ This is a large repository, so this method may point to an internal sub-package rather than the actual core product. Check the full README as well.
pip install -r tools/python/requirements.txt
Installs the Python libraries listed in requirements.txt (or similar).
python <μ€νν νμΌλͺ
>.py # READMEμμ μ νν μ€ν νμΌλͺ
μ νμΈνμΈμ
Runs the Python script (or module).
If it runs without errors and prints output in the terminal, it worked.
4. Make
MediumPrerequisites
- Git Needed to download the project code from GitHub.
- Make Usually pre-installed on Linux/macOS. On Windows, install separately (e.g. via MSYS2 or WSL).
make
Compiles the code based on the generated build configuration to produce an executable.
If it finishes without errors, it worked. Try running the generated executable directly.
// repository documentation
Was this content helpful?
(0 ratings)