Maciek Fitzner

A mad cartoonist dabbling in webdev. An enthusiast of pure CSS and SVG animation.

[Maciek Fitzner @FitzMack]

After spending much of the past 2 yrs learning shaders I revisited an idea I'd had for ages: a 3D engine - in pure CSS. Divs serving as faces & trigonometry to cut them to shape & put them in place + realtime shading. All parsed from actual 3D files. Demo: https://t.co/9KHhNMrxCh

[Maciek Fitzner @FitzMack]

Another webGL demo & for this 1 I've doubled down on on an area I'd barely touched b4: 2D domain distortion. The image near the cursor gets twisted, bloated or sucked in. You choose. Try the live demo on @CodePen https://t.co/ISkxddwMYY

[Maciek Fitzner @FitzMack]

@amit_sheen @jonkantner @CodePen It's here: https://t.co/kr8NREiWhk A bit late, as I got stuck for a week working on another effect (& still not quite there) - but once I started, did it in two sittings (1 for the spiral structure, 1 for the color grid) - without looking at the code of either demo, no less

[Maciek Fitzner @FitzMack]

@jonkantner @CodePen This is @amit_sheen's absolute CSS magic demo on @CodePen https://t.co/OOdcYwwNVu Likewise, I did not look into the code - & seriously have NO idea how this was possible. A grid-based spiral in CSS? Like... HOW? I know what I would use but that's not in CSS yet (if ever)

[Maciek Fitzner @FitzMack]

Inspired by @jonkantner via @amit_sheen I tried to recreate the grid-based spinning serpentine animation - in @webGL Live demo on @CodePen : https://t.co/kr8NREiWhk

[Maciek Fitzner @FitzMack]

Here's the original by @jonkantner on @CodePen https://t.co/pghG7GmtHg I tried to emulate it but not copy it 1:1. My spiral is different & so are the exact hues. Didn't even peek at the code for calcs. I just wanted to experiment with webGL & this was the PERFECT inspiration!😍

[Maciek Fitzner @FitzMack]

@ania_kubow Don't go there! It's a road to perdition! Before you know it, you'll grow a beard, start wearing a dorky pork pie hat & coding blue crystals https://t.co/abjlwxhR0k #dlz (iykyk)

[Maciek Fitzner @FitzMack]

@amit_sheen @CodePen My prayers have been heard! :D I've been waiting for a feature of automating index count for ages. Hope this gets wider support outside chromium soon.

[Maciek Fitzner @FitzMack]

@amit_sheen & oh wait, I also did something similar way back, except with a simplier nth-child-based gradient and a static spiral: https://t.co/9AWHU0Ss9L

[Maciek Fitzner @FitzMack]

@amit_sheen You should totally publish it! Like, right now! It reminds me of way back in the 90s when DPaint was my fav tool to muck around with. I used a gradient sphere quite like this as a paintbrush. So much fun!

[Maciek Fitzner @FitzMack]

@amit_sheen I'm experimenting with it further. Here's what a simple circle translated to & fro produces (perspective-origin is also pushed around). This stuff could easily create simple primitives - torus being my next goal. Then maybe some irregular waves or mountains?

[Maciek Fitzner @FitzMack]

I'm on a roll! Here's a dreamy, undulating wave - made with pure #CSS. No complex calcs, either, just a surprisingly convincing trickery using the blur filter. Live demo on @CodePen https://t.co/b7YSzmLz8a

[Maciek Fitzner @FitzMack]

@Una Yes. Yes, you do.

Also, why is Blue Yeti not blue?

[Maciek Fitzner @FitzMack]

What goes around, comes around. After a year of learning webGL shaders I did something CSS-only. Live demo on @CodePen https://t.co/jxVFkyH5DA

[Maciek Fitzner @FitzMack]

@anatudor Constantly. Conversations I had. Conversations I would like to have - but probably never will. Conversations I never had but should've. Conversations that went nowhere & conversations that ruined everything.

[Maciek Fitzner @FitzMack]

@anatudor Firefox: looks fine. Chrome: the red lines - thicker & faded on the left one.

[Maciek Fitzner @FitzMack]

@anatudor @CodePen So neat! I've mostly done stepwise gradient like this: white 50%, black 0 - brut-forcing a sharp color change. Could be extended/repeated for smaller steps, always using 0 for the new color start. But I do need to brush up on SVG filters, my primary focus was always geometry

[Maciek Fitzner @FitzMack]

@MariyaSha888 Is there work for ppl who are frontend-only & focusing on graphics? I do bonkers stuff in CSS, SVG & shaders (webGL/webGPU) & will only dabble in PHP or JS when it serves my gfx projects, eg. for-loops, if/else - or is required to run them. Shader setup, especially webGPU:🤮