Hello Houdini

Some demos using Houdini's CSS Paint API. Check out the tutorial article for these demos or grab the source code from this GitHub repo.

• Placeholder Box
  Simple paint worklet that draws an X to create a placeholder box.
• Placeholder Box with Input Properties
  Uses input properties to match the element's border styles.
• Jagged Edge
  Reads custom properties (CSS variables) to customize how the paint worklet draws.
• Jagged Edge with Mask
  Combines a paint worklet with -webkit-mask-image to create a "knockout" effect.
• Fairly Useless Solid Color
  Emulates background-color. Fairly useless, but shows how to use input arguments.
• Polka Dot Fade
  Creates a fading polka dot pattern using custom properties.
• Animated Polka Dot Fade
  Brings motion to the polka dot pattern by animating custom properties in CSS.