Pure HTML/CSS Demo Equals Nothing

[Shadow]

Traversing around, something caught my attention for its quirkiness.

Doraemon, built with pure HTML and CSS.

https://ladybegood.github.io/doraemon/

It doesn't show up at all on latest Pale Moon 34.3.1. It does on Librewolf.

[jobbautista9]

I don't think you can use radial-gradient() as a value for background-image?

EDIT: Nevermind but it seems there's something wrong with this particular radial-gradient when I enable error reporting for CSS:

Code: Select all

Timestamp: 7/1/2026 19:27:43
Warning: Property contained reference to invalid variable.  Error in parsing value for ‘background-image’.  Falling back to ‘initial’.
Source File: https://ladybegood.github.io/doraemon/
Line: 36, Column: 580
Source Code:
                radial-gradient(ellipse 530% 675% at -85% 300%, var(--blue) 44.1%, var(--black) 0 45%, transparent 0),

[adoxa]

Looks like there are three issues:

1. calc is not supported within radial-gradient;
2. single-value form of linear-gradient is not supported;
3. it's simply too big.

(1) can be solved by simply performing the calculation; (2) can be solved by duplicating the color; (3) can be solved by removing indentation. Here's a userstyle that does all that.

Code: Select all

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("https://ladybegood.github.io/doraemon/") {
        .doraemon {
background-image:
/* nose */
radial-gradient(at 40% 40%, var(--white) 12%, transparent 0),
radial-gradient(var(--red) 42%, var(--black) 0 49.5%, transparent 0),

/* left pupil */
radial-gradient(ellipse 65% 100%, transparent 18%, var(--black) 0 49.5%, transparent 0),

/* right pupil */
radial-gradient(ellipse 65% 100%, transparent 18%, var(--black) 0 49.5%, transparent 0),


/* left eye ball */
radial-gradient(ellipse 83% 100%, var(--white) 45%, var(--black) 0 49.5%, transparent 0),

/* right eye ball */
radial-gradient(ellipse 83% 100% at 51%, var(--white) 45%, var(--black) 0 49.5%, transparent 0),

/* nose to mouth line */
linear-gradient(to right, transparent 0%, var(--black) 0 3%, transparent 0),

/* mouth */
radial-gradient(ellipse 308% 300% at 50% 0.25%, transparent 20%, var(--black) 0 20.4%, transparent 0),

/* whishker 1 */
linear-gradient(201deg, transparent 20%, var(--black) 0 22%, transparent 0),

/* whishker 2 */
linear-gradient(184deg, transparent 20%, var(--black) 0 22.75%, transparent 0),

/* whishker 3 */
linear-gradient(166deg, transparent 20%, var(--black) 0 22.5%, transparent 0),

/* whishker 4 */
linear-gradient(158.5deg, transparent 20%, var(--black) 0 22.5%, transparent 0),

/* whishker 5 */
linear-gradient(177deg, transparent 20%, var(--black) 0 22.5%, transparent 0),

/* whishker 6 */
linear-gradient(194deg, transparent 20%, var(--black) 0 22.5%, transparent 0),

/* left foot */
radial-gradient(201.9852% 70.9365% at 42.5% 19%, transparent 43.6%, var(--black) 0 49%, transparent 0),
radial-gradient(440% 200% at 180% -17%, transparent 43.6%, var(--black) 0 53%, transparent 0),
radial-gradient(167.542% 104.3195% at 128% 51%, transparent 43.6%, var(--black) 0 50%, transparent 0),
radial-gradient(201.9852% 70.9365% at 42.5% 19%, transparent 44%, var(--black) 0 49.4%, transparent 0),
radial-gradient(299.812% 186.677% at -38% -29%, transparent 42.75%, var(--black) 0 51.5%, transparent 0),

/* right foot */
radial-gradient(201.9852% 70.9365% at 59% 19.25%, transparent 43.6%, var(--black) 0 49%, transparent 0),
radial-gradient(440% 200% at -80% -16.5%, transparent 43.6%, var(--black) 0 53.75%, transparent 0),
radial-gradient(167.542% 104.3195% at -29% 51%, transparent 43.6%, var(--black) 0 50%, transparent 0),
radial-gradient(201.9852% 70.9365% at 59.5% 19%, transparent 44%, var(--black) 0 49.4%, transparent 0),
radial-gradient(299.812% 186.677% at 135% -20%, transparent 42.75%, var(--black) 0 51.5%, transparent 0),

/* also bell */
radial-gradient(ellipse 200% 140% at 168% 55%, transparent 37%, var(--black) 0 48%, transparent 0),
radial-gradient(ellipse 220% 130% at -68% 59%, transparent 37%, var(--black) 0 48%, transparent 0),

/* bell inner circle */
radial-gradient(100% 90%, var(--brown) 20%, var(--black) 0 38.5%, transparent 0),

/* bell line */
linear-gradient(to right, var(--black) 16.75%, transparent 0),

/* bell top curve */
radial-gradient(ellipse 200% 100% at 51% 90%, transparent 37%, var(--black) 0 42.1%, transparent 0),

/* bell bottom curve */
radial-gradient(ellipse 200% 100% at 51% 90%, transparent 37%, var(--black) 0 42.1%, transparent 0),

/* bell fill */
linear-gradient(var(--yellow) 15%, transparent 0),
linear-gradient(var(--yellow) 25%, transparent 0),
linear-gradient(var(--yellow) 25%, transparent 0),

/* bell */
radial-gradient(ellipse 100% 90% at 49.75% 112%, var(--yellow) 44%, var(--black) 0 50%, transparent 0),
radial-gradient(ellipse 100% 98% at 50.75% 7%, var(--yellow) 44%, var(--black) 0 49%, transparent 0),

/* strap sides */
radial-gradient(ellipse 120% 100% at 135% 50%, transparent 53.75%, var(--black) 0 71%, transparent 0),
radial-gradient(ellipse 120% 100% at -35% 50%, transparent 53.75%, var(--black) 0 71%, transparent 0),

/* strap */
radial-gradient(ellipse 290% 100% at 90% -12.7%, transparent 38%, var(--black) 0 41.5%, transparent 0),
radial-gradient(ellipse 310% 100% at 7% -12.5%, transparent 38%, var(--black) 0 41.5%, transparent 0),
radial-gradient(ellipse 280% 100% at 51% 22%, transparent 38%, var(--black) 0 39.5%, var(--red) 0 45%, transparent 0),

linear-gradient(var(--red), var(--red)),
linear-gradient(190deg, transparent 40%, var(--red) 0 50%, transparent 0),
linear-gradient(transparent 40%, var(--red) 0 50%, transparent 0),
linear-gradient(transparent 40%, var(--red) 0 50%, transparent 0),
linear-gradient(173deg, transparent 40%, var(--red) 0 50%, transparent 0),

/* pocket bottom stroke */
radial-gradient(ellipse 100% 94.33% at 50% 0%, var(--white) 40%, var(--black) 0 42%, transparent 0),

/* pocket top stroke */
radial-gradient(ellipse 500% 100% at 50% 80%, transparent 40%, var(--black) 0 42%, transparent 0),

/* belly */
radial-gradient(ellipse 100% 93.5% at 50% 32%, var(--white) 40%, var(--black) 0 41.5%, transparent 0),

/* groin */
radial-gradient(ellipse 200% 110% at 50% 70%, transparent 40%, var(--black) 0 53%, transparent 0),

/* thigh */
linear-gradient(to right, transparent 20%, var(--black) 0 27%, transparent 0),


/* head inner left */
radial-gradient(ellipse 280% 280% at 126.5% 135.5%, transparent 45.1%, var(--black) 0 46.6%, var(--blue) 0 55%, transparent 0),
radial-gradient(ellipse 370% 370% at 198.5% 44%, transparent 45.1%, var(--black) 0 46.1%, var(--blue) 0 49%, transparent 0),
radial-gradient(ellipse 500% 500% at 232.75% -66%, transparent 45.1%, var(--black) 0 45.9%, var(--blue) 0 47%, transparent 0),

/* head inner right */
radial-gradient(ellipse 280% 280% at -25.75% 135.5%, transparent 45.1%, var(--black) 0 46.6%, var(--blue) 0 55%, transparent 0),
radial-gradient(ellipse 370% 370% at -116.6% 44%, transparent 45.1%, var(--black) 0 46.1%, var(--blue) 0 49%, transparent 0),
radial-gradient(ellipse 500% 500% at -144.25% -66%, transparent 45.1%, var(--black) 0 45.9%, var(--blue) 0 46.75%, transparent 0),

/* head outer */
radial-gradient(ellipse 350% 100% at 50% 60%, var(--blue) 45.75%, var(--black) 0 51.75%, transparent 0),
radial-gradient(ellipse 465% 300% at 140% 150%, var(--blue) 45.25%, var(--black) 0 47.5%, transparent 0),
radial-gradient(ellipse 465% 300% at -35% 150%, var(--blue) 45.25%, var(--black) 0 47.25%, transparent 0),
radial-gradient(ellipse 2400% 1000% at -860% 300%, var(--blue) 45.75%, var(--black) 0 46.5%, transparent 0),
radial-gradient(ellipse 250% 250% at -45% 50%, transparent 42.5%, var(--blue) 0 45.25%, var(--black) 0 46.3%, transparent 0),
radial-gradient(ellipse 610% 610% at -174% -110%, transparent 44.25%, var(--blue) 0 45.5%, var(--black) 0 46.4%, transparent 0),


/* head left */
radial-gradient(ellipse 495% 495% at -140% 192%, var(--blue) 45.5%, var(--black) 0 46.9%, transparent 0),
radial-gradient(ellipse 250% 250% at 145% 50%, transparent 43%, var(--blue) 0 45.25%, var(--black) 0 46.3%, transparent 0),
radial-gradient(ellipse 390% 390% at 175% 175.25%, transparent 35%, var(--blue) 0 45.25%, var(--black) 0 46.6%, transparent 0),
radial-gradient(ellipse 610% 610% at 279.25% -110%, transparent 44.25%, var(--blue) 0 45.5%, var(--black) 0 46.4%, transparent 0),

linear-gradient(var(--blue), var(--blue)),
linear-gradient(var(--blue), var(--blue)),
linear-gradient(var(--blue), var(--blue)),
linear-gradient(var(--blue), var(--blue)),


/* left torso */
radial-gradient(900% 900% at 418% 39%, transparent 40.25%, var(--black) 0 40.5%, transparent 0),
radial-gradient(500% 1200% at 251% -200%, transparent 43.5%, var(--black) 0 45.25%, transparent 0),

radial-gradient(900% 900% at 418% 39%, transparent 38.75%, var(--blue) 0 40.5%, transparent 0),
radial-gradient(500% 1200% at 251% -200%, transparent 30%, var(--blue) 0 45.25%, transparent 0),

/* right torso */
radial-gradient(900% 900% at -324% 39%, transparent 40.25%, var(--black) 0 40.5%, transparent 0),
radial-gradient(500% 1200% at -144% -200%, transparent 43.6%, var(--black) 0 45.25%, transparent 0),

radial-gradient(900% 900% at -324% 39%, transparent 38.75%, var(--blue) 0 40.5%, transparent 0),
radial-gradient(500% 1200% at -144% -200%, transparent 30%, var(--blue) 0 45.25%, transparent 0),

/* left hand */
radial-gradient(var(--white) 44%, var(--black) 0 49.5%, transparent 0),

/* left arm strokes */
radial-gradient(ellipse 816% 640% at 360% -100%, transparent 37.1%, var(--blue) 0 44.5%, var(--black) 0 44.95%, transparent 0),
radial-gradient(ellipse 530% 675% at -85% 300%, var(--blue) 44.1%, var(--black) 0 45%, transparent 0),


linear-gradient(var(--blue) 0, var(--blue) 0),
linear-gradient(var(--blue) 0, var(--blue) 0),

/* right hand */
radial-gradient(var(--white) 44%, var(--black) 0 49.5%, transparent 0),

/* right arm strokes */
radial-gradient(400% 400% at -98.75% 170%, var(--blue) 43.25%, var(--black) 0 44%, transparent 0),
radial-gradient(600% 600% at 180% -190%, var(--blue) 43.25%, var(--black) 0 46%, transparent 0),

/* right arm fills */
linear-gradient(var(--blue) 0, var(--blue) 0),
linear-gradient(var(--blue) 0, var(--blue) 0),
linear-gradient(var(--blue) 0, var(--blue) 0),

/* extra */
linear-gradient(var(--blue) 6%, transparent 0),
linear-gradient(var(--blue) 6%, transparent 0),
linear-gradient(var(--blue) 99%, transparent 0),
linear-gradient(var(--blue) 42%, transparent 0),
linear-gradient(var(--blue) 42%, transparent 0)

!important;
       }
}

