Loading...

EPG Health Media

Configurable Thematic Generative Animations

EPG Health Media

We designed & developed this series of simple themed animations for use on EPG's medical education portal.

We were commissioned by EPG Health Media to design & build a series of animations to be used as thematic signposts to the various sections within their medical education portal.

The technical requirement was that each animation should be dynamically generated, allowing variation and configuration by the site designers.

So, we designed this set of animations, themed around the concept of networks & interactions, each of which could be adjusted and styled by the EPG team.

In later versions we also created the ability to add icons to the nodes.

Play with the CodePen demos below to get a sense of the range of variation we created in each design.

Spiralling Pairs

Paired lines & nodes generated with random size and length. Scaling animation to suggest x-axis rotation and DNA-like double helix.

Controls

Colour: Pick foreground & background colours
X: Total Pairs
Y: Node Size
Z: Rotation start offset

See the Pen EPG - Demo 01 by Kultur Design (@kulturdesign) on CodePen.

Network: One to many

Random nodes generated. Positions drift based on variable noise (z). All nodes connected back to random single node.

Controls

Colour: Pick foreground & background colours.
X: Total nodes generated
Y: Node size
Z: Motion noise amplification

See the Pen EPG - Demo 02 by Kultur Design (@kulturdesign) on CodePen.

Network: One to one

Random nodes generated. Positions drift based on variable noise (z). Nodes randomly paired.

Controls

Colour: Pick foreground & background colours.
X: Total nodes generated
Y: Node size
Z: Motion noise amplification

See the Pen EPG - Demo 03 by Kultur Design (@kulturdesign) on CodePen.

Network: Many to many

Random nodes generated. Positions drift based on variable noise (z). All nodes connected to all other nodes.

Controls

Colour: Pick foreground & background colours.
X: Total nodes generated
Y: Node size
Z: Motion noise amplification

See the Pen EPG - Demo 04 by Kultur Design (@kulturdesign) on CodePen.

Intersections

Lines emerge from perimeter at random angles checking for intersections, to create random, abstract connection patterns.

Controls

Colour: Pick foreground & background colours.
X: Total lines generated.
Y: Concurrent lines emerging.
X: Intersection point scale.

See the Pen EPG - Demo 05 by Kultur Design (@kulturdesign) on CodePen.