Task: repeated SVG background changing border color every x seconds

[Arthoc]

Hey guys,

I’m really having trouble in doing research and describing my task, so please excuse me if it seems to be a bit unclear.

I have a svg like this: Octagon. I want to set that as a repeating background in my navigation.

After that, I want to target every hexagon separately and change their border-color (for svgs: stroke) with JS every x seconds, e.g. once a minute. In addition, I want to change the colors with a transition like a gradient, e.g. a color-gradient like this.

Is this possible? Can sth like this be done without performance issues? Could this even be responsive with scaling octagon-tiles when decreasing the viewport?

[Paulie_D]

Is this possible?

Probably

Can sth like this be done without performance issues?

No

Could this even be responsive with scaling octagon-tiles when decreasing the viewport?

Probably

Ok…off you go.

:)

[Arthoc]

I never mentioned that it would be easy ;-)

Any (maybe more useful) tips on how to get started? Especially regarding the JS animation and affecting the separate strokes…

[Paulie_D]

Unfortunately, we’re not that kind of forum.

We’re a ‘help you fix an issue’ kind of place…not a tutorial or ‘write it for you’ place.

Google will get you started..or a quick search here for SVG

https://css-tricks.com/search-results/?q=SVG

[Arthoc]

Unfortunately, we’re not that kind of forum.

That’s okay, don’t worry. I never wanted someone to write it for me :-)

Anyway, I’m coming back when I got more progress on this one – thank you so far and have a good one!

[Author]

Posts