Reactive Graph - Design System

Patterns

All patterns use the colors defined in the Palette.

Pattern 1 (Japanese Pattern 2)

Fill Variant Transparency Variant
--pattern-1--malachite--fill --pattern-1--malachite
--pattern-1--malachite--fill --pattern-1--selective-yellow
--pattern-1--malachite--fill --pattern-1--celestial-blue
--pattern-1--malachite--fill --pattern-1--mexican-pink
--pattern-1--malachite--fill --pattern-1--chartreuse

The pattern has been generated using Japanese Pattern 2

Pattern 2 (Zebra)

Fill Variant Light Variant
--pattern-2--fill --pattern-2
--pattern-2--malachite--fill --pattern-2--malachite
--pattern-2--malachite--fill --pattern-2--selective-yellow
--pattern-2--malachite--fill --pattern-2--celestial-blue
--pattern-2--malachite--fill --pattern-2--mexican-pink
--pattern-2--malachite--fill --pattern-2--chartreuse

The pattern has been generated using Zebra Pattern

Pattern 3 (Waves 10)

Fill Variant Transparency Variant
--pattern-3--fill --pattern-3

The pattern has been generated using Waves 10

Pattern 4 (Interlocked Hexagons)

Variant Fill Variant Transparency Variant
celestial-blue -> mexican-pink --pattern-4--celestial-blue--mexican-pink--fill --pattern-4--celestial-blue--mexican-pink
malachite -> selective-yellow --pattern-4--malachite--selective-yellow--fill --pattern-4--malachite--selective-yellow
selective-yellow -> mexican-pink --pattern-4--selective-yellow--mexican-pink--fill --pattern-4--selective-yellow--mexican-pink

The pattern has been generated using Interlocked Hexagons

CSS Pattern Libraries