#+title: Svg Glitter Line
#+date: <2023-11-18 Sat>

I generated a path with https://www.tldraw.com/ and then recolored it. It's drawn twice, once with a rainbow gradient (see svg filter #gradient in the source) and once with sparkles (see svg filter #noise in the source).

#+begin_export html
<figure>
  <svg viewBox="-50 -100 600 150" style="overflow:visible;background:#eee">
    <defs>
    <linearGradient id="gradient">
        <stop offset="0%"   stop-color="hsl(  0, 50%, 50%)"/>
        <stop offset="10%"  stop-color="hsl( 60, 50%, 50%)"/>
        <stop offset="33%"  stop-color="hsl(120, 50%, 40%)"/>
        <stop offset="50%"  stop-color="hsl(180, 50%, 50%)"/>
        <stop offset="66%"  stop-color="hsl(240, 50%, 50%)"/>
        <stop offset="100%"  stop-color="hsl(360,50%, 50%)"/>
    </linearGradient>
      <filter id="noise" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
        <!-- frequency controls the size of the glitter -->
        <feTurbulence type="fractalNoise" seed="99720" baseFrequency="1.5" numOctaves="1" result="noise1"/>
        <feComponentTransfer in="noise1" result="holes">
          <feFuncR type="linear" intercept="2" />
          <feFuncG type="linear" intercept="2" />
          <feFuncB type="linear" intercept="2" />
          <!-- this controls how many sparkles we get -->
          <feFuncA type="linear" intercept="-150" slope="210" />
        </feComponentTransfer>          
        <feComposite in="SourceGraphic" in2="holes" operator="in" result="glitter" />
      </filter>
    </defs>
    <!-- I drew this line in tldraw and copied the svg path -->
    <path stroke-linecap="round" fill="url(#gradient)" 
          d="M-3.2507,-7.9426 Q-1.0046,-9.9688 3.7444,-13.6411 T12.8272,-19.869 20.5845,-24.2361 28.148,-28.2953 35.853,-32.2936 43.5303,-36.152 50.7335,-39.7003 57.0457,-42.6516 63.5259,-45.7976 70.1846,-49.385 77.8163,-53.6959 86.5902,-58.4439 95.7643,-62.9208 104.1311,-66.3551 111.4723,-68.6042 119.6727,-70.1953 127.9205,-70.8643 134.9981,-69.1725 141.5262,-64.1808 146.8326,-58.2473 152.1154,-52.7034 158.5062,-47.599 165.1658,-44.5517 172.5797,-43.4222 180.0568,-43.1634 186.8381,-43.7635 194.0591,-45.3532 201.9258,-47.6259 210.5798,-50.6092 218.4557,-53.4908 226.8075,-56.2649 235.76,-59.3065 243.3517,-62.1231 250.9448,-64.7731 258.402,-67.2725 265.6349,-69.594 272.5635,-71.6997 279.2553,-73.6469 289.0579,-76.1396 301.7772,-78.9678 314.7999,-81.3308 324.9474,-82.8107 331.9752,-83.548 339.0118,-84.1136 345.8667,-84.4766 355.6438,-84.7744 367.6262,-85.0588 378.3882,-85.2807 388.3882,-85.2166 397.7962,-84.722 406.4018,-84.0264 414.129,-83.2897 422.259,-82.3924 430.413,-81.6102 438.2234,-80.8944 443.6825,-80.012 446.1413,-78.7654 448.0733,-76.7989 449.2763,-74.3185 449.6242,-71.5838 449.0807,-68.8811 447.7027,-66.4935 445.6344,-64.6709 443.0924,-63.6041 440.3428,-63.4049 437.6736,-64.0941 435.3642,-65.5995 433.6563,-67.7635 432.7289,-70.3595 432.6789,-73.1158 433.5117,-75.7438 435.1401,-77.9683 437.3935,-79.5563 440.036,-80.3417 442.7909,-80.2422 445.3699,-79.2683 447.5028,-77.5218 448.9665,-75.1856 449.6075,-72.5045 449.3589,-69.7589 448.2466,-67.2365 446.3871,-65.2014 443.9751,-63.8665 441.2631,-63.3717 439.8678,-63.3464 435.69,-63.8956 427.8919,-64.944 420.1203,-66.1448 412.3305,-67.353 404.7768,-68.3623 396.547,-69.3286 387.8926,-70.1183 378.4479,-70.515 367.7725,-70.621 356.0132,-70.5801 343.4011,-70.1945 330.234,-69.1346 317.0855,-67.3708 304.569,-65.2103 292.3728,-62.7275 279.7705,-59.5587 269.859,-56.6684 262.9057,-54.3498 255.7341,-51.75 248.5912,-48.9844 241.2673,-45.8485 232.7301,-41.7417 222.2828,-36.8665 211.8719,-32.5847 202.7026,-29.4111 193.7537,-27 184.5988,-25.4553 176.1411,-25.0267 168.5255,-25.4479 160.1875,-27.0777 152.0466,-30.3477 144.9418,-34.9916 138.5226,-40.6816 133.2021,-46.6333 127.2295,-51.5407 119.7299,-52.9141 111.3892,-50.9501 102.9027,-47.7268 94.6575,-43.5305 86.4169,-38.8439 78.5674,-34.2591 71.2344,-30.2708 64.4489,-26.9957 58.0122,-24.0473 50.9717,-20.743 43.3818,-17.2384 35.6081,-13.6156 28.1131,-9.9437 21.1019,-6.2531 13.7044,-1.2604 7.6823,3.8252 4.1556,6.743 1.2587,7.82 -1.8298,7.7064 -4.6397,6.4195 -6.7432,4.1552 -7.8201,1.2583 -7.7063,-1.8302 -6.4193,-4.64 -5.4966,-5.9167 -3.2507,-7.9426 Z"/>
    <path stroke-linecap="round" fill="#adb5bd" filter="url(#noise)"
          d="M-3.2507,-7.9426 Q-1.0046,-9.9688 3.7444,-13.6411 T12.8272,-19.869 20.5845,-24.2361 28.148,-28.2953 35.853,-32.2936 43.5303,-36.152 50.7335,-39.7003 57.0457,-42.6516 63.5259,-45.7976 70.1846,-49.385 77.8163,-53.6959 86.5902,-58.4439 95.7643,-62.9208 104.1311,-66.3551 111.4723,-68.6042 119.6727,-70.1953 127.9205,-70.8643 134.9981,-69.1725 141.5262,-64.1808 146.8326,-58.2473 152.1154,-52.7034 158.5062,-47.599 165.1658,-44.5517 172.5797,-43.4222 180.0568,-43.1634 186.8381,-43.7635 194.0591,-45.3532 201.9258,-47.6259 210.5798,-50.6092 218.4557,-53.4908 226.8075,-56.2649 235.76,-59.3065 243.3517,-62.1231 250.9448,-64.7731 258.402,-67.2725 265.6349,-69.594 272.5635,-71.6997 279.2553,-73.6469 289.0579,-76.1396 301.7772,-78.9678 314.7999,-81.3308 324.9474,-82.8107 331.9752,-83.548 339.0118,-84.1136 345.8667,-84.4766 355.6438,-84.7744 367.6262,-85.0588 378.3882,-85.2807 388.3882,-85.2166 397.7962,-84.722 406.4018,-84.0264 414.129,-83.2897 422.259,-82.3924 430.413,-81.6102 438.2234,-80.8944 443.6825,-80.012 446.1413,-78.7654 448.0733,-76.7989 449.2763,-74.3185 449.6242,-71.5838 449.0807,-68.8811 447.7027,-66.4935 445.6344,-64.6709 443.0924,-63.6041 440.3428,-63.4049 437.6736,-64.0941 435.3642,-65.5995 433.6563,-67.7635 432.7289,-70.3595 432.6789,-73.1158 433.5117,-75.7438 435.1401,-77.9683 437.3935,-79.5563 440.036,-80.3417 442.7909,-80.2422 445.3699,-79.2683 447.5028,-77.5218 448.9665,-75.1856 449.6075,-72.5045 449.3589,-69.7589 448.2466,-67.2365 446.3871,-65.2014 443.9751,-63.8665 441.2631,-63.3717 439.8678,-63.3464 435.69,-63.8956 427.8919,-64.944 420.1203,-66.1448 412.3305,-67.353 404.7768,-68.3623 396.547,-69.3286 387.8926,-70.1183 378.4479,-70.515 367.7725,-70.621 356.0132,-70.5801 343.4011,-70.1945 330.234,-69.1346 317.0855,-67.3708 304.569,-65.2103 292.3728,-62.7275 279.7705,-59.5587 269.859,-56.6684 262.9057,-54.3498 255.7341,-51.75 248.5912,-48.9844 241.2673,-45.8485 232.7301,-41.7417 222.2828,-36.8665 211.8719,-32.5847 202.7026,-29.4111 193.7537,-27 184.5988,-25.4553 176.1411,-25.0267 168.5255,-25.4479 160.1875,-27.0777 152.0466,-30.3477 144.9418,-34.9916 138.5226,-40.6816 133.2021,-46.6333 127.2295,-51.5407 119.7299,-52.9141 111.3892,-50.9501 102.9027,-47.7268 94.6575,-43.5305 86.4169,-38.8439 78.5674,-34.2591 71.2344,-30.2708 64.4489,-26.9957 58.0122,-24.0473 50.9717,-20.743 43.3818,-17.2384 35.6081,-13.6156 28.1131,-9.9437 21.1019,-6.2531 13.7044,-1.2604 7.6823,3.8252 4.1556,6.743 1.2587,7.82 -1.8298,7.7064 -4.6397,6.4195 -6.7432,4.1552 -7.8201,1.2583 -7.7063,-1.8302 -6.4193,-4.64 -5.4966,-5.9167 -3.2507,-7.9426 Z"/>
  </svg>
</figure>
#+end_export

Context: https://twitter.com/redblobgames/status/1725935380271423921

#+begin_quote
Sponsorship should unlock premium colors, so that you can tell from a screenshot whether they're a free user or someone giving you money
#+end_quote

What I'd /really/ like is access to HDR brightness, so that the sparkles could be >100% brightness. Safari has support for wide gamut, but not HDR brightness, as far as I can tell, unless you use [[https://kidi.ng/wanna-see-a-whiter-white/][this trick]].

Source code: see [[file:index.org]]

#+begin_export html
<x:footer>
  <script defer="defer">
    // Animate the sparkles by changing the noise seed
    const filter = document.querySelector("#noise feTurbulence");
    setInterval(() => {
      filter.setAttribute("seed", Math.floor(100000*Math.random()));
    }, 100);
    // Note that this would be better with blue noise
    // rather than the pink/white noise that feTurbulence
    // gives. Especially if using https://momentsingraphics.de/BlueNoise.html you can
    // take slices -- try the slice= slider on 
    // https://www.redblobgames.com/x/1830-jittered-grid/
  </script>

  Created 18 Nov 2023; &#160;
  <!-- hhmts start -->Last modified: 18 Nov 2023<!-- hhmts end -->
</x:footer>
#+end_export