Red, Green and Blue, human perception and aliasing

WARNING: If you are susceptible to photosensitive epilepsy (PSE) (a form of epilepsy) in which seizures are triggered by visual stimuli, please to not proceed any further into this page.

Please resize the width of the viewport and notice how the effects of aliasing will create a gradient that alternates between rainbow bands of color and bands of the gray-scale. Aliasing will also happen when moving the viewport around or partly by scrolling.

1.
2.
3.
4.
5.
6.
7.
8.
9.
  1. repeating-linear-gradient(left, blue 0.0%, blue 0.1%, red 0.1%, red 0.2%, lime 0.2%, lime 0.3%)
  2. repeating-linear-gradient(left, red 0%, red 0.1%, blue 0.1%, blue 0.2%, lime 0.2%, lime 0.3%)
  3. repeating-linear-gradient(left, blue 0.0%, blue 0.1%, red 0.1%, red 0.2%, lime 0.2%, lime 0.3%)
  4. repeating-linear-gradient(left, aqua 0%, aqua 0.1%, fuchsia 0.1%, fuchsia 0.2%, yellow 0.2%, yellow 0.3%)
  5. repeating-linear-gradient(left, aqua 0%, aqua 0.1%, yellow 0.1%, yellow 0.2%, fuchsia 0.2%, fuchsia 0.3%)
  6. repeating-linear-gradient(left, yellow 0.0%, yellow 0.1%, aqua 0.1%, aqua 0.2%, fuchsia 0.2%, fuchsia 0.3%)
  7. repeating-linear-gradient(left, white 0.0%, white 0.1%, black 0.1%, black 0.2%)
  8. repeating-linear-gradient(left, aqua 0.0%, aqua 0.1%, fuchsia 0.1%, fuchsia 0.2%)
  9. repeating-linear-gradient(left, red 0%, red 0.1%, lime 0.1%, lime 0.2%)

Screenshot of IE10 preview 2

Screenshot of Firefox 7

Screenshot of Opera 11.50

Screenshot of Safari 5.1

Screenshot of the above images in Firefox 7 where the image width is based on the width of the viewport of 350 pixels (the images are 334 pixels in width).

Aliasing