Peak gradient

At the bottom of a white card sits a soft glow: dark at the floor, then blue, steel, near-white, yellow, red-orange and magenta, fading to nothing at the top. Its outline is a gentle mountain, highest in the middle and lower toward both sides, and it grows up from the floor over 1.1 seconds whenever the card comes into view.

It is far simpler than it looks: nine tall rectangles in one SVG, all filled with the same vertical gradient and each blurred with a gaussian of 15 view-box units in a 1271 by 599 box. The gradient is in each rectangle's own bounding box, so every column carries the full rainbow over its own height, and the columns are 1.23 times their pitch so they overlap and the blur melts them into one surface. The last stop is transparent, so the tallest column dissolves before its edge would show.

The heights follow a power falloff, not a cosine bell: the centre is 98 percent of the box and the edges 55 percent of that, with height falling as one minus the distance from the centre to the power 1.24, which gives the flatter, pyramid-like rise. The rise is a transform alone, scaleY from 0 to 1 about the bottom edge with a gliding ease-out, so it costs nothing per frame.

• Draw BARS rectangles side by side in a 1271 by 599 view box with preserveAspectRatio none, each 1.23 columns wide.
• Set each height from the centre out as PEAK times the box height times (VALLEY + (1 - VALLEY)(1 - t^1.24)), and stand it on the bottom edge.
• Fill every bar with one vertical linearGradient in objectBoundingBox units, bottom to top through STOPS, ending transparent.
• Wrap each bar in a group with a feGaussianBlur of BLUR.
• Rise the whole field with transform-origin bottom and a scaleY(0) to scaleY(1) transition over RISE_MS, started two frames after the collapsed state paints.
• Under reduced motion, show the field risen and never transition.

• STOPS (ember, blue, steel, near-white, yellow, red-orange, magenta, transparent): The rainbow every column carries, bottom to top.
• PALETTES (seven rainbows): Alternative stops for the same shape.
• BARS (9): How many columns.
• BLUR (15): The blur in view-box units.
• PEAK (0.98): The centre column's height as a share of the box.
• VALLEY (0.55): The edge columns' height as a share of the centre's.
• RISE_MS (1100): How long the rise from the floor takes.
• GROUND (#ffffff): The card colour.