Lightnews — Scholar-powered news

Ana Tudor

@anatudor.bsky.social

5.2K followers 58 following 2.5K posts

Same me, another platform. I code stuff. It usually involves some Maths. I enjoy music mandatory religion classes warned me about. And other things that may kill me. https://thebabydino.github.io/

thebabydino.github.io

Posts Media Videos Starter Packs

Pinned

Ana Tudor @anatudor.bsky.social · Jul 31

For anyone who missed it: I have now set up membership tiers on Ko-fi! #KofiMembershipChallenge

ko-fi.com/anatudor

Because praise doesn't keep me afloat... but you can!

Support Ana Tudor

If you like my work and you want me to be able to continue coding, please consider supporting it.

ko-fi.com

2 4

Ana Tudor @anatudor.bsky.social · 16h

This uses JS and a circle for each dot. However, it can be done with pure CSS and one element using this technique frontendmasters.com/blog/pure-cs...

6 31

Ana Tudor @anatudor.bsky.social · 16h

Old code in general is a thing with LLMs frontendmasters.com/blog/chatgpt...

ChatGPT and the proliferation of obsolete and broken solutions to problems we hadn’t had for over half a decade before its launch

It was a lovely day on the internet when someone asked how to CSS animated gradient text like ChatGPT’s “Searching the web” and promptly got an answer saying “Have you tried asking ChatGPT? Here’s wha...

frontendmasters.com

1 9

Ana Tudor @anatudor.bsky.social · 23h

I know that, but from a practical standpoint, `curve` doesn't work in Firefox at this point even with the flag enabled (`arc` does). At the same time, if you do have the flag enabled, the `@supports` test with a `curve` in it passes, so in addition to `shape()` failing, the fallback fails too.

Ana Tudor @anatudor.bsky.social · 1d

Also in theses cases, it's really useful to either min the height to twice the rounding size or max the rounding to half the height.

Ana Tudor @anatudor.bsky.social · 1d

Did something similar with `arc` instead of `curve`
codepen.io/thebabydino/...

`arc` is already supported in Firefox behind a flag. While `curve` isn't, but the `@supports` test with a `curve` path still passes, so then it doesn't even use the fallback.

Cool concave rounding header component

