All files / app/components/svg abstract-btc-chart.tsx

0% Statements 0/5
100% Branches 0/0
0% Functions 0/1
0% Lines 0/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153                                                                                                                                                                                                                                                                                                                 
import { color } from '@stacks/ui';
import React from 'react';
 
export const AbstractBtcChartSvg: React.FC = () => {
  return (
    <svg
      width="252"
      height="134"
      viewBox="0 0 252 134"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M211.271 61.1421C211.271 49.8949 220.388 40.7773 231.636 40.7773C242.883 40.7773 252 49.8949 252 61.1421V102.044C252 113.291 242.883 122.409 231.636 122.409C220.388 122.409 211.271 113.291 211.271 102.044V61.1421Z"
        fill="url(#paint0_linear)"
      />
      <mask id="mask0" type="alpha" maskUnits="userSpaceOnUse" x="211" y="0" width="41" height="41">
        <ellipse
          cx="231.397"
          cy="20.4078"
          rx="20.4078"
          ry="20.3648"
          transform="rotate(-90 231.397 20.4078)"
          fill="white"
        />
      </mask>
      <g mask="url(#mask0)">
        <ellipse
          cx="231.397"
          cy="20.4078"
          rx="20.4078"
          ry="20.3648"
          transform="rotate(-90 231.397 20.4078)"
          fill={color('brand')}
        />
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M229.957 11.7995H231.63V13.4137H231.673C233.153 13.4137 234.241 13.7476 234.94 14.4152C235.543 14.9874 235.845 15.7922 235.845 16.8294C235.845 17.6639 235.638 18.3673 235.224 18.9396C234.809 19.5119 234.247 19.8338 233.537 19.9053C234.484 19.9768 235.218 20.3047 235.738 20.8889C236.259 21.473 236.519 22.248 236.519 23.2136C236.519 24.3105 236.188 25.1927 235.525 25.8603C235.076 26.2895 234.525 26.5995 233.874 26.7903C233.224 26.9691 232.561 27.0585 231.886 27.0585H231.63V28.9859H229.957V27.0585H226.579V13.4137H229.957V11.7995ZM233.519 18.7429C233.082 19.1363 232.466 19.333 231.673 19.333H228.212V14.898H231.318C232.383 14.898 233.153 15.1305 233.626 15.5955C234.005 15.9531 234.194 16.4539 234.194 17.0976C234.194 17.801 233.969 18.3495 233.519 18.7429ZM233.076 25.449C232.638 25.5325 232.182 25.5742 231.709 25.5742H228.212V20.7994H232.064C232.786 20.7994 233.437 20.9365 234.016 21.2107C234.596 21.485 234.886 22.1168 234.886 23.1064C234.886 23.8694 234.667 24.4535 234.229 24.8589C233.898 25.1689 233.514 25.3656 233.076 25.449Z"
          fill="white"
        />
      </g>
      <path
        d="M158.323 75.3195C158.323 64.0724 167.441 54.9548 178.688 54.9548C189.935 54.9548 199.053 64.0724 199.053 75.3195V116.221C199.053 127.468 189.935 136.586 178.688 136.586C167.441 136.586 158.323 127.468 158.323 116.221V75.3195Z"
        fill="url(#paint1_linear)"
      />
      <path
        d="M105.773 106.23C105.773 95.0803 114.812 86.0418 125.961 86.0418C137.111 86.0418 146.149 95.0803 146.149 106.23V123.812C146.149 134.962 137.111 144 125.961 144C114.812 144 105.773 134.962 105.773 123.812V106.23Z"
        fill="url(#paint2_linear)"
      />
      <mask
        id="mask1"
        type="alpha"
        maskUnits="userSpaceOnUse"
        x="105"
        y="45"
        width="42"
        height="42"
      >
        <ellipse
          cx="125.734"
          cy="65.7984"
          rx="20.4078"
          ry="20.3648"
          transform="rotate(-90 125.734 65.7984)"
          fill="white"
        />
      </mask>
      <g mask="url(#mask1)">
        <ellipse
          cx="125.734"
          cy="65.7984"
          rx="20.4078"
          ry="20.3648"
          transform="rotate(-90 125.734 65.7984)"
          fill={color('brand')}
        />
      </g>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M124.825 57.2036H126.498V58.8169H126.542C128.021 58.8169 129.11 59.1508 129.808 59.8184C130.412 60.3907 130.713 61.1954 130.713 62.2326C130.713 63.0671 130.506 63.7705 130.092 64.3428C129.678 64.9151 129.116 65.237 128.406 65.3085C129.353 65.38 130.086 65.7079 130.607 66.2921C131.128 66.8762 131.388 67.6512 131.388 68.6169C131.388 69.7137 131.057 70.5959 130.394 71.2635C129.944 71.6927 129.394 72.0027 128.743 72.1935C128.092 72.3723 127.43 72.4617 126.755 72.4617H126.499V74.3891H124.825V72.4617H121.448V58.8169H124.825V57.2036ZM128.388 64.1461C127.95 64.5395 127.335 64.7362 126.542 64.7362H123.081V60.3012H126.187C127.252 60.3012 128.021 60.5337 128.495 60.9987C128.873 61.3563 129.063 61.8571 129.063 62.5009C129.063 63.2043 128.838 63.7527 128.388 64.1461ZM127.944 70.8522C127.506 70.9357 127.051 70.9774 126.578 70.9774H123.081V66.2026H126.933C127.654 66.2026 128.305 66.3397 128.885 66.614C129.465 66.8882 129.755 67.52 129.755 68.5096C129.755 69.2726 129.536 69.8567 129.098 70.2621C128.767 70.5721 128.382 70.7688 127.944 70.8522Z"
        fill="white"
      />
      <path
        d="M0 94.408C0 83.1609 9.11761 74.0002 20.3648 74.0002C31.6119 74.0002 40.7295 83.1609 40.7295 94.408C40.7295 105.655 31.6119 114.816 20.3648 114.816C9.11761 114.816 0 105.655 0 94.408Z"
        fill="url(#paint3_linear)"
      />
      <path
        d="M52.9172 82.3649C52.9172 71.1178 62.0349 62.0002 73.282 62.0002C84.5291 62.0002 93.6467 71.1178 93.6467 82.3649V123.267C93.6467 134.514 84.5291 143.631 73.282 143.631C62.0349 143.631 52.9172 134.514 52.9172 123.267V82.3649Z"
        fill="url(#paint4_linear)"
      />
      <defs>
        <linearGradient
          id="paint0_linear"
          x1="231.636"
          y1="40.7773"
          x2="231.636"
          y2="102.247"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor={color('bg-4')} />
          <stop offset="1" stopColor={color('bg-4')} stopOpacity="0.16" />
        </linearGradient>
        <linearGradient
          id="paint1_linear"
          x1="178.688"
          y1="54.9548"
          x2="178.688"
          y2="116.425"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor={color('bg-4')} />
          <stop offset="1" stopColor={color('bg-4')} stopOpacity="0.16" />
        </linearGradient>
        <linearGradient
          id="paint2_linear"
          x1="125.961"
          y1="86.0418"
          x2="125.961"
          y2="129.686"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor={color('bg-4')} />
          <stop offset="1" stopColor={color('bg-4')} stopOpacity="0.16" />
        </linearGradient>
        <linearGradient
          id="paint3_linear"
          x1="20.3648"
          y1="74.0002"
          x2="20.3648"
          y2="104.735"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor={color('bg-4')} />
          <stop offset="1" stopColor={color('bg-4')} stopOpacity="0.16" />
        </linearGradient>
        <linearGradient
          id="paint4_linear"
          x1="73.282"
          y1="62.0002"
          x2="73.282"
          y2="123.47"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor={color('bg-4')} />
          <stop offset="1" stopColor={color('bg-4')} stopOpacity="0.16" />
        </linearGradient>
      </defs>
    </svg>
  );
};