Graph View - Constellations Custom CSS Mockup

Share & showcase
,
1

People have been creating cool graphs styles for their custom CSS, so I wanted to throw some of my ideas on here if anyone is interested. I’m a designer, so I’m more comfortable in Sketch/Figma than writing CSS I’d feel comfortable sharing. I would love if someone took these ideas and remixed them with their own ideas for custom themes.

First one I was thinking about is some sort of lightweight constellations / outer space styles on the graph view.

Obsidian_Graph-Constellation
Obsidian_Graph-Constellation1590×1059 209 KB

It’s a simple gradient (w/ obsidian purples), SVG star background, and a glow effect on the graph. Would love to see a whole theme of subtle gradient outer-spacey dark mode vibes (inspired by the stars and gems on the current obsidian homepage).

No idea how feasible this is to implement in custom CSS. Would a subtle glow be a performance killer? The SVG stars and gradient seem pretty light-weight performance-wise.

24 Likes
2

Background should be pretty easy, no sure about the glow, since the canvas is drawn with WebGL – there are no “normal” HTML elements to style.

It does look super super cool though!

3

@Silver That makes sense that there’s nothing to style. But the custom CSS can affect the color of the nodes and lines right? Would there be a way to apply basic drop shadow/glow effects there? If that even makes sense as a question.

4

It’s just the fill color for now. There’s a glow filter option that might help (will need to look more into that).

1 Like
5

Whistle. That’s pretty nice. Thanks for that sketch!

Playing with CSS in Obsidian is pretty far down my to-do list, but I’m watching this thread in case someone gets to implementing this before I do.

1 Like
6

Here’s the same mockup without glow, since that seems easier to implement and still looks nice.

Obsidian_Graph_2020-05-31
Obsidian_Graph_2020-05-311590×1059 208 KB

Sketch CSS output for gradient value:

opacity: 0.8;
background-image: linear-gradient(134deg, #483699 0%, #06011C 100%);

Background Dark Grey (behind gradient) HEX: #161616

SVG Stars:
My stars are actually a screenshot from this Codepen: Pure CSS Parallax Pixel Stars. But I’m sure there are many similar minimal SVG star patterns out there to use. I think subtle animation (more subtle than the codepen) would be nice, but static SVG seems less intrusive and lightweight.

The gradient should be in front of everything to overlay color onto the graph and node points. With the gradient turned off it should look something like this:

Obsidian_Graph_No-Gradient
Obsidian_Graph_No-Gradient1590×1059 181 KB

2 Likes
7

I’m reaching the edges of my CSS knowledge here (but that’s nothing new).
I’m able to set a background on the canvas element, but I can’t seem to create anything that overlays the canvas, because of the way it renders.
With CSS it turns out you can set multiple backgrounds and choose a blend mode, so I was able to layer the gradient and a starry SVG under the graph, but I wasn’t able to do much beyond that.
It’s a start, but needs a bit more work to make it look really nice.

Pasted image 2
Pasted image 21858×1080 132 KB

canvas {
    background-color: #161616;
    background-image: var(--stars-svg), linear-gradient(134deg, rgba(72, 54, 153, 0.8) 0%, rgba(6, 1, 28, 0.8) 100%);
    background-blend-mode: soft-light;
}

.graph-view.color-fill {
  color: #afaaca;
}
.graph-view.color-circle {
  color: #ffffff;
}
.graph-view.color-line {
  color: #3d3566;
}
.graph-view.color-text {
  color: #afaaca;
}
.graph-view.color-fill-highlight {
  color: #11083f;
}
.graph-view.color-line-highlight {
  color: #afaaca;
}

html {
    --stars-svg: url("data:image/svg+xml,...");
}

I’ve left out the full SVG code for the sake of brevity (and because it was not a great image, to be honest)
I found a free starry .eps file here deleted the big star and the background, saved it as .svg and then used this tool to URL-encode the SVG data into a css background-image (in the --stars-svg: variable)
I’m sure you should be able to find / make a better starry SVG.

Plus you could play around with different blend modes, different gradients, stacking more gradients/SVGs, etc.

9 Likes
8

@death.au wow thanks for taking a crack at it!! I really like where you got so far, gonna make an attempt to mix in your code and see if I can work on the SVG stars and gradient!

9

@j.split Woah, you successfully summoned the magician! Cool collaboration! :+1:

2 Likes
10

This is so cool! I’m no astronomer, physicist or CSS writer, but now I’m imagining notes somehow ‘in orbit’, but I’m finding it difficult to think about more than a handful of notes like this.

In death.au’s example above, ‘000 Contents’ could be a static “sun”, with ‘css-class-selectors’ going around it like a planet, and ‘000 Index’ going around that like a moon. Maybe notes with sideways links (‘Selectors’, ‘FAQ’, ‘Howto’, ‘Markdown’) could pull each other into elliptical orbits around 000 Contents… I’m not sure how ‘My Wip’ might behave – no one can hear it scream?

Sorry if it’s a confused and completely unoriginal flight of fancy but regardless, I’m really excited about what graph view(s) can be/do and I hope to see more of this and other projects like it in the future

4 Likes
12

Hi all, is there any new development in this “feature” - I would like to have a JPG image as a background for the graph view. I didn’t manage to get it work with CSS. Any tips how to achieve this?
Thanks and regards Stefan

2 Likes
13

Agreed. I think background images could be useful for many things in Graph view and Local Graphs, especially if note positions are ever more easily custom rearranged and saved. Don’t get me wrong, I love the improvements to the graph with filters, local, forces, tags, etc. I just have a certain workflow in mind that would hinge on these features to be really helpful. Here’s a link to my old feature request: Local graph view dependent background images?

Thanks

14

Does anyone have a complete CSS for graph view ?
I cant get the glow and background to work :confused:

15

Sorry, this may sound ridiculous, but I am new to CSS and coding generally. Where does this code go? I have tried copying and pasting it and adding it as a file in the snippet folder, but all the files of CSS that deal with graph look and feel do not seem to work. Some help please. Thank you!

16

Hi, @KINGDOMAN I followed instructions I found there, Obsidian CSS , added the file in new snippets folder and it “worked”, although I had an issue with the canva style because my current theme is partly transparent. It should work for you that way too, just modify stuffs from the new style added if you have any doubt. If it changes nothing, it might not be added well.

2 Likes