Animating SCADA Displays

Examples of animating various SCADA components and diagrams, indication changing status or values. Uses SVG + Javascript.

Note: Animating SVG elements in SCADA can be nicely created by either of two(2) robust animation libraries: SVG.js or SNAP.svg

Animate Flow Arrow Typically represents flow in piping. The piping is an SVG path, and each arrow line is a 3-point path that follows that path around corners.
Animate Button This shows two types of ON/OFF buttons: The rectangular button is a standard HTML button that is placed as a foreignObject within the SVG drawing. The circular pushbutton is a group of svg elements.
Animate Flow Occurring Shows flow is occurring in a vessel, heat exchanger, heating coil, pipeline, etc. Uses a 4-color linear gradient with spreadMethod = reflect, plus two(2) <animate> elements.
Animate Vessel Filling Dynamically fill any SVG shape, representing a vessel, from bottom to top. This uses a <mask> that includes an element that duplicates the vessel's shape. A rectangle, located/sized based on the vessel's bounding box, calls the mask, and moves rectangle upward, simultaneously changing its height, to fill the vessel.
Animate Unicode Icons SVG has about 50 built-in icons, via unicode text element characters, that can be animated in SCADA (impellers, fans, motors, mixers, etc). Also includes directional arrows.
Animate Polygon Sprites This shows a list of 30 polygons that are ideal for symbols that can be located, sized, colored, and animated in SCADA.
Animate Pipe Sprite A polygon sprite is set inside a pipe and moves/rotates along the pipeline.
Animate Component Status This example uses animated gradients to display the modulating values and status of ISA/P&ID components.
Animate Drawing Component Animate the drawing of the individual ISA/P&ID components. Animates their paths via stroke-dasharray and stroke-dashoffset attributes.
Animate Valve Position The position of a 2-way modulating & 3-way mixing control valves are shown. Animates the valve body, the operator, and flow arrows.
Animate Motor Speed This represents the relative speed of a motor. There are ten(10) speed selections shown as a rotating icon associated with a motor.
Animate Damper Actuator Modulates an air handling unit damper actuator and its associated damper.