make the filter more visible to the user

[Fake448]

[siglr]

We could probably play with the styling of the filter button.

Currently in the css:

#searchFiltersButton {
    position: absolute;
    top: 15px;
    left: 90px;
    width: 35px;
    height: 35px;
    z-index: 1200;
    color: white;
    border: none;
    padding: 5px 5px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    background: rgb(114 137 218 / 47%);
    border: 1px solid #ccc; /* Add a light gray border */
}

    #searchFiltersButton:hover {
        background: rgb(114 137 218 / 76%); /* Change background color on hover */
        border-color: #888; /* Change border color on hover */
        transform: scale(1.1); /* Scale up the icon on hover */
    }

We could probably have one more class "toggle" or "active" and change the background to be clearly visible, and then change the styling in the code when filter is active.

[Fake448]

i played around a little with gimp

maybe something like this... the png can also "easy" converted to svg, then the green can change color/size/flash....
still not 100% convinced, but i give it a try and let u know

[siglr]

We could make the green flash? Wow, that would be small but at the same time very visible. We can try.

[siglr]

Absolutely—you can make any element in an SVG “flash” (i.e. alternate visibility or color) using either SMIL animation, CSS animations, or JavaScript. Here are two simple approaches:

⸻

1. Using SMIL ()

Embed an tag directly on the shape you want to flash:

•	attributeName="opacity": toggles visibility
•	values="1;0;1": full → invisible → full
•	dur="1s": one‐second cycle
•	repeatCount="indefinite": loop forever

⸻

2. Using CSS animations

Assign a class to your target element and define a CSS @Keyframes rule:

<style> @Keyframes flash-fill { 0%,100% { fill: red; } 50% { fill: yellow; } } .flash { animation: flash-fill 1s infinite; } </style>

•	The <style> block lives inside the SVG.
•	animation: flash-fill 1s infinite: applies the keyframes continuously.

⸻

Tips & Compatibility
• SMIL () works in most browsers, but some modern browsers have partial SMIL support—Chrome requires a flag or polyfill, whereas Firefox and Safari support it natively.
• CSS animations on inline SVGs work in all current major browsers.
• If you’re embedding the SVG via or background-image, CSS inside the SVG still runs, but external CSS won’t target inside the file.
• For more control (e.g. user-triggered flashing), you can also toggle a class with JavaScript:

const el = document.querySelector('#myShape');
setInterval(() => el.classList.toggle('flash'), 1000);

Pick the method that best fits your project and browser-support requirements!

[Fake448]

never heard of SMIL, but if chatgpd is telling us, then we could give it a try xD