Have been working on something, any way to integrate this in a character sheet?

Please see the  Codepen link . I managed to have it running on pure CSS with no JS, now is there any way to integrate something like this in a Roll20 sheet so that the values are driven by attributes?

I guess the question is what is it supposed to do? I just see a weird green shape.

Looks like a radar array for stat display (commonly seen in sport sim games like FIFA 18)... works well for comparison overlays.

Scott C. said: I guess the question is what is it supposed to do? I just see a weird green shape. Ziechael said: Looks like a radar array for stat display (commonly seen in sport sim games like FIFA 18)... works well for comparison overlays. Ziechiel is correct. Changing the @Spd, @SAtk, @SDef, @HP, @Def and @Atk values changes the radar (that is the part I would like to be attribute-driven). Also note that the  radar's background doesn't load unless you have a cached copy, because Codepen is weird.

Ah, there's no way for CSS to pull this directly (that I'm aware of). If the values are bounded (have a min and Max) you could do it. EDIT now that I'm on my computer, here's a basic example since I'm not familiar with that %div .each do syntax (can you direct me to where this is detailed): HTML <input class='strength-value' type='hidden' name='attr_strength'> <input class='dexterity-value' type='hidden' name='attr_dexterity'> <div class='strength-representation'></div> <div class='dexterity-representation'></div> CSS .sheet-strength-value[value*="1"] ~ .sheet-strength-representation{ <!-- Do something to the strength representation here --> } .sheet-dexterity-value[value*="1"] ~ .sheet-dexterity-representation{ <!-- Do something to the strength representation here --> } <!-- Repeat for all the possible values of the attributes, this is obviously only practical if there is a reasonable limit on what they can be -->

Scott C. said: Ah, there's no way for CSS to pull this directly (that I'm aware of). If the values are bounded (have a min and Max) you could do it. Well, setting upper and lower limits Is not an issue (0-500 will handle anything the game can generate and then some).

see my edit, was on my phone before. I don't think that 0-500 is practical for the method I outlined unfortunately.

Scott C. said: see my edit, was on my phone before. I don't think that 0-500 is practical for the method I outlined unfortunately. Yeah, even if I shrink the range to a less generous one, I don't see that working. On the other hand I might be using that method for a separate thing that I was bashing my head against. Btw the HTML section is just a shorthand for the following: <div class='HexRadar'> <div class='tri1'></div> <div class='tri2'></div> <div class='tri3'></div> <div class='tri4'></div> <div class='tri5'></div> <div class='tri6'></div> </div>

Ah, cool. I've got a section that that would shrink quite handily

Do you have a link for where the syntax is described?

Scott C. said: Do you have a link for where the syntax is described? It's  Haml , based on Ruby. It can be compiled into normal HTML with the top-right menu of the tab in Codepen. I changed it to compiled HTML in my snippet for clarity.

oh, damn. Means it can't be used in char sheets :(

Scott C. said: oh, damn. Means it can't be used in char sheets :( You just need to compile it every time. I write sheets using pug, and it makes the code a lot shorter and readable.

I mean, true.