heavy ore
I'd like to have my Icons with gradients. Is this possible? Only reference I found was backgrounds but I've got that already lol.
I know how to gradient my buttons etc. But I've only managed to get single colors for icons.
It didn't work with theme, maybe theres some card-mod way i haven't figured out yet.
Would be sick if there'd be a global setting but I'm fine with a per card solution.
worthy wraith
What you're asking to do (if I understand correctly) is have the icon that may be white on black or black on white change the pixels that are one of those two colors to a gradient while leaving the other alone like a mask.
The only way I can think to do that is actually make the icon a mask with the icon itself transparent pixels where the background gradient shows through.
heavy ore
The icons are SVG and within that you could define a gradient fill. I was just interested if that's possible within HA
last pelican
The icons are SVG and within that you could define a gradient fill. I was just i...
To the best of my knowledge, there's no way to pass a variable into the SVG (such as color gradient) even if you embedded the SVG code into the dashboard yaml (as opposed to using an .svg file). Also, there is not a way for the SVG to "read" a variable from outside of its code (such as an entity's battery level.) Again, I could be mistaken on this but I could get a similar function to work when I was playing around with SVGs.
This is the closest I've gotten with gradient icons but I don't think they're the same as what you're wanting to do. In my example here, the icon color is based on the percentage on a red-to-green scale. (Honestly, I don't know how this voodoo works. I found the formula and adapted it for my use.)
type: custom:auto-entities
card:
type: entities
title: Motion Detector Batteries
card_mod:
style: |
ha-card {
background: black;
--primary-text-color: white;
}
filter:
include:
- entity_id: sensor.*_motion_detector_battery_level
options:
card_mod:
style:
hui-generic-entity-row $: |
{% set percentage = states(config.entity) | int %}
{% set r, g, b = 0, 0, 0 %}
{% if (percentage <= 51) %}
{% set r = 255 %}
{% set g = (5.0 * percentage) | round | int %}
{% else %}
{% set g = 255 %}
{% set r = (505 - 4.89 * percentage) | round | int %}
{% endif %}
{% set gradient = "#%0x" | format( r * 0x10000 + g * 0x100 + b * 0x1 ) %}
.state { color: {{ gradient }} }
state-badge { color: {{gradient}}; }
exclude:
- state: unavailable
- hidden_by: user
sort:
method: state
numeric: true
reverse: true
```**UPDATE**: I've since been able to generate the same look but using a template and still getting card_mod to work. It was *not* an easy task. Can post/send the code if anyone is interested but not posting it here at the moment since it is off-topic.
prisma elk
I'd like to have my Icons with gradients. Is this possible? Only reference I fou...
Maybe this one is of help: https://fvsch.com/svg-gradient-fill
prisma elk
To the best of my knowledge, there's no way to pass a variable *into* the SVG (s...
You can definately use variables, at least in embedded SVG's. This one is an embedded animated windrose SVG that I once used in a button_card. The bearing and the colors are variables taken from an entity and from a theme:
image: >
[[[
var bearing = states['weather.home'].attributes.wind_bearing;
return `
<svg width="60%" height="60%" viewBox="0 0 1952 1952" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="Layer1">
<path id="Circle" fill="var(--color-gold)" d="M975.913,0c538.62,0 975.912,437.292 975.912,975.913c0,538.62 -437.292,975.912 -975.913,975.912c-538.62,0 -975.912,-437.292 -975.912,-975.913c0,-538.62 437.292,-975.912 975.913,-975.912Zm-0,208.546c423.52,-0 767.366,343.846 767.366,767.367c0,423.52 -343.846,767.366 -767.367,767.366c-423.52,0 -767.366,-343.846 -767.366,-767.367c-0,-423.52 343.846,-767.366 767.367,-767.366Z"/>
<path id="Direction" fill="var(--color-gold)" transform="rotate(` + bearing + ` 976 976)" d="M975.915,1560.9l332.229,-1169.98l-339.429,122.592l-325.034,-122.592l332.234,1169.98Z"/>
<animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="2s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="rotate" values="0 976 976; 5 976 976; 0 976 976" />
</g>
</svg>
`;
]]]
@prisma elk Thanks for the example. I may have had issues with the correct usage of quotation marks (double, single, backtick). Looking at the code, I would think fill="var(--color-gold)" would not work properly, but it does. (Once I realized --color-gold was not a standard variable and I changed it to something like --red-color. I was also able to use fill="` + variables.color + `" where color is defined within the variables section of the card.
UPDATE: This also works: fill="${variables.color}".
I looked to see if I still had the example that I was working on and it looks like I don't have it any more. I may have to revisit this at some point. Could be useful for animated battery level SVG icons. 🤔
heavy ore
I tried a lot but couldn't get it to accept my gradient. I'll stick with the Icon background being colorful for now. But I learned a lot css through this exercise! Thanks you all for your time.
prisma elk
I tried a lot but couldn't get it to accept my gradient. I'll stick with the Ico...
It is not that complicated. Here is an example how the code of an SVG should look like:
<svg
stroke-width="0.00064"
stroke="url(#my-cool-gradient)"
fill="url(#my-cool-gradient)"
xml:space="preserve"
viewBox="0 0 64.00 64.00"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
id="Layer_1"
version="1.0"
>
<defs>
<linearGradient id="my-cool-gradient" x2="1" y2="1">
<stop offset="0%" stop-color="#a770ef" />
<stop offset="50%" stop-color="#cf8bf3" />
<stop offset="100%" stop-color="#fdb99b" />
</linearGradient>
</defs>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<path
d="M32,0C18.148,0,12,23.188,12,32c0,9.656,6.883,17.734,16,19.594V60c0,2.211,1.789,4,4,4s4-1.789,4-4v-8.406 C45.117,49.734,52,41.656,52,32C52,22.891,46.051,0,32,0z"
fill="url(#my-cool-gradient)"
></path>
</g>
</svg>
The color definitions can be exchanged by variables, like in my example or @last pelican 's. The SVG can then be embedded into your YAML file and the colors take their values from defined local variables or theme variables. I am mostly using button_cards for my dashboards. This way you could even inject CSS styles and produce a lot of fancy cards for HA.
heavy ore
But you'd have to define that per icon. It wouldn't be easily changeable
prisma elk
But you'd have to define that per icon. It wouldn't be easily changeable
It certainly depends on the number of icons you use, but you can easily change the code of any SVG file with Notepad++ or similar and make the necessary amendments to integrate the desired gradient. Those icons have a static gradient. To change the gradient per theme or variable you need to embed the icons in your code.
heavy ore
But if I'm doing that I could easily put together a batch of SVG icons in Illustrator. My goal was for it to be an "easy" configuration inside HA and make it adapt to entity icons etc.