feat: add basic logo

Author: antfu

packages/devtools/src/app/components/visual/Logo.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <mask id="mask0_1_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="29" width="179" height="160">
+      <path d="M11.2214 35.9626C9.30946 32.602 12.1754 28.5306 15.9741 29.2116L74.9818 39.786L72.1164 88.328C72.0955 88.6819 72.1567 89.0366 72.2961 89.3626C72.4354 89.6884 72.6492 89.9776 72.9193 90.2064C73.1893 90.4351 73.5094 90.5977 73.853 90.681C74.1966 90.7643 74.5553 90.7663 74.8998 90.6866L92.1509 86.6945C93.7647 86.3211 95.2237 87.7466 94.892 89.3736L89.7667 114.539C89.4224 116.232 91.0072 117.679 92.6565 117.177L103.313 113.931C104.964 113.429 106.552 114.881 106.203 116.576L98.0568 156.103C97.5472 158.575 100.828 159.924 102.195 157.805L103.109 156.389L153.601 55.3605C154.447 53.669 152.988 51.7393 151.136 52.0981L133.377 55.5346C131.709 55.8569 130.29 54.2988 130.76 52.6625L134.95 38.1005L183.483 29.2327C187.269 28.5409 190.15 32.5806 188.272 35.9482L104.538 186.065C102.81 189.164 98.369 189.183 96.6142 186.099L11.2214 35.9626Z" fill="currentColor" />
+    </mask>
+    <g mask="url(#mask0_1_2)">
+      <path opacity="0.2" d="M-4.16254 193.133H204.771M-4.16254 172.239H204.771M-4.16254 151.346H204.771M-4.16254 130.452H204.771M-4.16254 109.559H204.771M-3.87867 193.416L-3.87866 -15.5173M17.0147 193.416L17.0147 -15.5173M37.9081 193.416L37.9081 -15.5173M58.8015 193.416L58.8015 -15.5173M79.6948 193.416L79.6948 -15.5173M100.588 193.416L100.588 -15.5173M121.482 193.416V-15.5173M142.375 193.416V-15.5173M163.268 193.416L163.268 -15.5173M184.162 193.416L184.162 -15.5173M-4.16254 88.6657H204.771M-4.16254 67.7723H204.771M-4.16254 46.8789H204.771M-4.16254 25.9856H204.771M-4.16254 5.09218H204.771" stroke="currentColor" stroke-opacity="0.5" stroke-width="0.567755" />
+    </g>
+    <path opacity="0.45" d="M10.2346 36.5239C7.8507 32.3332 11.4215 27.2419 16.175 28.0941L76.1751 38.8459L76.1197 39.7863L76.1075 39.987L15.9743 29.2118C15.8558 29.1906 15.7382 29.1741 15.6216 29.1619C14.9208 29.0888 14.2569 29.1762 13.6556 29.3893C13.555 29.4249 13.4564 29.4644 13.3595 29.5068C13.1663 29.5914 12.9803 29.6888 12.8028 29.7985C11.9183 30.3452 11.2421 31.188 10.8878 32.1604C10.5665 33.0417 10.5096 34.0299 10.8057 35.0025C10.9041 35.3255 11.0413 35.6467 11.2204 35.9617L96.6143 186.1C96.669 186.196 96.7263 186.289 96.7861 186.379C96.8849 186.528 96.992 186.667 97.1033 186.799C97.1223 186.822 97.1394 186.846 97.1587 186.868C97.1888 186.902 97.221 186.935 97.2519 186.968C97.2945 187.014 97.3365 187.059 97.3805 187.103C97.4014 187.124 97.4237 187.143 97.4448 187.163C97.4934 187.209 97.5422 187.255 97.5923 187.298C97.6373 187.337 97.6836 187.374 97.7298 187.411C97.7594 187.435 97.7884 187.459 97.8185 187.482C97.8617 187.515 97.9064 187.546 97.9505 187.577C97.9908 187.605 98.0303 187.634 98.0714 187.661C98.1028 187.681 98.1349 187.701 98.1667 187.721C98.2189 187.753 98.271 187.785 98.3242 187.815C98.3611 187.836 98.3988 187.855 98.4362 187.875C98.4797 187.898 98.5229 187.921 98.567 187.943C98.6158 187.966 98.6651 187.988 98.7145 188.01C98.7547 188.028 98.7948 188.046 98.8354 188.062C98.8849 188.082 98.935 188.1 98.9851 188.119C99.0225 188.133 99.0594 188.147 99.0971 188.16C99.1478 188.177 99.1989 188.192 99.2501 188.208C99.2947 188.221 99.3394 188.233 99.3843 188.245C99.4307 188.258 99.4773 188.269 99.524 188.28C99.5679 188.29 99.6118 188.3 99.656 188.308C99.7079 188.319 99.7601 188.328 99.8123 188.336C99.8519 188.343 99.8913 188.35 99.931 188.355C99.9856 188.363 100.04 188.369 100.095 188.375C100.139 188.38 100.184 188.383 100.228 188.386C100.271 188.389 100.313 188.392 100.356 188.394C100.414 188.396 100.472 188.398 100.531 188.398C100.567 188.399 100.604 188.399 100.641 188.398C100.696 188.397 100.751 188.396 100.806 188.393C100.849 188.39 100.892 188.387 100.936 188.384C100.981 188.38 101.026 188.377 101.071 188.372C101.129 188.365 101.188 188.357 101.246 188.348C101.273 188.344 101.3 188.341 101.327 188.336C101.394 188.325 101.46 188.313 101.527 188.298C101.557 188.292 101.587 188.284 101.616 188.277C101.674 188.264 101.732 188.25 101.789 188.234C101.828 188.224 101.866 188.211 101.904 188.2C101.957 188.184 102.011 188.168 102.063 188.15C102.101 188.137 102.138 188.123 102.175 188.109C102.231 188.088 102.286 188.067 102.341 188.045C102.367 188.034 102.392 188.021 102.418 188.009C102.481 187.981 102.544 187.954 102.606 187.924C102.641 187.906 102.675 187.886 102.71 187.867C102.753 187.844 102.796 187.822 102.838 187.797C102.89 187.768 102.941 187.736 102.992 187.704C103.025 187.683 103.058 187.663 103.091 187.641C103.139 187.609 103.185 187.576 103.231 187.542C103.265 187.518 103.299 187.494 103.332 187.469C103.367 187.442 103.401 187.413 103.435 187.385C103.864 187.035 104.242 186.597 104.538 186.065L188.272 35.9484C188.859 34.8961 188.981 33.7779 188.756 32.7592L188.678 32.4565C188.649 32.357 188.616 32.2586 188.581 32.1615C188.545 32.064 188.505 31.9678 188.463 31.8732C187.914 30.6457 186.837 29.6699 185.492 29.3072C185.389 29.2793 185.284 29.2545 185.177 29.234C184.858 29.1726 184.525 29.1461 184.182 29.1575C183.953 29.1651 183.719 29.1898 183.483 29.2329L133.702 38.3292L134.054 37.1105L183.279 28.1163C188.016 27.251 191.606 32.302 189.265 36.5017L105.531 186.619C103.371 190.49 97.8199 190.513 95.6273 186.661L10.2346 36.5239Z" fill="currentColor" />
+    <path opacity="0.45" d="M139.835 10.0654C141.086 9.8196 142.16 10.9877 141.806 12.2226L130.215 52.5058C129.628 54.5469 131.398 56.4951 133.485 56.0917L151.244 52.6562C152.631 52.3876 153.73 53.8332 153.094 55.1064L102.615 156.106L101.719 157.496H101.718C100.695 159.081 98.229 158.082 98.6132 156.218L106.759 116.69C107.181 114.642 105.335 112.874 103.341 113.337L103.147 113.389L92.4911 116.634C91.2561 117.01 90.0637 115.926 90.3231 114.651L95.4481 89.4873C95.8621 87.4574 94.0422 85.6745 92.0233 86.1416L74.7714 90.1337C74.5129 90.1935 74.244 90.1914 73.9862 90.1289C73.7285 90.0663 73.4888 89.9442 73.286 89.7724C73.0834 89.6007 72.9229 89.3843 72.8183 89.1396C72.7136 88.8948 72.6668 88.6283 72.6825 88.3623L76.494 23.8193C76.5166 23.4396 76.6646 23.078 76.914 22.7919C77.1632 22.506 77.4999 22.3114 77.871 22.2382L139.835 10.0654Z" stroke="currentColor" stroke-width="1.13551" />
+    <path opacity="0.05" d="M139.726 9.50787L77.7617 21.6813C77.2667 21.7787 76.818 22.0382 76.4861 22.4191C76.1541 22.7999 75.9577 23.2805 75.9277 23.7853L72.1162 88.3284C72.0952 88.6824 72.1569 89.0364 72.2962 89.3623C72.4355 89.6883 72.6488 89.9771 72.9189 90.206C73.189 90.4349 73.5087 90.5975 73.8524 90.681C74.1962 90.7644 74.5546 90.7663 74.8993 90.6866L92.1512 86.6949C93.7652 86.3214 95.2239 87.7469 94.8918 89.3741L89.7664 114.538C89.4218 116.232 91.0072 117.68 92.6567 117.177L103.313 113.932C104.964 113.429 106.552 114.881 106.202 116.576L98.0571 156.103C97.5474 158.576 100.828 159.924 102.195 157.804L103.109 156.388L153.601 55.3602C154.447 53.6687 152.989 51.7398 151.137 52.0987L133.378 55.5347C131.709 55.8572 130.29 54.2991 130.76 52.6627L142.351 12.3791C142.822 10.7386 141.396 9.17977 139.726 9.50787Z" fill="currentColor" />
+    <mask id="mask1_1_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="72" y="9" width="82" height="150">
+      <path d="M139.726 9.50787L77.7617 21.6813C77.2667 21.7787 76.818 22.0382 76.4861 22.4191C76.1541 22.7999 75.9577 23.2805 75.9277 23.7853L72.1162 88.3284C72.0952 88.6824 72.1569 89.0364 72.2962 89.3623C72.4355 89.6883 72.6488 89.9771 72.9189 90.206C73.189 90.4349 73.5087 90.5975 73.8524 90.681C74.1962 90.7644 74.5546 90.7663 74.8993 90.6866L92.1512 86.6949C93.7652 86.3214 95.2239 87.7469 94.8918 89.3741L89.7664 114.538C89.4218 116.232 91.0072 117.68 92.6567 117.177L103.313 113.932C104.964 113.429 106.552 114.881 106.202 116.576L98.0571 156.103C97.5474 158.576 100.828 159.924 102.195 157.804L103.109 156.388L153.601 55.3602C154.447 53.6687 152.989 51.7398 151.137 52.0987L133.378 55.5347C131.709 55.8572 130.29 54.2991 130.76 52.6627L142.351 12.3791C142.822 10.7386 141.396 9.17977 139.726 9.50787Z" fill="currentColor" />
+    </mask>
+    <g mask="url(#mask1_1_2)">
+      <path opacity="0.15" d="M50.4975 29.2621L199.023 124.127M55.3751 25.2934L203.901 120.158M60.2527 21.3248L208.778 116.19M65.1302 17.3561L213.656 112.221M70.0078 13.3875L218.534 108.253M74.8854 9.41882L223.411 104.284M79.763 5.45017L228.289 100.315M84.6406 1.48153L233.166 96.3466M89.5181 -2.48713L238.044 92.3779M94.3957 -6.45577L242.921 88.4093M99.2733 -10.4244L247.799 84.4406M104.151 -14.3931L252.677 80.472M109.028 -18.3617L257.554 76.5033M113.906 -22.3304L262.432 72.5347M-17.7887 84.8232L130.737 179.688M-12.9111 80.8545L135.615 175.72M-8.0335 76.8859L140.492 171.751M-3.15591 72.9172L145.37 167.782M1.72167 68.9486L150.247 163.814M6.59925 64.9799L155.125 159.845M11.4768 61.0113L160.003 155.876M16.3544 57.0426L164.88 151.908M21.232 53.074L169.758 147.939M26.1096 49.1053L174.635 143.97M30.9872 45.1367L179.513 140.002M35.8647 41.168L184.391 136.033M40.7423 37.1994L189.268 132.064M45.6199 33.2307L194.146 128.096" stroke="currentColor" stroke-width="0.567755" />
+    </g>
+  </svg>
+</template>

packages/devtools/src/app/components/visual/LogoBanner.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="flex gap-2 group" p4 relative>
+    <div op10 group-hover="op100" transition duration-800 class="absolute -bottom-[30px] -left-[20px] w-[80px] h-[80px] bg-linear-to-b from-[#61d9ff] to-transparent blur-[30px]" />
+    <div op10 group-hover="op100" transition duration-800 class="absolute -top-[20px] left-300px w-[80px] h-[80px] bg-[linear-gradient(270deg,_#7a23a1,_#715ebde6_60%,_#715ebde6,_#bd34fe00)] blur-[30px]" />
+    <VisualLogo pointer-events-none h-5em w-5em translate-y--6px />
+    <span pointer-events-none text-3em op50 text-stroke-hex-888 text-stroke-1.5px text-transparent font-bold>DEVTOOLS</span>
+  </div>
+</template>

packages/devtools/src/app/pages/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div p4>
+    <VisualLogoBanner />
     <PanelSessionSelector />
   </div>
 </template>