astro-vtbot/assets/bag-of-tricks.ts

The 👜 Bag of Tricks ✨ for Astro's View Transitions

export const icon = `
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
  <g clip-path="url(#a)">
    <g filter="url(#b)">
      <path stroke="#F29D27" stroke-linecap="round" stroke-width=".533" d="M3.88 7.2C3.936 5.065 3.53.833 7.39.833s3.67 4.143 3.67 6.2"/>
    </g>
    <g filter="url(#c)">
      <path fill="#8B6AC6" d="M.902 10.575c0-1.495.767-5.742 1.15-6.924h10.854c.367 1.15 1.102 5.353 1.102 6.924 0 1.965 0 2.851-6.481 2.851s-6.625-.982-6.625-2.85Z"/>
    </g>
    <g filter="url(#d)">
      <path stroke="#FAD98F" stroke-linecap="round" stroke-width=".533" d="M3.58 6.7c0-2.287-.05-6.367 3.81-6.367s3.996 4.126 3.996 6.2"/>
    </g>
    <g filter="url(#e)">
      <path fill="url(#f)" fill-rule="evenodd" d="M8.334 6.707c-.02.072-.06.118-.137.118-.079 0-.118-.046-.138-.118l-.008-.045c-.194-1.045-.197-1.06-1.316-1.286-.072-.013-.124-.059-.124-.137 0-.078.052-.124.124-.137 1.09-.22 1.097-.252 1.299-1.209l.025-.122c.02-.072.06-.117.138-.117.078 0 .117.045.137.117l.022.106c.205.973.212 1.005 1.302 1.225.078.013.124.059.124.137 0 .079-.046.124-.124.137-1.117.212-1.122.24-1.315 1.28l-.01.051Zm1.984 9.268c.155 0 .268-.113.297-.274.423-3.264.882-3.758 4.11-4.116a.299.299 0 0 0 .28-.298c0-.155-.113-.274-.28-.297-3.228-.358-3.687-.852-4.11-4.116-.03-.161-.143-.268-.297-.268-.155 0-.268.107-.292.268-.423 3.264-.888 3.758-4.11 4.116-.173.024-.286.143-.286.297 0 .155.113.28.286.298 3.216.423 3.663.858 4.11 4.116.024.16.137.274.292.274Zm-5.462-5.368c.113 0 .19-.072.202-.179.213-1.58.267-1.59 1.88-1.9l.032-.006c.107-.018.185-.09.185-.202 0-.108-.078-.185-.185-.203-1.644-.226-1.704-.28-1.912-1.9a.198.198 0 0 0-.202-.185c-.108 0-.185.078-.197.19-.194 1.576-.278 1.591-1.847 1.883l-.065.012c-.107.024-.185.095-.185.203 0 .119.078.184.209.202 1.62.262 1.691.304 1.888 1.894.012.12.09.19.197.19Z" clip-rule="evenodd"/>
    </g>
  </g>
  <defs>
    <filter id="b" width="7.714" height="6.9" x="3.614" y=".566" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset/>
      <feGaussianBlur stdDeviation=".107"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0"/>
      <feBlend in2="shape" result="effect1_innerShadow_238_54"/>
    </filter>
    <filter id="c" width="13.106" height="12.975" x=".902" y="2.585" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dy="-1.067"/>
      <feGaussianBlur stdDeviation=".533"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
      <feBlend in2="shape" result="effect1_innerShadow_238_54"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dy="2.133"/>
      <feGaussianBlur stdDeviation="2.133"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
      <feBlend in2="effect1_innerShadow_238_54" result="effect2_innerShadow_238_54"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dy="-.533"/>
      <feGaussianBlur stdDeviation=".533"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"/>
      <feBlend in2="effect2_innerShadow_238_54" result="effect3_innerShadow_238_54"/>
    </filter>
    <filter id="d" width="8.34" height="6.9" x="3.313" y=".066" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset/>
      <feGaussianBlur stdDeviation=".107"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0"/>
      <feBlend in2="shape" result="effect1_innerShadow_238_54"/>
    </filter>
    <filter id="e" width="12.443" height="12.321" x="2.562" y="3.654" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
      <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset/>
      <feGaussianBlur stdDeviation=".267"/>
      <feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.45 0"/>
      <feBlend in2="shape" result="effect1_innerShadow_238_54"/>
    </filter>
    <linearGradient id="f" x1="15.018" x2="6.35" y1="16.213" y2="-.159" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FF7D54"/>
      <stop offset=".505" stop-color="#FFF48F"/>
      <stop offset="1" stop-color="#FF7D54"/>
    </linearGradient>
    <clipPath id="a">
      <path fill="#fff" d="M0 0h16v16H0z"/>
    </clipPath>
  </defs>
</svg>
`;