Animated weather icons (.svg) for all Dark Sky values

Share your Projects! Dashboards & Frontend
1

Inspired by @arsaboo’s beautiful animated weather card, I created subtle, ‘flat’ style animated icons for all of the values currently reported by the Dark Sky API Pirate Weather API.

Hope y’all enjoy!

clear-day

clear-night

fog

partly-cloudy-day

partly-cloudy-night

rain

sleet

snow

cloudy

wind

To save:

  1. Copy the name text to your clipboard.
  2. Right-click on the image and select “Save image as…” (or similar).
  3. Paste text copied in step 1 (Ctrl+V).

Derived from icons made by Pixel Perfect from www.flaticon.com
EDIT: Fixed broken link.
EDIT 2: Fixed broken link.

8 Likes
2

To use with bramkragten’s weather-card some sizing and placement modifications are needed. Here’s the (raw) code I’m using:
weather-card.js

Note: The icons: option will need to be set in the card configuration to the local path you’re serving the icons from. eg:

type: custom:weather-card
entity: weather.dark_sky
icons: "/local/custom-lovelace/weather-card/icons/"
2 Likes
3

Wow, I can’t believe there is no interaction on this thread! I just downloaded the icons and replaced the custom weather card ones. This looks so clean! Thank you for this!

Btw: do you know a way to decrease the size of the temperature text, while retaining the icon? I’m rocking only the icon and temperature, but they seem to be linked. When decreasing the font, they both shrink :frowning:

This is my styling code btw (card-mod)

        style: |
          ha-card {
            height: 40px;
            background: var(--card-background-custom)
            font-variant: thin;
            font-family: Helvetica;
            font-size: 15px;
          }
1 Like
4

Glad you like them! I was pretty happy with how they turned out too, but I thought maybe I was just an oddball. :crazy_face:

The last section in weather-card.js is renderStyle(), and that contains the .css formatting for the text and icons. I just played around with it – refreshing alot – until I got it how I liked.

1 Like
5

Hi, I dowloaded them, but they are too bigger for where I want use them, I tried to edit them but the animation was lost
:frowning:

6

Thanks! I managed to get it working by changing my style options in card menu in the meantime. Looks clean with my setup now :smiley:

1 Like
7

Do you mean that you have resized the icons on your card?

8

Very nice @ASNNetworks. :sunglasses:

@pollinolas: Since they are Scalable Vector Graphics (.svg) they can be resized using .css without becoming distorted, just like fonts.
Where are you wanting to use them, maybe we can help with the styling?

9

hi,im using the icons from Custom Dark Sky Animated Weather Card in a custom button card.

10

If you’re referring to this, it allows for a size: option. You can either use a percentage (eg: size: 50%) that will dynamically change with the card size, or a fixed number of pixels (eg: size: 50px) that will remain static.

1 Like
11

I was looking at that right now, the ASNNetworks comment gave me the idea
thank you very much, i will try

1 Like
12

thats working,thaks a lot again

1 Like
13

Alright, great to hear!

14

So I’m using these along with the original ones.
The original ones seem to be 64x64px and these are 512x512? They also go right to the edge whereas the original ones don’t I think I need to edit them to give them some whitespace…

image
image445×566 32.4 KB

I also need to match the colours a bit better (yours is Monday’s one)

15

This looks a bit more consistent with the colours

image
image461×563 33.3 KB

The icons (new ones here) are a bit bigger. I also made some static versions of them…

16

I downloaded the icons, renamed them rain, partly-cloudy-day etc
Placed them in /local/custom-lovelace/weather-card/icons/
They didn’t show up with your edited weather-card.js
I also placed them in /local/custom-lovelace/weather-card/icons/animated
And that didn’t work either.
And yes, I added the icons location in the custom card

icons: "/local/custom-lovelace/weather-card/icons/animated"

What am I missing?
Thanks

17

are you talking to me?

18

Talking to anyone who will listen. :wink:

19

it’s not clear what weather card you are talking about. If it’s my one, then the icons are in the wrong place.

20

So I guess I’m not talking to you. Sorry. I am using the same custom weather-card the main poster is talking about.