SVG - Animate

Card Puncher Data Processing

SVG - Animate

About

The animate element in SVG permits to declaratively create animation

Example

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  
  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML" attributeName="x" from="-100" to="120"  dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>

Software

See SVG - Javascript

Documentation / Reference





Discover More
Utah Teapot
Data Vizualisation - Animation

Animation is defined as a series of steps from one object state to another through transition. Animations in web browsers come in two forms: native (declarative ones), such as the element...
Card Puncher Data Processing
SVG - Javascript

A pen that shows how you can add control button to interact with a SVG drawing. D3 block Converting...



Share this page:
Follow us:
Task Runner