[athenian200]

Yeah, I actually remember being very close to a solution with this at one point... years ago. I knew calc wasn't supported with radial-gradient and was working on a fix, the issue was ultimately that the code surrounding that was done in a very complex way and mixed together with something else that looked very similar, so it was hard to get right. And just when I was getting close, so many other things got dumped on my plate and the project fell by the wayside.

Was admittedly wondering if this was so niche no one would complain about it, but someone finally did, so now I have an excuse to pick it up again...

[Moonchild]

single-value form of linear-gradient is not supported;

Q: In what situation does it make sense to have a single-value form of linear-gradient? How can you have a gradient if you don't have a start and end value that differ?

[BenFenner]

It doesn't show up at all on latest Pale Moon 34.3.1. It does on Librewolf.

I find it odd that Librewolf shows the site, since it shows me a blank white page on current Firefox.

[Moonchild]

I find it odd that Librewolf shows the site, since it shows me a blank white page on current Firefox.

shows on Firefox for me. Not that I understand the reason for making that image with gradients other than "because I can" because that's really the kind of thing you'd want to use a vector format for anyway.

[solitude]

Off-topic:

I find it odd that Librewolf shows the site, since it shows me a blank white page on current Firefox.

shows on Firefox for me. Not that I understand the reason for making that image with gradients other than "because I can" because that's really the kind of thing you'd want to use a vector format for anyway.

There's really CoPilot in the sidebar...