Swiss Flag

Reduce Motion No Animation Show Slot Content

Size 12rem

Override Animation Settings

Using "Standard" preset (600ms speed, 2% distance, 50ms stagger)

Animation Speed 600ms

Oscillation Distance 2%

Stagger Delay 50ms

Override Reduced Settings

Using "Reduced" defaults (900ms speed, 2% distance, 0ms stagger)

Reduced Speed 900ms

Reduced Distance 2%

Reduced Stagger 0ms

Code Sample

View on GitHub and use the Swiss Flag Web Component in your projects!

Additional stuff

The Swiss Flag component follows closely the design of the official Swiss flag. It is defined as such: "a white, upright, free-standing cross depicted against a red background, whose arms, which are all of equal size, are one-sixth longer than they are wide."

The official color of the flag is Pantone 485C, a color that cannot properly be depicted on most screens (except maybe Pantone Validated ones, but they are not common). For this reason, it has been determined in 2007 that the official "digital" red for the Swiss Flag be #FF0000, the color used for this component.