svelte-ux
svelte-ux copied to clipboard
Published
20 hours ago •
techniq
techniq
Filter effects
- MDN filter
- CSS filter Editor
- Comparison of CSS & SVG filters
- Displacment Map Tester
- SVG Color Matrix Mixer
- https://justcode.today/filters/#
- https://www.smashingmagazine.com/2021/03/svg-generators/#svg-filters-color-matrix-mixer
- https://svgfilters.com/
- [ ] Static
- [ ] Animated
- [ ] Mouse tracking
SVG
-
[ ] Grainy
- Dither / Dissolve CSS Gradients
- CSS Noise Gradient (shadow)
- Simplest grainy gradient (under 350 bytes!)
- Chrome Knob. basically a web native circular range slider
- Grainy/ dithered gradient blob
- https://grainy-gradients.vercel.app/
- Just code, no images: soft round buttons
- Nice Grainy background
- Grainy Gradient, Card, Hover Effect, Border Gradient (Daily Design + Code #4)
- https://www.julienthibeaut.xyz/blog/create-grainy-backgrounds-with-css
- Risograph Gradient Effect with SVG
- Playing with SVG displacement filter
- Ripped images
- https://grainy-gradients.vercel.app/
- Grainy Texture, Neumorphic Toggle Buttons, Bounce Effect (Daily Design + Code #5)
-
[ ] Glitch
-
[ ] Ripple
- SVG Displacement Map
- Peter Kuhn
- SVG Turbulence Filter Test
- Animated SVG Turbulence Filter
- Paint on Heat Distortion
- Animated SVG Filter FX
- Turbulence font - SVG
- Squigglevision Howdy | @keyframers 1.19.1
- Water filter
- SVG feDisplacementmap: Modal fade in effect
- SVG feDisplacementMap: Download Progressbar
- Loader turbulence
- Scroll Distortion
- Text SVG Filter Animations
- Wobbly Text w/ CSS && SVG
-
[ ] Electric
-
[ ] Focal blur
-
[ ] Displacement map
-
[ ] Text effects
- Copperplate - Applied to HTML Content
- Sketchy - Applied to HTML Content
- Splash - applied to HTML Content
- Neon - applied to HTML Content
- Grungy SVG Filter applied to HTML
- Pop text effects, created with SVG filters
- Basic SVG Filter Effects
-
Glitter
- https://github.com/wh0/glitter
- Cosmic brilli - Glow SVG Text
- Graffiti
-
[x] Gooey / Blob / Morph (feColorMatrix)
- Text Morph
- Gooey text background with SVG filters
- Gooey Dropdown Menu
- SVG blob mask
- Spinner with Glowing, Gooey Effect
- Gooey Loader (CSS only)
- Gooey Slider - Helios Bioelectronics
- Randomly generated CSS lava lamp 💡 #CodePenChallenge
- CSS / SVG Blobby Background
- Gooey SVG Plasma Loaders
- Gooey radio buttons
- Samsung TV Loader
- Tab bar (Chrome/Firefox)
- Bouncing tab bar
- CSS | Gooey Interactive Layout
- gooeytype A
- Gooey Eclipse
- https://css-tricks.com/gooey-effect/
- Gooey mouse follow
- The Better Gooey Effect
- More fun data visualizations with the gooey effect
-
[ ] Frosted / Fluted Glass
- https://twitter.com/Ibelick/status/1736868297625501768
- https://twitter.com/arcinternet/status/1736782043202089154
- https://twitter.com/Ibelick/status/1727814903656825027
- https://www.julienthibeaut.xyz/lab/fractal-glass
- Fractal Glass
- https://glass.motion.dev/
-
[ ] Shadow
-
[ ] Other
