A metallic effect becomes easier to control when the lighting works in grayscale first. The letter shapes define the silhouette. An inner edge makes them feel rounded. A moving gradient supplies reflections. A colour table then remaps the same light into a new palette.
This experiment uses native SVG filters, with no WebGL or image textures. The lettering uses system sans-serif type and remains editable. Explore without setup; basic SVG and JavaScript help when editing the working starter.
01 / START WITH A SHAPE
Let the alpha describe the letters.
Draw thick lettering with a single grey fill. The visible pixels make a colour image; their opacity makes a separate alpha image. SVG exposes these as SourceGraphic and SourceAlpha. Alpha provides the geometry needed for the edge treatment.
colour image = fill × alpha geometry = SourceAlpha
Try: choose Shape. Change Your word to something short and bold. Compare a closed counter, such as O, with an open letter, such as C. The effect must respect both the outside and inside edges.
02 / FIND THE INSIDE EDGE
Blur the alpha. Subtract it.
Blur SourceAlpha so opacity rolls off across its boundary. Subtract this blurred alpha from the sharp original alpha. The remaining positive values form a band just inside the shape, including the inside of the letter holes. Multiply that black band over the grey fill to shade the edge.
edge = max(0, alpha − blur(alpha)) material = grey × dark inner edge
The arithmetic composite uses k2 = 1 and k3 = −1, with the sharp alpha as its first input. Filter outputs clamp to their allowed range. A larger blur creates a wider shaded edge. This is an image treatment that suggests a bevel, rather than a geometric extrusion.
Try: choose Edge. Increase Inner edge from 1 to 20. Notice how a wide edge affects narrow letter strokes more strongly.
03 / GIVE LIGHT A PATH
A stripe that can repeat.
Replace the flat grey fill with a linear gradient. Its first and last stops share the same shade, and spreadMethod is repeat. Moving its gradientTransform by one complete period returns the same image. The bevel stays in place while the band of light passes through it.
offset = phase × stripe period one loop = one full stripe period
The live scene changes only the gradient transform as it animates. Material settings and the letter shape stay fixed. Sweep position pauses at a chosen moment. Dragging across the letters or using the arrow keys changes that same phase.
Try: choose Sweep. Compare a short Stripe period with a long one. Keep the same speed: the short period gives more bands across the word.
04 / GIVE GREY A PALETTE
Every shade becomes three values.
A grayscale pixel has the same value in its red, green and blue channels. feComponentTransfer remaps those channels separately. With type="table", each channel interpolates between equally spaced entries. Five colours therefore describe the output at 0%, 25%, 50%, 75% and 100% grey.
R = tableR(g) G = tableG(g) B = tableB(g)
Set color-interpolation-filters="sRGB" so the channel values agree with the familiar colour-picker values. In this experiment, alpha uses an identity transfer, preserving the silhouette. The ramp and numerical tables show the values that the actual filter uses.
Try: choose Colour and open the Colour tab. Swap Tidal gold for Mint light. Then edit the 50% swatch. Only the mapping changes; the grayscale light remains the same.
05 / FINISH THE SURFACE
Keep the texture in the same language.
A small Gaussian blur softens the grayscale material. feTurbulence provides repeatable noise; desaturating it keeps every channel equal. Clip that noise to the softened shape, mix a little into the grayscale image, then apply the colour lookup. The grain and the lighting follow the same colour rules.
The noise seed stays fixed while the reflection moves. Increasing grain therefore changes the material without introducing a flickering texture. Too much blur can close a narrow counter or soften the letter silhouette; inspect small exports as well as the large preview.
Try: pause the sweep. Compare Film grain at zero and 25%, then reduce it until the surface is readable. Compare Softness at zero and 3.
06 / KEEP THE RECIPE
Export the effect, not just a picture.
Prepare SVG saves the lettering, gradients and filter graph together. When the sweep is running, the exported SVG contains its own repeating gradient animation. When paused, it saves the frozen phase. It uses system type, so the exact letter outlines can vary across operating systems. Convert your final lettering to paths in a vector editor when you need fixed outlines.
Save this frame prepares a 1600 × 1000 PNG with the current material and cream background. The offline starter keeps the complete interactive controls in one HTML file. Reduced-motion preferences start paused; hidden and offscreen scenes stop updating.
Try: export a running SVG and a paused PNG. The first is a reusable recipe; the second keeps one selected moment.
YOUR TURN / ONE LIGHT, TWO IDENTITIES
Keep the reflection. Change its character.
Pause at a strong highlight. Keep the word, stripe period, bevel and phase fixed. Make a cold blue version, then change only the five lookup colours to make a warm version.
Compare both exports. The shape and light should agree while the palette gives each one a different character.
The complete starter includes the SVG builder, material controls, palette tables and styles. Open the downloaded HTML in a browser; no server, external font or package installation is needed.
