# countdown

This countdown displays a number that changes to the following number, and it is animated with the sequence plugin.

We will now explain step by step how to create a dynamic SVG of this type.

# Imports

The first step, if we haven't already done so, is to load the Graphery SVG library, Helpers plugin and Sequence Plugin. In our case, we have chosen to include the code within a script type=module and we will use the import expression. The plugins must be applied with gySVG.extend().

see: load gySVG | Sequence Plugin

# Create the SVG

We will create the SVG and the first number with this code:

const svg    = gySVG().viewBox(0, 0, 50, 100).width('100px').height('200px');
const number = svg.add('polyline').fill('none').stroke('black').stroke_width(10)
                  .points([[45, 45], [5, 45], [5, 5], [45, 5], [45, 45], [45, 45], [45, 95], [45, 95]]);
svg.attachTo('#countdownSVG');

# Create the Sequence object

For build the animations, we will use the Sequence object created with svg.Seq():

const seq = svg.Seq();

# Create the morphing countdown

If each number have the same number of points, the SVG display a very good transition between values and as result you made a morphing effect.


seq.add(
  number,
  {points: [[5, 45], [5, 5], [45, 5], [45, 45], [5, 45], [5, 95], [45, 95], [45, 45]]},
  {delay: 500, duration: 500}
).add(
  number,
  {points: [[5, 5], [45, 5], [45, 45], [45, 45], [45, 45], [45, 45], [45, 95], [45, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[45, 5], [5, 5], [5, 45], [45, 45], [45, 95], [5, 95], [5, 45], [5, 45]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[45, 5], [5, 5], [5, 45], [45, 45], [45, 45], [45, 95], [5, 95], [5, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[0, 45], [45, 5], [45, 45], [0, 45], [45, 45], [45, 45], [45, 95], [45, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[5, 5], [45, 5], [45, 45], [5, 45], [45, 45], [45, 95], [5, 95], [5, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[5, 5], [45, 5], [45, 45], [45, 45], [5, 45], [5, 95], [45, 95], [45, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[5, 45], [45, 5], [45, 45], [45, 45], [45, 45], [45, 45], [45, 95], [45, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[5, 5], [45, 5], [45, 45], [45, 45], [45, 95], [5, 95], [5, 45], [5, 0]]},
  {delay: seq.prev.end(500), duration: 500}
);
seq.play();

We had used seq.add() for include the animation per each number and run the animation sequence with seq.play().

# The complete code

If we put all these steps together this is the example's code:

import gySVG    from 'https://cdn.graphery.online/svg/1.0.0/module/index.js';
import sequence from 'https://cdn.graphery.online/svg/1.0.0/module/sequence.plugin.js';

gySVG.extend(sequence);

const svg    = gySVG().viewBox(0, 0, 50, 100).width('100px').height('200px');
const number = svg.add('polyline').fill('none').stroke('black').stroke_width(10)
                  .points([[45, 45], [5, 45], [5, 5], [45, 5], [45, 45], [45, 45], [45, 95], [45, 95]]);
svg.attachTo('#countdownSVG');

const seq = svg.Seq();
seq.add(
  number,
  {points: [[5, 45], [5, 5], [45, 5], [45, 45], [5, 45], [5, 95], [45, 95], [45, 45]]},
  {delay: 500, duration: 500}
).add(
  number,
  {points: [[5, 5], [45, 5], [45, 45], [45, 45], [45, 45], [45, 45], [45, 95], [45, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[45, 5], [5, 5], [5, 45], [45, 45], [45, 95], [5, 95], [5, 45], [5, 45]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[45, 5], [5, 5], [5, 45], [45, 45], [45, 45], [45, 95], [5, 95], [5, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[0, 45], [45, 5], [45, 45], [0, 45], [45, 45], [45, 45], [45, 95], [45, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[5, 5], [45, 5], [45, 45], [5, 45], [45, 45], [45, 95], [5, 95], [5, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[5, 5], [45, 5], [45, 45], [45, 45], [5, 45], [5, 95], [45, 95], [45, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[5, 45], [45, 5], [45, 45], [45, 45], [45, 45], [45, 45], [45, 95], [45, 95]]},
  {delay: seq.prev.end(500), duration: 500}
).add(
  number,
  {points: [[5, 5], [45, 5], [45, 45], [45, 45], [45, 95], [5, 95], [5, 45], [5, 0]]},
  {delay: seq.prev.end(500), duration: 500}
);
seq.play();

← fractal tree