|
1 | 1 | import { createUniqueId, type ComponentProps } from "solid-js" |
2 | 2 |
|
3 | 3 | export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) { |
4 | | - const filter = createUniqueId() |
5 | 4 | const mask = createUniqueId() |
6 | 5 | const maskGradient = createUniqueId() |
7 | 6 |
|
8 | 7 | return ( |
9 | 8 | <svg |
10 | 9 | xmlns="http://www.w3.org/2000/svg" |
11 | | - viewBox="0 0 720.002 129.001" |
| 10 | + viewBox="0 0 720 129" |
12 | 11 | fill="none" |
13 | | - preserveAspectRatio="none" |
14 | 12 | classList={{ [props.class ?? ""]: !!props.class }} |
15 | 13 | > |
16 | | - <g opacity="0.16" filter={`url(#${filter})`} mask={`url(#${mask})`}> |
17 | | - <path |
18 | | - opacity="0.7" |
19 | | - d="M55.3846 36.8583H18.4615V92.144H55.3846V36.8583ZM73.8462 110.573H0V18.4297H73.8462V110.573Z" |
20 | | - fill="currentColor" |
21 | | - /> |
22 | | - <path |
23 | | - opacity="0.7" |
24 | | - d="M110.774 92.144H147.697V36.8583H110.774V92.144ZM166.159 110.573H110.774V129.001H92.3125V18.4297H166.159V110.573Z" |
25 | | - fill="currentColor" |
26 | | - /> |
27 | | - <path |
28 | | - opacity="0.7" |
29 | | - d="M258.463 73.7154H203.079V92.144H258.463V110.573H184.617V18.4297H258.463V73.7154ZM203.079 55.2868H240.002V36.8583H203.079V55.2868Z" |
30 | | - fill="currentColor" |
31 | | - /> |
32 | | - <path |
33 | | - opacity="0.7" |
34 | | - d="M332.306 36.8583H295.383V110.573H276.922V18.4297H332.306V36.8583ZM350.768 110.573H332.306V36.8583H350.768V110.573Z" |
35 | | - fill="currentColor" |
36 | | - /> |
37 | | - <path |
38 | | - opacity="0.7" |
39 | | - d="M443.081 36.8583H387.696V92.144H443.081V110.573H369.234V18.4297H443.081V36.8583Z" |
40 | | - fill="currentColor" |
41 | | - /> |
42 | | - <path |
43 | | - opacity="0.7" |
44 | | - d="M516.924 36.8583H480.001V92.144H516.924V36.8583ZM535.385 110.573H461.539V18.4297H535.385V110.573Z" |
45 | | - fill="currentColor" |
46 | | - /> |
47 | | - <path |
48 | | - opacity="0.7" |
49 | | - d="M609.228 36.8571H572.305V92.1429H609.228V36.8571ZM627.69 110.571H553.844V18.4286H609.228V0H627.69V110.571Z" |
50 | | - fill="currentColor" |
51 | | - /> |
52 | | - <path |
53 | | - opacity="0.7" |
54 | | - d="M664.618 36.8583V55.2868H701.541V36.8583H664.618ZM720.002 73.7154H664.618V92.144H720.002V110.573H646.156V18.4297H720.002V73.7154Z" |
55 | | - fill="currentColor" |
56 | | - /> |
| 14 | + <g opacity="0.6"> |
| 15 | + <g mask={`url(#${mask})`}> |
| 16 | + <g opacity="0.16"> |
| 17 | + <path |
| 18 | + opacity="0.7" |
| 19 | + d="M55.3846 36.4286H18.4615V91.7143H55.3846V36.4286ZM73.8462 110.143H0V18H73.8462V110.143Z" |
| 20 | + fill="currentColor" |
| 21 | + /> |
| 22 | + <path |
| 23 | + opacity="0.7" |
| 24 | + d="M110.462 91.7143H147.385V36.4286H110.462V91.7143ZM165.846 110.143H110.462V128.571H92V18H165.846V110.143Z" |
| 25 | + fill="currentColor" |
| 26 | + /> |
| 27 | + <path |
| 28 | + opacity="0.7" |
| 29 | + d="M258.846 73.2857H203.462V91.7143H258.846V110.143H185V18H258.846V73.2857ZM203.462 54.8571H240.385V36.4286H203.462V54.8571Z" |
| 30 | + fill="currentColor" |
| 31 | + /> |
| 32 | + <path |
| 33 | + opacity="0.7" |
| 34 | + d="M332.385 36.4286H295.462V110.143H277V18H332.385V36.4286ZM350.846 110.143H332.385V36.4286H350.846V110.143Z" |
| 35 | + fill="currentColor" |
| 36 | + /> |
| 37 | + <path |
| 38 | + opacity="0.7" |
| 39 | + d="M442.846 36.4286H387.462V91.7143H442.846V110.143H369V18H442.846V36.4286Z" |
| 40 | + fill="currentColor" |
| 41 | + /> |
| 42 | + <path |
| 43 | + opacity="0.7" |
| 44 | + d="M517.385 36.4286H480.462V91.7143H517.385V36.4286ZM535.846 110.143H462V18H535.846V110.143Z" |
| 45 | + fill="currentColor" |
| 46 | + /> |
| 47 | + <path |
| 48 | + opacity="0.7" |
| 49 | + d="M609.385 36.8571H572.462V92.1429H609.385V36.8571ZM627.846 110.571H554V18.4286H609.385V0H627.846V110.571Z" |
| 50 | + fill="currentColor" |
| 51 | + /> |
| 52 | + <path |
| 53 | + opacity="0.7" |
| 54 | + d="M664.462 36.4286V54.8571H701.385V36.4286H664.462ZM719.846 73.2857H664.462V91.7143H719.846V110.143H646V18H719.846V73.2857Z" |
| 55 | + fill="currentColor" |
| 56 | + /> |
| 57 | + </g> |
| 58 | + </g> |
57 | 59 | </g> |
58 | 60 | <defs> |
59 | | - <mask id={mask} maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129"> |
| 61 | + <mask id={mask} style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129"> |
60 | 62 | <rect width="720" height="129" fill={`url(#${maskGradient})`} /> |
61 | 63 | </mask> |
62 | | - <linearGradient id={maskGradient} x1="360" y1="0" x2="360" y2="112" gradientUnits="userSpaceOnUse"> |
| 64 | + <linearGradient id={maskGradient} x1="360" y1="68" x2="360" y2="129" gradientUnits="userSpaceOnUse"> |
63 | 65 | <stop stop-color="white" stop-opacity="0.7" /> |
64 | 66 | <stop offset="1" stop-color="white" stop-opacity="0" /> |
65 | 67 | </linearGradient> |
66 | | - <filter |
67 | | - id={filter} |
68 | | - x="0" |
69 | | - y="0" |
70 | | - width="720.002" |
71 | | - height="130.001" |
72 | | - filterUnits="userSpaceOnUse" |
73 | | - color-interpolation-filters="sRGB" |
74 | | - > |
75 | | - <feFlood flood-opacity="0" result="BackgroundImageFix" /> |
76 | | - <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" /> |
77 | | - <feColorMatrix |
78 | | - in="SourceAlpha" |
79 | | - type="matrix" |
80 | | - values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" |
81 | | - result="hardAlpha" |
82 | | - /> |
83 | | - <feOffset dy="1" /> |
84 | | - <feGaussianBlur stdDeviation="1" /> |
85 | | - <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" /> |
86 | | - <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" /> |
87 | | - <feBlend mode="normal" in2="shape" result="effect1_innerShadow_4938_16028" /> |
88 | | - </filter> |
89 | 68 | </defs> |
90 | 69 | </svg> |
91 | 70 | ) |
|
0 commit comments