#
# File      : sak-svg-definitions.yaml
# Project   : Home Assistant
# Repository: https://github.com/AmoebeLabs/Home-Assistant-Config
#
# Author: Mars @ AmoebeLabs.com
# 
# License: CC BY-SA, https://creativecommons.org/licenses/by/4.0/
#
# -----
# Description:
#   Swiss Army Knife SVG <def> definitions
#   
###############################################################################
#sak_svg_definitions:
# Light color temperature gradient
# HA uses: linear-gradient( right, rgb(255, 160, 0) 0%, white 50%, rgb(166, 209, 255) 100% );
# Then converted to SVG using https://www.kmhcreative.com/downloads/CSS2SVG.htm gives:

  # ===== Inset shadow filters =====
  
  # SVG inner shadow on rgba fill: https://codepen.io/salsita/pen/qBbmYMw
  # Damien Jurado Poster Rebound: https://codepen.io/dylanbaumann/pen/wevMwB
  - descr: sak-inset-1 filter
    content: |
      <filter id="sak-inset-1" x="-50%" y="-50%" width="400%" height="400%">
        <feComponentTransfer in=SourceAlpha>
          <feFuncA type="table" tableValues="1 0" />
        </feComponentTransfer>
        <feGaussianBlur stdDeviation="1"/>
        <feOffset dx="0" dy="1" result="offsetblur"/>
        <feFlood flood-color="rgba(0, 0, 0, 0.3)" result="color"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feComposite in2="SourceAlpha" operator="in" />
        <feMerge>
          <feMergeNode in="SourceGraphic" />
          <feMergeNode />
        </feMerge>
      </filter>

  # SVG Inset Shadow: https://codepen.io/mattrosno/pen/zxpNwd
  - descr: sak-inset-2 filter
    content: |
      <filter id="sak-inset-2">
        <!-- Shadow Offset -->
        <feOffset
          dx='1'
          dy='1'
        />
        <!-- Shadow Blur -->
        <feGaussianBlur
          stdDeviation='0.5'
          result='offset-blur'
        />
        <!-- Invert the drop shadow
             to create an inner shadow -->
        <feComposite
          operator='out'
          in='SourceGraphic'
          in2='offset-blur'
          result='inverse'
        />
        <!-- Color & Opacity -->
        <feFlood
          flood-color='black'
          flood-opacity='0.4'
          result='color'
        />
        <!-- Clip color inside shadow -->
        <feComposite
          operator='in'
          in='color'
          in2='inverse'
          result='shadow'
        />
        <!-- Put shadow over original object -->
        <feComposite
          operator='over'
          in='shadow'
          in2='SourceGraphic'
        />
      </filter>

  # ===== Neumorphic filters =====
  - descr: sak-neumorphic filters
    content: |
      <!-- Neumorphic filter -->
      <!-- -->
      <!-- Light Shadow, #FFFFFF at 50%, x:-6, Y:-6, Blur:16 -->
      <!-- Dark Shadow: #d1cdc7 at 50%, x:6, y:6, Blur:16 -->
      <!-- Main Background: #efeeee -->
      <!-- Shape Background: #efeeee -->
      <!-- Optional Border: #fff at 20% Alpha -->
      <!-- Dark Shadow was: 0d2750 -->
      
      <!-- 2021.11.17 -->
      <!-- Performance with inset shadow and width/height=150% seems to be optimal setting -->
      <!-- Smaller settings give clipping, and larger settings performance hits -->
      <!-- Absolute settings (userSpaceOnUse) seem to be difficult to find right settings -->
      <filter id="is-1" x="-25%" y="-25%" width="150%" height="150%">
        <feComponentTransfer in=SourceAlpha>
          <feFuncA type="table" tableValues="1 0" />
        </feComponentTransfer>
        <feGaussianBlur stdDeviation="1"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feFlood flood-color="#0d2750" flood-opacity="0.5" result="color"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feComposite in2="SourceAlpha" operator="in" />
        <feMerge>
          <feMergeNode in="SourceGraphic" />
          <feMergeNode />
        </feMerge>
      </filter>
      
      <filter id="is-1b" filterUnits="userSpaceOnUse" x="-200" y="-200" width="1000" height="1000">
        <feComponentTransfer in=SourceAlpha>
          <feFuncA type="table" tableValues="1 0" />
        </feComponentTransfer>
        <feGaussianBlur stdDeviation="1"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feFlood flood-color="#0d2750" flood-opacity="0.5" result="color"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feComposite in2="SourceAlpha" operator="in" />
        <feMerge>
          <feMergeNode in="SourceGraphic" />
          <feMergeNode />
        </feMerge>
      </filter>
      
      <!-- Using feComposite in="offsetblur" operator="in" instead of in2 gives a -->
      <!-- much larger shadow area, much deeper! WHY?? -->
      
      <filter id="nm-2" x="-50%" y="-50%" width="200%" height="200%">
        <feComponentTransfer in=SourceAlpha out=transfer>
          <feFuncA type="table" tableValues="1 0" />
        </feComponentTransfer>
        
        <feGaussianBlur input="transfer" stdDeviation="5" result="blurdark"/>
        <feOffset input="blurdark" dx="12" dy="12" result="offsetblurdark"/>
        <feFlood input="offsetblurdark" flood-color="#d1cdc7" flood-opacity="0.4" result="colordark"/>
        
        <feGaussianBlur input="transfer" stdDeviation="5" result="blurlight"/>
        <feOffset input="blurlight" dx="-12" dy="-12" result="offsetblurlight"/>
        <feFlood input="offsetblurlight" flood-color="white" flood-opacity="0.9" result="colorlight"/>
        
        <feComposite in="offsetblurdark" operator="in"/>
        <feComposite in="SourceAlpha" operator="in" />
        
        <feMerge>
          <feMergeNode in="SourceGraphic" />
          <feMergeNode />
        </feMerge>
      </filter>
      
      <filter id="filter-yoksel" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
        <feFlood flood-color="#eeebe7" flood-opacity="0.7" x="0%" y="0%" width="100%" height="100%" result="flood2"/>
        <feComposite in="flood2" in2="SourceAlpha" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite5"/>
        <feOffset dx="-9" dy="-7" x="0%" y="0%" width="100%" height="100%" in="composite5" result="offset1"/>
        <feGaussianBlur stdDeviation="3 10" x="0%" y="0%" width="100%" height="100%" in="offset1" edgeMode="none" result="blur2"/>
        <feComposite in="merge3" in2="SourceAlpha" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite7"/>
        <feFlood flood-color="#0f0f0f" flood-opacity="1" x="0%" y="0%" width="100%" height="100%" result="flood4"/>
        <feComposite in="flood4" in2="SourceAlpha" operator="out" x="0%" y="0%" width="100%" height="100%" result="composite8"/>
        <feOffset dx="6" dy="6" x="0%" y="0%" width="100%" height="100%" in="merge3" result="offset2"/>
        <feGaussianBlur stdDeviation="3 10" x="0%" y="0%" width="100%" height="100%" in="offset2" edgeMode="none" result="blur3"/>
        <feComposite in="blur3" in2="SourceAlpha" operator="in" x="0%" y="0%" width="100%" height="100%" result="composite9"/>
        <feMerge x="0%" y="0%" width="100%" height="100%" result="merge3">
              <feMergeNode in="SourceGraphic"/>
          <feMergeNode in="composite7"/>
          <feMergeNode in="composite9"/>
          </feMerge>
      </filter>
      
      <!-- 2021.11.15 -->
      <!-- For some reason, changing the filter width/height from 160% to 600% improves performance on iOS 15 -->
      
      <!-- second try... -->
      <filter id="filter" x="-50%" y="-50%" width="300%" height="300%">
        <feFlood flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="flood2"/>
        <feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
        <feOffset dx="-6" dy="-6" in="composite5" result="offset1"/>
        <feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
        <feComposite in="blur2" in2="SourceAlpha" operator="in"  result="composite7"/>
        
        <!-- flood-color="#777777" -->
        <feFlood flood-color="var(--cs-theme-shadow-darker)" flood-opacity="1" result="flood4"/>
        <feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
        <feOffset dx="6" dy="6" in="composite8" result="offset2"/>
        <feGaussianBlur stdDeviation="15" in="offset2" edgeMode="none" result="blur3"/>
        <feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>
        
        <feMerge result="merge3">
          <feMergeNode in="SourceGraphic"/>
          <feMergeNode in="composite7"/>
          <feMergeNode in="composite9"/>
          </feMerge>
      </filter>
      
      <filter id="filterb" filterUnits="userSpaceOnUse" x="-200" y="-200" width="1000" height="1000">
        <feFlood flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="flood2"/>
        <feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
        <feOffset dx="-6" dy="-6" in="composite5" result="offset1"/>
        <feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
        <feComposite in="blur2" in2="SourceAlpha" operator="in"  result="composite7"/>
        
        <!-- flood-color="#777777" -->
        <feFlood flood-color="var(--cs-theme-shadow-darker)" flood-opacity="1" result="flood4"/>
        <feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
        <feOffset dx="6" dy="6" in="composite8" result="offset2"/>
        <feGaussianBlur stdDeviation="15" in="offset2" edgeMode="none" result="blur3"/>
        <feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>
        
        <feMerge result="merge3">
          <feMergeNode in="SourceGraphic"/>
          <feMergeNode in="composite7"/>
          <feMergeNode in="composite9"/>
          </feMerge>
      </filter>
      
      <filter id="bold" x="-50%" y="-50%" width="240%" height="240%">
        <feFlood flood-color="#FFFFFF" flood-opacity="0.8" result="flood2"/>
        <feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
        <feOffset dx="12" dy="12" in="composite5" result="offset1"/>
        <feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
        <feComposite in="blur2" in2="SourceAlpha" operator="in"  result="composite7"/>
        
        <feFlood flood-color="#777777" flood-opacity="0.6" result="flood4"/>
        <feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
        <feOffset dx="-12" dy="-12" in="composite8" result="offset2"/>
        <feGaussianBlur stdDeviation="15" in="offset2" edgeMode="none" result="blur3"/>
        <feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>
        
        <feMerge result="merge3">
          <feMergeNode in="SourceGraphic"/>
          <feMergeNode in="composite7"/>
          <feMergeNode in="composite9"/>
          </feMerge>
      </filter>
      
      <filter id="filterss" x="-20%" y="-20%" width="140%" height="140%">
        <feFlood flood-color="#eeebe7" flood-opacity="0.9" result="flood2"/>
        <feComposite in="flood2" in2="SourceAlpha" operator="out" result="composite5"/>
        <feOffset dx="-15" dy="-15" in="composite5" result="offset1"/>
        <feGaussianBlur stdDeviation="5" in="offset1" edgeMode="none" result="blur2"/>
        <feComposite in="blur2" in2="SourceAlpha" operator="in" result="composite7"/>
        
        <feFlood flood-color="#0f0f0f" flood-opacity="1" result="flood4"/>
        <feComposite in="flood4" in2="SourceAlpha" operator="out" result="composite8"/>
        <feOffset dx="6" dy="6" in="composite8" result="offset2"/>
        <feGaussianBlur stdDeviation="5" in="offset2" edgeMode="none" result="blur3"/>
        <feComposite in="blur3" in2="SourceAlpha" operator="in" result="composite9"/>
        
        <feMerge result="merge3">
          <feMergeNode in="SourceGraphic"/>
          <feMergeNode in="composite7"/>
          <feMergeNode in="composite9"/>
          </feMerge>
      </filter>
      
      <!-- flood-color="#d1cdc7" -->
      <!-- flood-color="#FFFFFF" -->
      <filter id="nm-11" x="-50%" y="-50%" width="300%" height="300%">
        <feDropShadow stdDeviation="5" in="SourceGraphic"
          dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"
        </feDropShadow>
        <feDropShadow stdDeviation="4.5" in="SourceGraphic"
          dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
        <feMerge result="merge">
          <feMergeNode in="dropShadow1"/>
          <feMergeNode in="dropShadow"/>
        </feMerge>
      </filter>
      
      <!-- 2021.11.15 -->
      <!-- For some reason, changing the filter width/height from 300% to 600% improves performance on iOS 15 -->
      <!-- Changing this value to 3000% improves performance also, but pixelates some of the views, so unusable! -->
      <!-- A value of 1000% seems to be a good value too! Switching views is now instant again for some reason! -->
      <!-- However, some views (sake5) becomes very, very, very slow. Views sake4 and sake6 are very fast. -->
      <!-- 2021.11.17 -->
      <!-- Let's settle for now with x/y=-10% and width/height=120%. This is actually the default for svg filters... -->
      
      <filter id="sak-nm-default" x="-10%" y="-10%" width="120%" height="120%">
        <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
        <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
        <feMerge result="merge">
          <feMergeNode in="dropShadow1"/>
          <feMergeNode in="dropShadow"/>
        </feMerge>
      </filter>
      
      <filter id="nm-1" x="-10%" y="-10%" width="120%" height="120%">
        <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
        <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
        <feMerge result="merge">
          <feMergeNode in="dropShadow1"/>
          <feMergeNode in="dropShadow"/>
        </feMerge>
      </filter>
      
      <filter id="sak-nm-default-b" filterUnits="userSpaceOnUse" x="-100" y="-100" width="5000" height="800">
        <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
        <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
        <feMerge result="merge">
          <feMergeNode in="dropShadow1"/>
          <feMergeNode in="dropShadow"/>
        </feMerge>
      </filter>
      
      <filter id="nm-1b" filterUnits="userSpaceOnUse" x="-200" y="-200" width="2000" height="2000">
        <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
        <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
        <feMerge result="merge">
          <feMergeNode in="dropShadow1"/>
          <feMergeNode in="dropShadow"/>
        </feMerge>
      </filter>
      
      <filter id="nm-1-reverse" x="-10%" y="-10%" width="120%" height="120%">
        <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
        <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
        <feMerge result="merge">
          <feMergeNode in="dropShadow1"/>
          <feMergeNode in="dropShadow"/>
        </feMerge>
      </filter>
      
      <filter id="nm-1b-reverse" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="1000" height="1000">
        <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
        <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
        <feMerge result="merge">
          <feMergeNode in="dropShadow1"/>
          <feMergeNode in="dropShadow"/>
        </feMerge>
      </filter>

  # ===== Drop shadow filters =====

  - descr: shadow from https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/
    content: |
      <filter id='shadow' color-interpolation-filters="sRGB">
        <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5"/>
      </filter>      

  - descr: sak-drop-shadow filters
    content: |
      <filter id="sak-drop-1" y="-50%" x="-50%" width="200%" height="400%">
        <feDropShadow dx="0" dy="1.5" flood-color="var(--cs-theme-shadow-darker)" stdDeviation=".3"/>
      </filter>
      
      <filter id="sak-drop-1a" y="-50%" x="-50%" width="200%" height="400%">
        <feDropShadow dx="1" dy="2" flood-color="var(--cs-theme-shadow-darker)" stdDeviation=".5"/>
      </filter>
      
      <filter id="sak-drop-1b" y="-50%" x="-50%" width="200%" height="400%">
        <feDropShadow dx="2" dy="4" flood-color="var(--cs-theme-shadow-darker)" stdDeviation="6"/>
      </filter>
      
      <filter id="sak-drop-2" width="10" height="10">
        <feDropShadow dx="2" dy="3" flood-color="var(--cs-theme-shadow-darker)" stdDeviation="0.5"/>
      </filter>
      
      <filter id="sak-drop-3" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
      
      <filter id="sak-drop-4" x="0" y="0" width="200%" height="200%">
        <feGaussianBlur stdDeviation="1" />
      </filter>

  # ===== Markers (testing segmented arc) =====

  - descr: sak-markers
    content: |
      <marker viewBox="0 0 200 200" id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
          <circle cx="5" cy="5" r="3" style="stroke: none; fill:currentColor;"/>
      </marker>
      
      <marker viewBox="0 0 200 200" id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
             orient="auto">
          <path d="M2,2 L2,11 L10,6 L2,2" style="fill: currentColor;" />
      </marker>

  # ===== Clip path test =====

  - descr: sak-clip-path tests
    content: |
      <rect id="cliprect" width="100%" height="100%" fill="none" stroke="none" rx="3" />
      <clipPath id="clip">
        <use xlink:href="#cliprect"/>
      </clipPath>

  # ===== Gradients =====

  - descr: sak-gradients
    content: |
      <linearGradient id="sak-light-brightness-gradient" x1="1" x2="0">
        <stop stop-color="#eeeeee"/>
        <stop offset="1" stop-color="#555555"/>
      </linearGradient>
      
      <linearGradient id="sak-light-brightness-gradient--orange" x1="1" x2="0">
        <stop stop-color="white"/>
        <stop offset="1" stop-color="darkorange"/>
      </linearGradient>
      
      <linearGradient id="sak-light-brightness-gradient--reverse" x1="1" x2="0">
        <stop stop-color="#555555"/>
        <stop offset="1" stop-color="#eeeeee"/>
      </linearGradient>
      
      <linearGradient id="sak-light-color-temperature-gradient" x1="1" x2="0">
        <stop stop-color="#ffa000"/>
        <stop offset=".5" stop-color="#fff"/>
        <stop offset="1" stop-color="#a6d1ff"/>
      </linearGradient>
      
      <linearGradient id="sak-boiler-setpoint-blue-orange-gradient" x1="1" x2="0">
        <stop stop-color="#ff8c00"/>
        <stop offset="1" stop-color="#0094ff"/>
      </linearGradient>
      
      <radialGradient id="sak-mask-radial-gradient">
        <stop offset="0" stop-color="white" stop-opacity="1"/>
        <stop offset="0.8" stop-color="white" stop-opacity="0.8"/>
        <stop offset="1" stop-color="white" stop-opacity="0"/>
      </radialGradient>