Skip to content

feat: add browser inspect illustration #3108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add browser inspect illustration #3108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 169 additions & 0 deletions packages/gamut-illustrations/src/BrowserInspect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
import * as React from 'react';

import { IllustrationProps } from './types';

export const BrowserInspect: React.FC<IllustrationProps> = ({
'aria-hidden': ariaHidden,
className,
height,
width,
}) => (
<svg
aria-hidden={ariaHidden}
className={className}
fill="none"
height={height}
viewBox="0 0 1159 724"
width={width}
xmlns="http://www.w3.org/2000/svg"
>
<path
clipRule="evenodd"
d="M0.0159793 38.4214C0.00715422 36.2123 1.79084 34.4142 3.99996 34.4054L974.8 30.5257C977.01 30.5169 978.808 32.3006 978.816 34.5097L981.539 716.088C981.548 718.297 979.764 720.095 977.555 720.104L6.75475 723.984C4.54563 723.993 2.74762 722.209 2.73879 720L0.0159793 38.4214Z"
fill="#10162F"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M29.5257 8.91167C29.5169 6.70255 31.3006 4.90454 33.5097 4.89571L1004.31 1.01599C1006.52 1.00716 1008.32 2.79085 1008.33 4.99997L1011.05 686.579C1011.06 688.788 1009.27 690.586 1007.07 690.595L36.2645 694.474C34.0554 694.483 32.2574 692.699 32.2486 690.49L29.5257 8.91167Z"
fill="white"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M29.5257 8.91167C29.5169 6.70255 31.3006 4.90454 33.5097 4.89571L1004.31 1.01599C1006.52 1.00716 1008.32 2.79085 1008.33 4.99997L1011.05 686.579C1011.06 688.788 1009.27 690.586 1007.07 690.595L36.2645 694.474C34.0554 694.483 32.2574 692.699 32.2486 690.49L29.5257 8.91167Z"
fillRule="evenodd"
stroke="#10162F"
strokeWidth="2"
/>
<path
clipRule="evenodd"
d="M85.4193 66.7513C80.218 66.7513 75.9863 62.5196 75.9863 57.3183C75.9863 52.117 80.218 47.8854 85.4193 47.8854C90.6206 47.8854 94.8522 52.117 94.8522 57.3183C94.8522 62.5196 90.6206 66.7513 85.4193 66.7513Z"
fill="#10162F"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M85.4192 42.0327C76.9773 42.0327 70.1333 48.8767 70.1333 57.3185C70.1333 65.7604 76.9773 72.6044 85.4192 72.6044C93.861 72.6044 100.705 65.7604 100.705 57.3185C100.705 48.8767 93.861 42.0327 85.4192 42.0327ZM85.4192 53.7385C87.3935 53.7385 88.9992 55.3441 88.9992 57.3185C88.9992 59.2929 87.3935 60.8985 85.4192 60.8985C83.4428 60.8985 81.8391 59.2929 81.8391 57.3185C81.8391 55.3441 83.4428 53.7385 85.4192 53.7385Z"
fill="#10162F"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M135.645 66.7513C130.444 66.7513 126.212 62.5196 126.212 57.3183C126.212 52.117 130.444 47.8854 135.645 47.8854C140.847 47.8854 145.078 52.117 145.078 57.3183C145.078 62.5196 140.847 66.7513 135.645 66.7513Z"
fill="#10162F"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M135.645 42.0327C127.203 42.0327 120.359 48.8767 120.359 57.3185C120.359 65.7604 127.203 72.6044 135.645 72.6044C144.087 72.6044 150.931 65.7604 150.931 57.3185C150.931 48.8767 144.087 42.0327 135.645 42.0327ZM135.645 53.7385C137.62 53.7385 139.225 55.3441 139.225 57.3185C139.225 59.2929 137.62 60.8985 135.645 60.8985C133.669 60.8985 132.065 59.2929 132.065 57.3185C132.065 55.3441 133.669 53.7385 135.645 53.7385Z"
fill="#10162F"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M185.871 66.7513C180.67 66.7513 176.438 62.5196 176.438 57.3183C176.438 52.117 180.67 47.8854 185.871 47.8854C191.073 47.8854 195.304 52.117 195.304 57.3183C195.304 62.5196 191.073 66.7513 185.871 66.7513Z"
fill="#10162F"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M185.871 42.0327C177.429 42.0327 170.585 48.8767 170.585 57.3185C170.585 65.7604 177.429 72.6044 185.871 72.6044C194.313 72.6044 201.157 65.7604 201.157 57.3185C201.157 48.8767 194.313 42.0327 185.871 42.0327ZM185.871 53.7385C187.846 53.7385 189.451 55.3441 189.451 57.3185C189.451 59.2929 187.846 60.8985 185.871 60.8985C183.895 60.8985 182.291 59.2929 182.291 57.3185C182.291 55.3441 183.895 53.7385 185.871 53.7385Z"
fill="#10162F"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M630.363 508.48C630.372 510.689 628.588 512.487 626.379 512.496L458.797 513.166C456.588 513.175 454.79 511.391 454.781 509.182L453.555 202.422C453.546 200.213 455.33 198.415 457.539 198.406L625.12 197.736C627.33 197.727 629.128 199.511 629.136 201.72L630.363 508.48Z"
fill="#10162F"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M630.363 508.48C630.372 510.689 628.588 512.487 626.379 512.496L458.797 513.166C456.588 513.175 454.79 511.391 454.781 509.182L453.555 202.422C453.546 200.213 455.33 198.415 457.539 198.406L625.12 197.736C627.33 197.727 629.128 199.511 629.136 201.72L630.363 508.48Z"
fillRule="evenodd"
stroke="#10162F"
strokeWidth="2"
/>
<path
clipRule="evenodd"
d="M455.047 510.385C455.053 512.064 454.011 513.569 452.436 514.152L327.505 560.424C324.899 561.389 322.127 559.468 322.115 556.689L320.893 250.449C320.886 248.77 321.929 247.266 323.504 246.682L448.433 200.408C451.039 199.443 453.811 201.364 453.822 204.143L455.047 510.385Z"
fill="white"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M461.899 509.336C461.906 511.039 460.835 512.56 459.229 513.126L327.508 559.542C324.913 560.456 322.19 558.538 322.179 555.786L320.894 249.498C320.887 247.795 321.958 246.274 323.564 245.708L455.283 199.29C457.878 198.376 460.601 200.294 460.612 203.046L461.899 509.336Z"
fillRule="evenodd"
stroke="#10162F"
strokeWidth="2"
/>
<path
clipRule="evenodd"
d="M1157.46 579.609L1129.84 604.564L1033.25 497.633L1060.87 472.678L1157.46 579.609Z"
fill="white"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M1157.46 579.609L1129.84 604.564L1033.25 497.633L1060.87 472.678L1157.46 579.609Z"
fillRule="evenodd"
stroke="#10162F"
strokeWidth="2"
/>
<path
clipRule="evenodd"
d="M1099.51 428.167C1099.51 488.001 1051 536.508 991.167 536.508C931.33 536.508 882.825 488.001 882.825 428.167C882.825 368.332 931.33 319.825 991.167 319.825C1051 319.825 1099.51 368.332 1099.51 428.167Z"
fill="white"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M1099.51 428.167C1099.51 488.001 1051 536.508 991.167 536.508C931.33 536.508 882.825 488.001 882.825 428.167C882.825 368.332 931.33 319.825 991.167 319.825C1051 319.825 1099.51 368.332 1099.51 428.167Z"
fillRule="evenodd"
stroke="#10162F"
strokeWidth="2"
/>
<path
clipRule="evenodd"
d="M1086.07 428.167C1086.07 480.58 1043.58 523.07 991.166 523.07C938.751 523.07 896.262 480.58 896.262 428.167C896.262 375.754 938.751 333.264 991.166 333.264C1043.58 333.264 1086.07 375.754 1086.07 428.167Z"
fill="#10162F"
fillRule="evenodd"
/>
<path
clipRule="evenodd"
d="M1086.07 428.167C1086.07 480.58 1043.58 523.07 991.166 523.07C938.751 523.07 896.262 480.58 896.262 428.167C896.262 375.754 938.751 333.264 991.166 333.264C1043.58 333.264 1086.07 375.754 1086.07 428.167Z"
fillRule="evenodd"
stroke="#10162F"
strokeWidth="2"
/>
<mask
height="187"
id="mask0_2702_207"
maskUnits="userSpaceOnUse"
style={{ maskType: 'alpha' }}
width="187"
x="898"
y="332"
>
<path
d="M898.099 425.515C898.099 477.013 939.846 518.76 991.342 518.76C1042.84 518.76 1084.59 477.013 1084.59 425.515C1084.59 374.019 1042.84 332.268 991.342 332.268C939.846 332.268 898.099 374.019 898.099 425.515Z"
fill="white"
/>
</mask>
<g mask="url(#mask0_2702_207)">
<path
d="M905.727 298.056C903.257 303.33 899.319 304.197 891.242 304.398V308.603H903.591V341.178H891.242V346.451H919.879V341.178H909.732V298.056H905.727ZM948.881 298.056C946.411 303.33 942.473 304.197 934.396 304.398V308.603H946.745V341.178H934.396V346.451H963.033V341.178H952.886V298.056H948.881ZM991.701 347.319C1003.92 347.319 1008.66 337.039 1008.66 322.02C1008.66 307.001 1003.92 297.189 991.701 297.189C979.486 297.189 974.813 307.001 974.813 322.02C974.813 337.039 979.486 347.319 991.701 347.319ZM981.021 322.02C981.021 308.803 984.425 302.395 991.701 302.395C997.509 302.395 1000.91 306.534 1001.98 314.944L981.088 324.49C981.021 323.689 981.021 322.888 981.021 322.02ZM991.701 342.046C985.961 342.046 982.623 337.84 981.488 329.563L1002.38 319.884C1002.45 320.618 1002.45 321.286 1002.45 322.02C1002.45 335.237 998.977 342.046 991.701 342.046Z"
fill="white"
/>
<path
d="M905.393 427.421C917.609 427.421 922.348 417.141 922.348 402.122C922.348 387.103 917.609 377.291 905.393 377.291C893.178 377.291 888.505 387.103 888.505 402.122C888.505 417.141 893.178 427.421 905.393 427.421ZM894.713 402.122C894.713 388.905 898.118 382.497 905.393 382.497C911.201 382.497 914.605 386.636 915.673 395.047L894.78 404.592C894.713 403.791 894.713 402.99 894.713 402.122ZM905.393 422.148C899.653 422.148 896.315 417.942 895.18 409.665L916.074 399.986C916.14 400.72 916.14 401.388 916.14 402.122C916.14 415.339 912.669 422.148 905.393 422.148ZM948.881 378.158C946.411 383.432 942.473 384.3 934.396 384.5V388.705H946.745V421.28H934.396V426.553H963.033V421.28H952.886V378.158H948.881ZM992.035 378.158C989.565 383.432 985.627 384.3 977.55 384.5V388.705H989.899V421.28H977.55V426.553H1006.19V421.28H996.04V378.158H992.035Z"
fill="white"
/>
<path
d="M905.727 458.26C903.257 463.534 899.319 464.402 891.242 464.602V468.807H903.591V501.382H891.242V506.655H919.879V501.382H909.732V458.26H905.727ZM948.881 458.26C946.411 463.534 942.473 464.402 934.396 464.602V468.807H946.745V501.382H934.396V506.655H963.033V501.382H952.886V458.26H948.881ZM991.701 507.523C1003.92 507.523 1008.66 497.243 1008.66 482.224C1008.66 467.205 1003.92 457.393 991.701 457.393C979.486 457.393 974.813 467.205 974.813 482.224C974.813 497.243 979.486 507.523 991.701 507.523ZM981.021 482.224C981.021 469.007 984.425 462.599 991.701 462.599C997.509 462.599 1000.91 466.738 1001.98 475.149L981.088 484.694C981.021 483.893 981.021 483.092 981.021 482.224ZM991.701 502.25C985.961 502.25 982.623 498.044 981.488 489.767L1002.38 480.088C1002.45 480.822 1002.45 481.49 1002.45 482.224C1002.45 495.441 998.977 502.25 991.701 502.25Z"
fill="white"
/>
</g>
</svg>
);
1 change: 1 addition & 0 deletions packages/gamut-illustrations/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export * from './Blueprint';
export * from './BlueprintWhite';
export * from './BookAndNotepad';
export * from './Browser';
export * from './BrowserInspect';
export * from './BrowserLock';
export * from './BrowserPuzzle';
export * from './ChatBox';
Expand Down
Loading