varabyte/kobweb v0.14.3 on GitHub

This release adds the full list of SVG filters to the SVG API.

Planning to upgrade? Review instructions in the README.

Note

An SVG filter is basically a collection of effects you can apply to any SVG element. It can be a single effect (like a blur, or blending, or
tiling, or lighting) or a chain of effects.

The following code is adapted from the official Mozilla "displacement filter element" example.

Svg(attrs = {
    width(200)
    height(200)
    viewBox(ViewBox.sized(220))
}) {
    val filterId = SvgId("displacementFilter")
    Defs {
        Filter(filterId) {
            Turbulence {
                type(SVGTurbulenceType.Turbulence)
                baseFrequency(0.05)
                numOctaves(2)
                result("turbulenceOut")
            }
            DisplacementMap {
                in1(SVGFilterInput.SourceGraphic)
                in2("turbulenceOut")
                scale(50)
                xChannelSelector(SVGColorChannel.R)
                yChannelSelector(SVGColorChannel.G)
            }
        }
    }

    Circle(attrs = {
        cx(100)
        cy(100)
        r(100)
        filter(filterId)
    })
}

Silk

Introduced new HorizontalDivider and VerticalDivider classes, deprecating Divider
- This follows upstream changes by the official Jetpack Compose APIs doing the same thing
- Divider is essentially HorizontalDivider now and any usages of it can simply be renamed.

Frontend

Added support for all SVG filter elements

Full Changelog: v0.14.2...v0.14.3