Brought to you by

Houdini.how

Worklet Library

angled-corners

Paint

.demo {
--corner-radius:
--paint-color:
--stroke-weight:
background: paint(angled-corners);
}

Note: Partial demo for compatibility. For full effect using arguments, view Demo with Experimental Web Platform Features flag on.

@houdini-modules/border-radius-reverse

Paint

Content!

.demo {
--border-radius-reverse:
--border-radius-reverse-color:
border: calc(var(--border-radius-reverse) * 1px) solid transparent;
border-image: paint(border-radius-reverse);
border-image-slice: var(--border-radius-reverse);
}

css-houdini-connections

Paint

.demo {
--connections-particleColor:
--connections-lineColor:
--connections-particleAmount:
--connections-defaultRadius:
--connections-variantRadius:
--connections-linkRadius:
background: paint(connections)
}

bytemare

Paint

.demo {
--bytemare-tile-size:
--bytemare-color:
--bytemare-gap:
--bytemare-probability:
background-image: paint(bytemare);
}

houdini-tooltip

Paint

Hello!

.demo {
--tooltip-bg:
--tooltip-position:
--tooltip-size:
--border-width:
padding: 1rem;
background: var(--tooltip-bg);
border-bottom: 1px solid transparent;
border-image-slice: 0 0 100% 0;
border-image-width: var(--border-width);
border-image-outset: var(--border-width);
border-image-source: paint(tooltip);
}

css-houdini-circles

Paint

.demo {
--colors:
--min-radius:
--max-radius:
--min-opacity:
--max-opacity:
--num-circles:
background: paint(circles)
}

css-houdini-fractals

by Conrad Sollitt

Paint

.demo {
--colors:
--shape:
--angle:
--starting-length-percent:
--next-line-size:
background-image: paint(fractals)
}

curved-line

Paint

.demo {
--curved-lineHeight:
--curved-lineWidth:
--curved-lineColor:
--curved-lineSpread:
background: paint(curved-line);
}

extra-scalloped-border

Paint

Scalloped

.demo {
--extra-scallopColor:
--extra-scallopRadius:
--extra-scallopWeight:
background: paint(extra-scallopedBorder);
}

css-houdini-voronoi

Paint

.demo {
--voronoi-cell-colors:
--voronoi-number-of-cells:
--voronoi-line-color:
--voronoi-line-width:
--voronoi-dot-color:
--voronoi-dot-size:
background: paint(voronoi)
}

houdini-tesla

by Jhey Tompkins

Paint

.demo {
--tesla-segments:
--tesla-angle:
--tesla-blur:
--tesla-width:
--tesla-hue:
--tesla-saturation:
--tesla-lightness:
background: paint(tesla-coil);
}

css-houdini-lines

Paint

.demo {
--lines-colors:
--lines-widths:
--lines-gaps:
--lines-rotate:
background: paint(lines)
}

extra-sparkles

Paint

.demo {
--extra-sparkleNumber:
--extra-sparkleHue:
--extra-sparkleHeightVariance:
--extra-sparkleWidthVariance:
--extra-sparkleWeightVariance:
background: paint(extra-sparkles)
}

houdini-powdered-gradient

Paint

.demo {
--powdered-gradient-direction:
--powdered-gradient-color:
--powdered-gradient-size:
background: paint(powdered-gradient), #111
}

extra-underline

Paint

Underlined

.demo {
--extra-underlineNumber:
--extra-underlineColor:
--extra-underlineWidth:
--extra-underlineSpread:
background: paint(extra-superUnderline);
}

extra-confetti

Paint

.demo {
--extra-confettiNumber:
--extra-confettiLengthVariance:
--extra-confettiWeightVariance:
background: paint(extra-confetti)
}

houdini-noise

by Jhey Tompkins

Paint

.demo {
--noise-cell-size:
--noise-hue:
--noise-saturation:
--noise-lightness:
background: paint(noise);
}

houdini-avatar-polygon

Paint

Hello!

.demo {
--polygon-bg:
--avatar-sides:
--avatar-angle:
padding: 3rem;
background: var(--polygon-bg);
-webkit-mask-image: paint(avatar-polygon);
mask-image: paint(avatar-polygon);
}

houdini-leaf

Paint

.demo {
--leaf-color:
--leaf-size:
--leaf-variance:
background-image: paint(leaf);
}

parallelowow

Paint

.demo {
--parallelowow-tile-width:
--parallelowow-base-color:
--parallelowow-color-step:
--parallelowow-probability:
--parallelowow-stroke-weight:
background: paint(parallelowow), var(--parallelowow-base-color);
}

houdini-static-gradient

Paint

.demo {
--static-gradient-direction:
--static-gradient-color:
--static-gradient-size:
background: paint(static-gradient)
}

Houdini.how

Brought to you by web.dev