Mentioned in my [Obsessing Over Smooth `radial-gradient()` Disc Edges](https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edge...

codepen.io

3 3

Ana Tudor @anatudor.bsky.social · 1d

Don't miss your flight. I once heard my name called because I was so lost in CSS, it didn't register with me people were boarding.

1 2

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Jul 20

#tinyCSStip: sphere volume distribution with polar coordinates!

u = rand(0, 1)
v = rand(0, 1)
w = rand(0, 1)

θ = 2·π·u
φ = acos(2·v - 1) - π/2

❌ DON'T (middle cluster)
r = R·w

✅ DO
r = R·∛w

➞ x,y,z
x = r·cos(φ)·sin(θ)
y = r·sin(φ)
z = r·cos(φ)·cos(θ)

https://codepen.io/thebabydino/pen/abLRNqV

Uniform distribution of dots within the volume of a sphere.

1 1

Ana Tudor @anatudor.bsky.social · 1d

For over a decade, by far my most popular Stack Overflow answer codepen.io/thebabydino/...

#CSS

Arched menu (no JS, no SVG)

2015 version of [a menu I created back in 2012](http://dabblet.com/gist/3979221/cb69c5e8ccf0745fff2c94b47b27b108931f1a15) to answer [this SO question](...

codepen.io

Ana Tudor @anatudor.bsky.social · 1d

Little seasonal thing: candy 🍬 ghost 👻 buttons, 3 techniques in one @codepen.io demo
codepen.io/thebabydino/...

Detailed explanation of the how behind in this @css-tricks.bsky.social post css-tricks.com/css-ing-cand...

Bonus: a hover animated, Chrome-only version codepen.io/thebabydino/...

#CSS

Same buttons in various stages of hover, when the filling content-box get XOR-ed with the text.

2 4

Ana Tudor @anatudor.bsky.social · 1d

An older little #canvas demo on @codepen.io: codepen.io/thebabydino/...

mouseover the 🔺🔻 - your eyes see what your mind wants to see 😼

#JS

Screenshot of the linked CodePen demo. A grid of randomly oriented, randomly smaller or bigger equilateral triangles. This grid of triangles is painted using a rainbow radial gradient at the mouse cursor position, with triangles further away from the cursor also fading a little.

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Jun 18

Turn black to red CSS linear gradient into step one with a super simple #SVG #filter: interactive demo allowing to drag a slider to change the number of steps n and see how the visual result and relevant part of the filter code change.

@codepen.io demo codepen.io/thebabydino/...

Feedback?

#CSS

Red channel n steps gradient - the interactive demo

...

codepen.io

3 3 16

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · May 20

A little simple corner only gradient border on @codepen.io: codepen.io/thebabydino/...

Allows for semi-transparent background. Minimal code, easy to tweak to your needs, just change the variables. Heavily commented. Corner spacing around text adjusts with border rounding.

#CSS

Corner-only border (allows for corner rounding & gradient border)

Continuous gradient border, but only at the rounded corners. The element also has a transparent background through which we can see the image backdrop ...

codepen.io

1 7

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Oct 16

Someone hearted my orbits loader so I just had to scramble to quickly update it to use CSS grid instead of absolute positioning, CSS trig instead of precomputing tan in the Pug & passing it to the #CSS as a custom property & individual transform functions.
On @codepen.io 👉 codepen.io/thebabydino/...

Pastel balls going around on concentric orbits. The bigger the orbit, the more balls on it.

3 18

Ana Tudor @anatudor.bsky.social · 1d

One of my earliest #3D @codepen.io demos got a '25 remake codepen.io/thebabydino/...

Uses #CSS variables + trigonometric functions. If you've ever looked at the MDN trig function examples & wondered "why would I ever use that?" - I get it, those are bad examples. This demo has better ones.

#Maths

Pure CSS Rotating Spiral Image Gallery

2025 remake using modern CSS. --- If the work I've been putting out since early 2012 has helped you in any way or you just like it, then please remem...

codepen.io

Reposted by Ana Tudor

rem / Remy Sharp @remysharp.com · 1d

We don't have a sponsor for #FFConf 2025 scholarship programme (we didn't last year too) I really don't want to have to add this terrible sticker again…

The sponsorship allows us budget not only for ticket allocation, but also travel and hotel for under represented groups.

💌 [email protected]

A crappy 90's style clipart that reads "Rem & Jules" being the scholarship sponsors.

1 6 4

Ana Tudor @anatudor.bsky.social · 1d

A little pure #CSS demo I made a while back on @codepen.io: codepen.io/thebabydino/...

Ana Tudor @anatudor.bsky.social · 1d

Because someone just hearted this demo I made over half a decade ago on @codepen.io:

codepen.io/thebabydino/...

It's a pure #CSS Platonic solids gallery. They animate on hover/ tap. All is computed, there are no magic numbers.

#Maths #3D #Geometry

Pure CSS Platonic solids gallery (fully responsive, hover/ tap to animate)

Both the shapes and the shading are pure CSS. The polygonal faces are created using `clip-path`, so the demo only works in modern browsers supporting t...

codepen.io

2 20

Ana Tudor @anatudor.bsky.social · 2d

Firefox bug 🪲 bugzilla.mozilla.org/show_bug.cgi...

#CSS #bug #Firefox

1986467 - CSS aspect-ratio does not work on <img> by default

NEW (nobody) in Core - CSS Parsing and Computation. Last updated 2025-09-04.

bugzilla.mozilla.org

1 2

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · Sep 2

Hey, I made a thing for this week's complementaries challenge on @codepen.io: codepen.io/thebabydino/...

(if you're a Ko-fi/Patreon supporter, you may have already seen the pre-prettified version)

The description has a detailed "behind the demo" explanation.

#SVG #filter #CodePenChallenge #CSS

Screenshot of the Details page of my demo, where there's a detailed "behind the demo".

1 2 6

Ana Tudor @anatudor.bsky.social · 2d

BTW, the #CSS is heavily commented. And I've changed the images to something a bit more fitting for this time of year.

codepen.io/thebabydino/...

And now you can tell what gave me the idea for yesterday's challenge bsky.app/profile/anat...

Screenshot from my CodePen demo showing the heavily commented CSS and the visual result using Halloween-related images.

Ana Tudor @anatudor.bsky.social · 2d

Formal ones. Dress code requiring tuxedos.

Reposted by Ana Tudor

Camil Stoenescu @camilstoenescu.bsky.social · 2d

Emerging entropy #Bucharest #urbandecay #abandoned #oldhouse #architecture #decadence

1 10

Ana Tudor @anatudor.bsky.social · 2d

When you wake up in the morning, see yourself in the bathroom mirror and finally notice you went to bed with toothpaste lines on your cheek.

Ana Tudor @anatudor.bsky.social · 2d

It has been doable without anchor positioning for a long time. Using the indices of the grid trap cells.

1 2

Reposted by Ana Tudor

Ana Tudor @anatudor.bsky.social · 3d

Yet another post on handcoding simple #SVG shapes vs. just getting them drawn in a visual editor. Handcoded ones are fewer bytes & 100% accurate.

You can pass drawn ones through a tool like SVGOMG, but it won't change the actual curves to make them perfectly smooth, no lumps, perfectly symmetrical.

Screenshot of the SVG drawn in a visual SVG. The curves aren't perfectly smooth, there are ugly lumps when looking at it carefully. They also aren't perfectly symmetrical.

Screenshot of the same idea of an SVG shape, but handcoded. The curves are smooth, there are no lumps anywhere and they are perfectly symmetrical.

Code generated for the SVG drawn in a visual editor. The viewBox isn't properly chosen, so we have lots of ugly values with a few decimals. There are also more curves than necessary, they aren't smoothly connected, which leads to lumps and the number values can tell they aren't perfectly symmetrical. There's also a zero length horizontal line in the middle - this does nothing.

```
<svg viewBox='0 0 1 1'>
<path d='m1,0.502
h-0.076
c-0.045,0.005,-0.094,0.018,-0.124,0.052
c-0.05,0.055,-0.125,0.221,-0.175,0.331
c-0.05,0.11,-0.092,0.165,-0.1,0.055
c-0.012,-0.155,-0.023,-0.407,-0.025,-0.438
h0
c0,0,-0.013,-0.276,-0.025,-0.442
c-0.008,-0.11,-0.05,-0.055,-0.1,0.055
c-0.05,0.11,-0.125,0.276,-0.175,0.331
c-0.05,0.055,-0.15,0.055,-0.2,0.055
v-0.502
h1'/>
</svg>
```

Handcoded SVG. The viewBox is properly chosen so we can have integer numbers and easy symmetry in the path data. The number of curves is kept to a minimum and they are smoothly connected to avoid lumps.

```
<svg viewBox='-40 -40 80 80'>
<path d='M-40 0
c15 0 16-2 25-20
8-16 9-20 11-20
2 0 3 0 4 40
s2 40 4 40
c2 0 4-4 11-20
8-16 10-20 25-20
v-40 h-80'/>
</svg>
```

2 22