Skip to main content

Search

Items tagged with: distortion

I have been teasing this a couple of days ago... 🫣
RV Audio Design today announced that Disseptor, an outstanding harmonics processor, is now available for #linuxaudio. 🥳
Make sure to check it out in White Sea Studio's #snakeoil video #review at youtu.be/ebCjnirg6qE or on their website at rvaudiodesign.com/.
#plugin #harmonic #distortion
PD: I keep nagging developers, and I'm really happy that more and more of them are willing to make their products available for #linux. 😊
Linux support announcement artwork with the text "Disseptor now supporting Linux", the RV logo and a penguin (Tux).
Disseptor plugin window with spectrum and all-pass filters and input, drive, assymetry, output and mix dials

Home - RV Audio Design

Disseptor - A multiband disperser and distortion plug-in.
RV Audio Design
#Linux #LinuxAudio #review #plugin #distortion #harmonic #snakeoil

Made a gallery of such #SVG gradient + #filter effects blobs on @codepen
codepen.io/thebabydino/full/YP…

Also includes an explanation of the how behind and interaction: the focal point of the `radialGradient` the blobs start from follows the cursor on hover.

Different blobs for light/ dark mode. 😼

#svgGradient #cssGradient #blob #grainy #radialGradient #svgFilter #grain #code #coding #frontend #distortion #web #dev #webDev #webDevelopment #filterEffect

Comparative screenshot of a few of the blobs in both light and dark mode.
Demo screen with the info section. Each distorted blob starts out as a circle, tightly fit inside its parent svg element (which has its viewBox set so its 0,0 point is dead in the middle). This circle then gets a radialGradient fill. Choosing the SVG radial gradient over the CSS one as it also allows setting focal point coordinates (fx,fy) distinct from cx,cy - hover a blob to see how its focal point follows the cursor. <radialGradient id='g' gradientUnits='objectBoundingBox' fx='.35' fy='.65'> <stop stop-color='var(--c0)'/> <stop stop-color='var(--c1)' offset='.5'/> <stop stop-color='rgba(from var(--c1) r g b/ 0)' offset='1'/> </radialGradient> The circle with the gradient is then blurred, distorted & given a grainy/ dithered look. The last two actions make use of the same concept of altering the input using noise generated by feTurbulence as a displacement map. The displacement used for distortion is relative to input size. The noise used for dithering is finer (larger baseFrequency). <filter id='distort' primitiveUnits='objectBoundingBox' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='.00713'/> <feDisplacementMap in='SourceGraphic' scale='.3' yChannelSelector='R'/> </radialGradient> <filter id='grain' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='7.13'/> <feDisplacementMap in='SourceGraphic' scale='32' yChannelSelector='R'/> </radialGradient>
#dev #web #webdev #code #filter #coding #frontend #svg #webdevelopment #SVGFilter #cssgradient #distortion #Blob #svggradient #grainy #radialgradient #grain #filtereffect @CodePen

Grainy distorted gradient blob: 1 #SVG `radialGradient` (setting a focal point `fx,fy`) vs. multiple #CSS `radial-gradient()` layers (no option to control focal point).

Using filters for distortion & grain effect.

A bit more detail on this reddit.com/r/css/comments/1j03…

#svgGradient #cssGradient #blob #grainy #radialGradient #svgFilter #filter #grain #code #coding #frontend #distortion #web #dev #webDev #webDevelopment

Comparative result of the SVG radialGradient vs. the CSS radial-gradient() blob.
#dev #web #webdev #code #css #filter #coding #frontend #svg #webdevelopment #SVGFilter #cssgradient #distortion #Blob #svggradient #grainy #radialgradient #grain

⇧