#### Guide list:

-   [Chubricks 101 Guide](https://www.fxhash.xyz/article/chubricks-tutorial)
-   Chubricks Deep Dive Guide. Endless potential of SVG effects



***



::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::28521" data_spec="FX-GEN-DATA-002"}

***Chubriscks*** is based on SVG (Scalable Vector Graphics). And one of the standout features of SVG is its ability to accommodate intricate visual effects using filters. These filters let you create unique visual outputs ranging from blurs and lighting effects to distortions and color transformations. Let's delve into the world of SVG filter effects in a node-based environment.

#### Introduction to SVG Filter Effects

SVG filters provide a way to process an object's rendering result. This can include anything from an entire SVG canvas to a single element. Filters are capable of:

-   Blurring (similar to Gaussian blur)
-   Color manipulation (e.g., saturating, hue rotations)
-   Distorting (e.g., warping the graphics)
-   Composite effects (combining graphics)
-   Lighting effects (e.g., giving 2D objects a 3D appearance)

##### Using the "Effects node"

In my node editor, you have a specialized node called ***Effects***. This node serves as the gateway to infuse SVG canvas creations with a wide range of filter effects. Here's a guide on how to make the most of it:

##### 1. Adding an Effect:

To introduce a new filter effect, one can simply add it to the Effects node. This provides a dynamic visual workspace where the effects' parameters can be tweaked in real-time.

::video[]{src="ipfs://QmQvgneqHgNumGdTGBDB3igouESxy3G1W584VAd7XdNz7y"}

##### 2. Chaining Multiple Effects:

The node editor's architecture allows for sequential chaining of effects. This means you can layer multiple filter effects to create compound visual outputs.

Each filter effect has number ***id***. To create chain of effects you need select ***id*** of input effect. &#x20;

In video below I add ***Turbulence*** effect as source. Then I add ***Displacement map*** and use ***Turbulence with id (8)*** as input. Then I add ***Blur*** effect and use result of ***Displacement with id (9)*** as input for Blur. In result I get blurred and distorted pattern.

::video[]{src="ipfs://QmdT7eWfCf5EVdChTp2uok75sEMuRt9ZzmxPN6rcAGTANc"}

##### 3. Manipulating Parameters:

Every effect within the node editor comes with adjustable parameters. For example, with a blur effect, users can adjust the intensity. These manipulations are instant, making experimentation effortless.

::video[]{src="ipfs://Qmcxf6xN5phaf3C2C2eG8sL2uLMRdQPsQ7NkwBHfnbpzpb"}

#### Examples of SVG Filter Effects:

##### Gaussian Blur:

This is among the most commonly used SVG filters. It helps soften or smoothen an image or graphic. By adjusting the *x* and *y stdDeviation* attribute, one can change the intensity of the blur.

##### Color Manipulations:

Using the *ColorMatrix* filter primitive, one can adjust the color values of SVG graphics. This can be particularly useful to create effects like grayscale, saturate, or hue rotations.

##### Displacement Map:

With the *DisplacementMap*, one can distort graphics based on the pixel values of another input graphic. This can create wave-like distortions or even the effect of text being written in liquid.

#### Other Filter effects with use cases:

**Turbulence:** Generates noise patterns of different types which can be used for various effects, such as clouds or textures. Use it to create a "smoky" background or to simulate marble textures.

**Offset:** Allows you to offset an input image in the x and y directions. Perfect for creating drop shadows or giving depth to flat graphics.

**Morphology** : Used to grow or shrink graphics. The two primary operations it supports are dilate and erode. Adjusting the thickness of lines or edges in an SVG graphic, like making the border of a shape thicker or thinner.

**Merge:** Combines multiple filter effects into a single filter result. It's often used after effects that output multiple results. Combines multiple filter effects into a single filter result. It's often used after effects that output multiple results.

**Composite**: Combines two images using mathematical operations like *in, out*, and *atop*. Masking one shape with another or blending two images based on their color values.

**Convolve Matrix:** Generalized filter effect using a matrix to calculate the result of each pixel. Edge detection, sharpening, or embossing an image.

Each of these filters, like the previous ones mentioned, can be combined and layered for even more complex and intricate effects. Experimenting with them and understanding their individual capabilities is the key to unlocking the vast potential of SVG filter effects.

***

When venturing into the world of SVG filters, platforms like YouTube are invaluable. By simply inputting keywords like "SVG filter tutorials" or "SVG filter effects examples", you can unearth a plethora of tutorials, demonstrations, and real-world applications created by skilled designers and developers. Additionally, don't shy away from exploring articles and blogs through search engines. Many experienced professionals share their tips, tricks, and project breakdowns in written format, which can offer unique insights and nuances that videos might not capture. Remember, the digital community is vast and ever-evolving, so there's always something new to discover and learn.

#### Useful links

-   [SVG Filters 101](https://tympanus.net/codrops/2019/01/15/svg-filters-101/)&#x20;
-   [Dirk Weber (smashing magazine)](https://www.smashingmagazine.com/author/dirk-weber/)
-   [Filter Effects Module (w3c)](https://www.w3.org/TR/filter-effects-1/)
-   [Svg filters (css tricks)](https://css-tricks.com/tag/svg-filters/)
-   [Util: Gradient Map Filter](https://yoksel.github.io/svg-gradient-map/#/)
-   [Util: URGBA to feColorMatrix](http://andresgalante.com/RGBAtoFeColorMatrix/)
-   [Demo: Svg Filters](https://codepen.io/collection/XoMLeR)
-   [Demo: Sophisticated Filter Effects](https://codepen.io/collection/ArxmyO)


With the limitless versatility of SVG filter effects, I assure you that your creative possibilities will expand beyond imagination. These effects unlock a universe of visual wonders that were once considered unattainable.

Chubricks Deep Dive Guide. Endless potential of SVG effects

Written by

Editions

Share

Details

stay ahead with our newsletter