WildflowerJS Logo WildflowerJS

An alpha matte and a feathered mask

A soft-edged shape cut from a layer: mask-image with a gradient from opaque to transparent, whose width is the feather; a disc here, grown by a maskSize track until it clears the frame. For any other shape with a feather, an SVG image is the mask, with the shape blurred by a filter inside the image, since a filter works in an image used this way, where an SVG <mask> referenced by id is not drawn in a render.

.disc { mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-position: center; mask-repeat: no-repeat; }
.cut  { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='b'><feGaussianBlur stdDeviation='10'/></filter><path d='M 30 100 L 100 20 L 170 100 L 100 180 Z' fill='white' filter='url(%23b)'/></svg>");
        mask-size: 100% 100%; }
scene('iris', {
    keyframes: {
        disc: { maskSize: { at: [0.3, 1.5], to: ['20% 20%', '300% 300%'], ease: 'power2.in' } },
    },
});

No demo uses this pattern yet.

These patterns put still SVG filters on HTML, cut layers with mattes and feathered masks, lay paper and light over a scene, spray a ground with its own tint, and grade part of the stage with an adjustment layer.

  • Still effects with an SVG filter: A title card sits over a stippled sky, and a photo beside it is printed as a halftone.
  • A luma matte: A layer shows through where a matte is bright and is hidden where it is dark, and the matte moves, so a photo is revealed by a sweep with a soft edge.
  • A paper texture and a light leak: The scene under paper: a texture layer over everything, blended with multiply, darkens the scene by the paper's grain and leaves white untouched; a light leak is a warm gradient blended with screen, which lightens, moved by a track so it drifts across the frame.
  • A ground sprayed with its own tint: A title card on a deep teal, with the teal's own tint sprayed behind the title, densest there and thinning toward the edges, so the ground has the tooth and the light of a printed poster without a second hue.
  • An adjustment layer: An element over part of the stage with backdrop-filter changes everything beneath it in its area and nothing above: a grade on the footage under a title, a blur behind a panel, or a desaturated half that a track slides across.