A Fun Background for Tiddlywiki and/or Tiddler

[Mohammad]

1. Create a tiddler tagged with $:/tags/Stylesheet
2. Put the below as tiddler text

body{   background-image: radial-gradient(#ddd 1px, transparent 0), radial-gradient(#ddd 1px, transparent 0);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;}

3. save

Instead of body you may like to use .tc-tiddler-body or .tc-tiddler-fram

This apply a nice pattern as a background to Wiki
Change you palette, what do you see?

[Springer]

Mohammad, on my browser, your code yields rather distracting tiny dots. But removing the 1px and 0 numbers within the radial-gradient does yield something interesting. So I wonder whether this is what you intended:

body{   background-image: radial-gradient(#ddd, transparent), radial-gradient(#ddd, transparent);
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;}

[Mohammad]

Yours is nice!
The pattern in the OP creates tiny dots in the background

[arunnbabu81]

@Mohammad Not exactly related to this post.
I saw this interesting throb clock from Andrews TW adventures
https://t5a.github.io/#Throb%20Clock

How to add this as background image in addition to the background dots styles you provided in the OP

[Mohammad]

Really not sure how to do this! It is not a CSS nor an image!

[Springer]

Mohammad, I was assuming the tiny dots might not be intended, simply because they didn’t seem to take full advantage of the gradient and transparency aspects of the css. Also, on some light backgrounds I could hardly see the dots, while on dark backgrounds I found the dots could result in a bit of distraction around small text within transparent elements (in a sidebar, for example). Still, they are quite crisp and stylish.

I certainly like your idea of a background-image pattern that looks somewhat different against different backgrounds.

-Springer

[Mohammad]

I use this with Blanca! So the dots appear as a mild pattern in the background!

But you are right with dark palettes, you need to do some adjustment! For example for Cupertino Dark, I changed color from #ddd to #333

So I think the pattern works fine! but the colors needs to be adjusted.

[Mohammad]

I use this with Twilight

body,
.tc-tiddler-frame {   
	--mycolor: #FACB6822; /* the dot color  */
  
	
	background-image: radial-gradient(var(--mycolor) 1px, transparent 0),
		radial-gradient(var(--mycolor) 1px, transparent 0);
	background-position: 0 0, 25px 25px;
	background-size: 50px 50px;
}

[StS]

Another approach: Background in “edit-Mode” (Twilight):

.tc-tiddler-frame.tc-tiddler-edit-frame.tc-tiddler-exists { 
   background-image: radial-gradient(rgb(28, 28, 28), transparent), radial-gradient(rgb(28, 28, 28), transparent);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
}

[Mohammad]

Another fun background

Use A Fun Background for Tiddlywiki and/or Tiddler above but with below tiddler content

1. Create a tiddler tagged with $:/tags/Stylesheet
2. Make sure the tiddler type is text/css or see the comment by Alvaro below
3. Put the below as tiddler text

body {
  --sl: calc(2em + 1px) calc(3em + -.5px),
 transparent calc(3em + .5px);
 background: radial-gradient(#fff 1em, #000 calc(1em + 1px) 2em, #fff var(--sl)) 4.2426406871em 4.2426406871em, repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) 2.1213203436em 2.1213203436em, radial-gradient(#000 1em, #fff calc(1em + 1px) 2em, #000 var(--sl));
 background-size: 8.4852813742em 8.4852813742em, 16.9705627485em 16.9705627485em;
 background-blend-mode: lighten;
}

3. Save

Credit Ana Tudor

[Springer]

This last pattern does not seem to work (though the earlier one in this thread functions fine if I paste / swap in the same tiddler).

I don’t have enough css understanding to see where something might have gone wrong. But here’s a minimal site in which it’s not rendering…

https://minimalist-test-mode.tiddlyhost.com/#circles%20in%20background

@Mohammad

Another fun background

[Alvaro]

I think it is the problem with dash rule, your stylesheet have to start with \rules except dash.

I have other problem maybe with my computer, I can appreciate any background, but if I remove the line of background-blend-mode: lighten; then I can se the pattern in black and white.

[Springer]

Alvaro, yes the \rules except dash was the trick, in addition to choosing a theme with a non-white background color. I’ve also removed the strangely long decimal values.

\rules except dash

body {
  --sl: calc(2em + 1px) calc(3em + -.5px),
 transparent calc(3em + .5px);
 background: radial-gradient(#fff 1em, #000 calc(1em + 1px) 2em, #fff var(--sl)) 4em 4em, repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) 2em 2em, radial-gradient(#000 1em, #fff calc(1em + 1px) 2em, #000 var(--sl));
 background-size: 8em 8em, 16em 16em;
 background-blend-mode: lighten;
}