LightNews LightNews
aurel-dev.bsky.social
@aurel-dev.bsky.social
4 followers 12 following 5 posts
Frontend web developper -- Open to work -- React & Vue

https://www.linkedin.com/in/aur%C3%A9lien-port%C3%A9-b7a246281/

https://codepen.io/qsgfhydfuk-ieeokdtkd
Posts Replies Media Videos
aurel-dev.bsky.social
#CodePenChallenge of the week : play with complementary colors. #css
September 3, 2025 at 1:31 PM
Reposted
anatudor.bsky.social
Made a gallery of such #SVG gradient + #filter effects blobs on @codepen.io:
codepen.io/thebabydino/...

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

Different blobs for light/ dark mode. 😼
Comparative screenshot of a few of the blobs in both light and dark mode. Demo screenshot showing the info section. Each distorted blob starts out as a circle, tightly fit inside its parent svg element (which has its viewBox set such that 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 because it also allows setting focal point coordinates (fx,fy) distinct from cx,cy - hover any 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 and 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 value). <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>
February 28, 2025 at 8:06 PM
Reposted
anatudor.bsky.social
Made this a couple of years ago on @codepen.io, but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown codepen.io/thebabydino/...

Based on a thing at a now dead link which did something of the kind with a huge div soup.

#css #js #a11y
March 17, 2025 at 2:29 PM
aurel-dev.bsky.social
My contribution to the #CodePenChallenge of the week.
It looks I was in a "Alice in Wonderland" mood...😅
But actually I just wanted to play with some svg filters !

codepen.io/qsgfhydfuk-i...
Cheshire cat reflection
...
codepen.io
August 22, 2025 at 3:52 PM
aurel-dev.bsky.social
I just discovered css-questions.com and scored 15 / 20 on the Basic Test. It looks there is always something to learn at css-questions.com! Try to beat my score. 💪

#cssquestions
CSS-Questions
Test your CSS skills with 150+ challenging questions on CSS tricky selectors, cascade layers, container queries, advanced pseudo-classes, and more!
css-questions.com
August 20, 2025 at 9:16 AM