From 803fabbf648e52a879059663d01d74c80d827e46 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 3 Dec 2025 12:46:07 +0100
Subject: [PATCH] Use svg for snowflakes (#28306)

---
 src/components/ha-snowflakes.ts | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/ha-snowflakes.ts b/src/components/ha-snowflakes.ts
index 05a8416e92..fa88fb86ee 100644
--- a/src/components/ha-snowflakes.ts
+++ b/src/components/ha-snowflakes.ts
@@ -10,7 +10,6 @@ interface Snowflake {
   size: number;
   duration: number;
   delay: number;
-  blur: number;
 }
 
 @customElement("ha-snowflakes")
@@ -51,7 +50,6 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
         size: Math.random() * 12 + 8, // Random size between 8-20px
         duration: Math.random() * 8 + 8, // Random duration between 8-16s
         delay: Math.random() * 8, // Random delay between 0-8s
-        blur: Math.random() * 1, // Random blur between 0-1px
       });
     }
     this._snowflakes = snowflakes;
@@ -75,20 +73,26 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
       <div class="snowflakes ${isDark ? "dark" : "light"}" aria-hidden="true">
         ${this._snowflakes.map(
           (flake) => html`
-            <div
+            <svg
               class="snowflake ${this.narrow && flake.id >= 30
                 ? "hide-narrow"
                 : ""}"
               style="
                 left: ${flake.left}%;
-                font-size: ${flake.size}px;
+                width: ${flake.size}px;
+                height: ${flake.size}px;
                 animation-duration: ${flake.duration}s;
                 animation-delay: ${flake.delay}s;
-                filter: blur(${flake.blur}px);
               "
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              ❄
-            </div>
+              <path
+                d="M7.99997 7.94798e-06C8.21946 0.000772088 8.4326 0.0737292 8.60652 0.207627C8.78044 0.341524 8.90548 0.528923 8.96234 0.74092C9.01921 0.952918 9.00475 1.17774 8.92119 1.3807C8.83763 1.58366 8.68961 1.7535 8.49997 1.86401V5.65001L10.057 3.83301C9.9837 3.62535 9.98102 3.39931 10.0494 3.18997C10.1177 2.98064 10.2532 2.79971 10.4349 2.67526C10.6165 2.55082 10.8342 2.48982 11.0541 2.50174C11.274 2.51365 11.4838 2.59781 11.6509 2.74116C11.8181 2.8845 11.9333 3.07902 11.9786 3.29451C12.0239 3.51001 11.9968 3.73443 11.9015 3.93296C11.8063 4.13148 11.6481 4.29301 11.4516 4.39247C11.2552 4.49192 11.0314 4.52375 10.815 4.48301L8.49997 7.18401V7.50001H10.793L12.534 5.75801L12.523 5.71801L12.513 5.68701C12.4662 5.50294 12.4729 5.30938 12.5321 5.12896C12.5914 4.94853 12.7008 4.78871 12.8475 4.66818C12.9943 4.54766 13.1723 4.47141 13.3608 4.44836C13.5493 4.4253 13.7405 4.4564 13.912 4.53801L13.942 4.55101L13.995 4.58201L14.026 4.60201L14.063 4.62701L14.104 4.65801L14.133 4.68101C14.2187 4.75427 14.2914 4.8415 14.348 4.93901L14.368 4.97601L14.393 5.02701L14.405 5.05601C14.4556 5.17736 14.4818 5.30752 14.482 5.43901L14.477 5.54201C14.46 5.70024 14.4055 5.85213 14.318 5.98501L14.297 6.01801L14.265 6.06001L14.23 6.10001L14.207 6.12601C14.1842 6.15055 14.1601 6.17391 14.135 6.19601L14.104 6.22201L14.06 6.25401C14.0341 6.27191 14.0074 6.28859 13.98 6.30401L13.95 6.32201L13.88 6.35501L13.867 6.36101L13.809 6.38301L13.766 6.39701L13.736 6.40501L13.673 6.42001L13.661 6.42201C13.537 6.44499 13.4097 6.44432 13.286 6.42001L12.207 7.50001H14.135C14.245 7.30966 14.4148 7.16094 14.6179 7.07689C14.8211 6.99284 15.0463 6.97816 15.2587 7.03512C15.471 7.09209 15.6587 7.21752 15.7925 7.39197C15.9263 7.56642 15.9988 7.78014 15.9988 8.00001C15.9988 8.21987 15.9263 8.4336 15.7925 8.60805C15.6587 8.7825 15.471 8.90793 15.2587 8.96489C15.0463 9.02186 14.8211 9.00718 14.6179 8.92313C14.4148 8.83908 14.245 8.69035 14.135 8.50001H10.352L12.167 10.057C12.3745 9.98367 12.6005 9.98088 12.8098 10.049C13.0191 10.1172 13.2001 10.2526 13.3246 10.4341C13.4492 10.6156 13.5104 10.8331 13.4987 11.0529C13.487 11.2727 13.4031 11.4826 13.2601 11.6499C13.117 11.8171 12.9227 11.9326 12.7074 11.9782C12.492 12.0238 12.2676 11.9971 12.069 11.9022C11.8704 11.8073 11.7086 11.6495 11.6088 11.4533C11.509 11.2571 11.4767 11.0334 11.517 10.817L8.81597 8.50001H8.49997V10.793L10.241 12.534L10.281 12.523L10.312 12.513C10.393 12.493 10.476 12.483 10.56 12.483L10.663 12.487C10.8289 12.5042 10.9879 12.5626 11.1256 12.6569C11.2632 12.7512 11.375 12.8785 11.4508 13.0271C11.5267 13.1757 11.5641 13.3409 11.5598 13.5077C11.5554 13.6745 11.5094 13.8376 11.426 13.982L11.398 14.026L11.372 14.063L11.341 14.104L11.318 14.133L11.276 14.179L11.256 14.2L11.214 14.237C11.1413 14.3004 11.0598 14.353 10.972 14.393L10.943 14.405L10.888 14.425L10.845 14.44L10.818 14.447C10.7339 14.4699 10.6471 14.4816 10.56 14.482L10.458 14.477L10.372 14.464L10.363 14.462C10.2677 14.4429 10.1757 14.4098 10.09 14.364L10.063 14.349L10.013 14.319L9.97897 14.294L9.93897 14.264C9.88999 14.225 9.84479 14.1815 9.80397 14.134L9.77697 14.104L9.74497 14.06C9.72478 14.0317 9.70608 14.0023 9.68897 13.972L9.67697 13.949C9.56901 13.7459 9.5344 13.5117 9.57897 13.286L8.49997 12.207V14.135C8.69031 14.2451 8.83904 14.4148 8.92309 14.618C9.00714 14.8211 9.02182 15.0464 8.96485 15.2587C8.90789 15.4711 8.78246 15.6587 8.60801 15.7925C8.43356 15.9263 8.21983 15.9989 7.99997 15.9989C7.7801 15.9989 7.56638 15.9263 7.39193 15.7925C7.21748 15.6587 7.09205 15.4711 7.03508 15.2587C6.97812 15.0464 6.9928 14.8211 7.07685 14.618C7.1609 14.4148 7.30962 14.2451 7.49997 14.135V10.352L5.94197 12.168C5.99573 12.3187 6.01243 12.4801 5.99067 12.6386C5.96891 12.7971 5.90933 12.9481 5.81695 13.0787C5.72457 13.2093 5.60211 13.3158 5.45991 13.3891C5.31772 13.4624 5.15996 13.5005 4.99997 13.5C4.8595 13.5021 4.72018 13.4745 4.59105 13.4192C4.46193 13.3638 4.3459 13.2819 4.25052 13.1788C4.15513 13.0757 4.08252 12.9536 4.03741 12.8206C3.9923 12.6875 3.97569 12.5465 3.98868 12.4066C4.00167 12.2667 4.04395 12.1311 4.11278 12.0087C4.18161 11.8862 4.27545 11.7796 4.38819 11.6958C4.50094 11.612 4.63006 11.5528 4.76716 11.5222C4.90426 11.4916 5.04628 11.4901 5.18397 11.518L7.49997 8.81501V8.50001H5.20697L3.46497 10.241L3.47697 10.281L3.47997 10.293C3.49619 10.3472 3.50724 10.4028 3.51297 10.459L3.51797 10.56C3.5181 10.7167 3.48138 10.8713 3.4108 11.0112C3.34021 11.1512 3.23772 11.2725 3.11159 11.3656C2.98547 11.4586 2.83924 11.5207 2.68471 11.5468C2.53018 11.573 2.37167 11.5624 2.22197 11.516L2.20697 11.511C2.16591 11.497 2.12582 11.4803 2.08697 11.461L2.06197 11.451L2.04097 11.441L2.00397 11.417L1.97297 11.397C1.96039 11.3895 1.94836 11.3812 1.93697 11.372L1.89497 11.341L1.86597 11.318C1.75497 11.2227 1.66621 11.1043 1.60597 10.971L1.59397 10.943C1.5374 10.8066 1.51175 10.6594 1.51883 10.5119C1.52592 10.3644 1.56558 10.2203 1.63497 10.09L1.64997 10.063L1.67997 10.013L1.70497 9.97901L1.73497 9.93901L1.76897 9.89901L1.79197 9.87301C1.81478 9.84848 1.83881 9.82512 1.86397 9.80301L1.89597 9.77701L1.93897 9.74501C1.99532 9.70522 2.05565 9.67138 2.11897 9.64401L2.13197 9.63801L2.18997 9.61601L2.23297 9.60201L2.26297 9.59401L2.32597 9.57901L2.33797 9.57701C2.46198 9.55402 2.58921 9.5547 2.71297 9.57901L3.79297 8.50001H1.86497C1.75493 8.69035 1.58516 8.83908 1.382 8.92313C1.17883 9.00718 0.953616 9.02186 0.74126 8.96489C0.528903 8.90793 0.341271 8.7825 0.207451 8.60805C0.0736308 8.4336 0.00109863 8.21987 0.00109863 8.00001C0.00109863 7.78014 0.0736308 7.56642 0.207451 7.39197C0.341271 7.21752 0.528903 7.09209 0.74126 7.03512C0.953616 6.97816 1.17883 6.99284 1.382 7.07689C1.58516 7.16094 1.75493 7.30966 1.86497 7.50001H5.64997L3.83097 5.94201C3.68034 5.99581 3.51896 6.01254 3.3605 5.99078C3.20203 5.96903 3.05114 5.90943 2.92058 5.81703C2.79002 5.72462 2.68363 5.60214 2.61042 5.45992C2.53721 5.31771 2.49932 5.15996 2.49997 5.00001C2.4986 4.86007 2.52662 4.72141 2.58222 4.59298C2.63781 4.46456 2.71974 4.34923 2.82271 4.25446C2.92567 4.15969 3.04738 4.08758 3.17997 4.04281C3.31256 3.99803 3.45306 3.98158 3.59241 3.99453C3.73175 4.00747 3.86682 4.04951 3.98889 4.11794C4.11097 4.18637 4.21732 4.27966 4.30107 4.39177C4.38482 4.50389 4.4441 4.63233 4.47509 4.7688C4.50608 4.90527 4.50809 5.04672 4.48097 5.18401L7.18497 7.50001H7.49997V5.20701L5.75797 3.46501L5.71797 3.47701L5.68697 3.48501C5.50296 3.53184 5.30942 3.52532 5.12898 3.4662C4.94855 3.40708 4.78867 3.29782 4.66804 3.15118C4.54742 3.00455 4.47104 2.8266 4.44782 2.63815C4.42461 2.4497 4.45553 2.25853 4.53697 2.08701L4.55097 2.05701L4.58197 2.00401L4.60197 1.97301C4.63721 1.91818 4.67774 1.86694 4.72297 1.82001L4.74397 1.80001C4.7703 1.7745 4.798 1.75047 4.82697 1.72801L4.85497 1.70701L4.89497 1.67901C4.93707 1.65139 4.98119 1.62698 5.02697 1.60601L5.05597 1.59401C5.07404 1.58665 5.09239 1.57998 5.11097 1.57401L5.15397 1.55901L5.18097 1.55201C5.26512 1.52949 5.35186 1.51806 5.43897 1.51801L5.54197 1.52301L5.59497 1.53101C5.70468 1.548 5.8108 1.58315 5.90897 1.63501L5.93597 1.65001L5.98597 1.68001L6.01997 1.70501L6.05997 1.73501L6.09997 1.76901L6.12597 1.79201C6.1505 1.81482 6.17386 1.83885 6.19597 1.86401L6.22197 1.89601L6.25397 1.93901L6.27697 1.97401C6.28697 1.98801 6.29497 2.00301 6.30397 2.01801C6.42533 2.22806 6.4662 2.47506 6.41897 2.71301L7.49997 3.79301V1.86401C7.30878 1.7545 7.1592 1.5848 7.07456 1.38138C6.98992 1.17796 6.97498 0.952243 7.03206 0.739437C7.08915 0.52663 7.21505 0.338696 7.39013 0.204941C7.56522 0.0711855 7.77964 -0.000871075 7.99997 7.94798e-06Z"
+                fill="currentColor"
+              />
+            </svg>
           `
         )}
       </div>
@@ -128,16 +132,10 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
 
     .light .snowflake {
       color: #00bcd4;
-      text-shadow:
-        0 0 5px #00bcd4,
-        0 0 10px #00e5ff;
     }
 
     .dark .snowflake {
       color: #fff;
-      text-shadow:
-        0 0 5px rgba(255, 255, 255, 0.8),
-        0 0 10px rgba(255, 255, 255, 0.5);
     }
 
     .snowflake.hide-narrow {