-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Optimise waveform SVG and use pattern to repeat
- Loading branch information
1 parent
e815d10
commit b95fa50
Showing
1 changed file
with
35 additions
and
16 deletions.
There are no files selected for viewing
51 changes: 35 additions & 16 deletions
51
dotcom-rendering/src/components/Card/components/SvgWaveform.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,37 @@ | ||
| import { useId } from 'react'; | ||
| import { palette } from '../../../palette'; | ||
|
|
||
| export const SvgWaveform = () => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 720 40" | ||
| width="720" | ||
| height="40" | ||
| preserveAspectRatio="none" | ||
| focusable={false} | ||
| aria-hidden={true} | ||
| > | ||
| <path | ||
| fill={palette('--card-media-waveform')} | ||
| d="M0 34h2v6H0v-6ZM3 19h2v21H3V19ZM6 1h2v39H6V1ZM9 1h2v39H9V1ZM12 2h2v38h-2V2ZM15 4h2v36h-2V4ZM18 6h2v34h-2V6ZM21 8h2v32h-2V8ZM24 9h2v31h-2V9ZM27 6h2v34h-2V6ZM30 7h2v33h-2V7ZM33 7h2v33h-2V7ZM36 9h2v31h-2V9ZM39 11h2v29h-2V11ZM42 7h2v33h-2V7ZM45 8h2v32h-2V8ZM48 6h2v34h-2V6ZM51 7h2v33h-2V7ZM54 9h2v31h-2V9ZM57 10h2v30h-2V10ZM60 12h2v28h-2V12ZM63 14h2v26h-2V14ZM66 16h2v24h-2V16ZM69 16h2v24h-2V16ZM72 11h2v29h-2V11ZM75 12h2v28h-2V12ZM78 13h2v27h-2V13ZM81 14h2v26h-2V14ZM84 14h2v26h-2V14ZM87 15h2v25h-2V15ZM90 16h2v24h-2V16ZM93 18h2v22h-2V18ZM96 18h2v22h-2V18ZM99 17h2v23h-2V17ZM102 19h2v21h-2V19ZM105 20h2v20h-2V20ZM108 21h2v19h-2V21ZM111 9h2v31h-2V9ZM114 11h2v29h-2V11ZM117 11h2v29h-2V11ZM120 10h2v30h-2V10ZM123 7h2v33h-2V7ZM126 8h2v32h-2V8ZM129 9h2v31h-2V9ZM132 10h2v30h-2V10ZM135 12h2v28h-2V12ZM138 12h2v28h-2V12ZM141 4h2v36h-2V4ZM144 5h2v35h-2V5ZM147 5h2v35h-2V5ZM150 6h2v34h-2V6ZM153 8h2v32h-2V8ZM156 10h2v30h-2V10ZM159 8h2v32h-2V8ZM162 4h2v36h-2V4ZM165 4h2v36h-2V4ZM168 5h2v35h-2V5ZM171 3h2v37h-2V3ZM174 4h2v36h-2V4ZM177 4h2v36h-2V4ZM180 5h2v35h-2V5ZM183 7h2v33h-2V7ZM186 8h2v32h-2V8ZM189 10h2v30h-2V10ZM192 13h2v27h-2V13ZM195 15h2v25h-2V15ZM198 13h2v27h-2V13ZM201 6h2v34h-2V6ZM204 8h2v32h-2V8ZM207 10h2v30h-2V10ZM210 11h2v29h-2V11ZM213 11h2v29h-2V11ZM216 12h2v28h-2V12ZM219 13h2v27h-2V13ZM222 5h2v35h-2V5ZM225 5h2v35h-2V5ZM228 7h2v33h-2V7ZM231 8h2v32h-2V8ZM234 9h2v31h-2V9ZM237 9h2v31h-2V9ZM240 10h2v30h-2V10ZM243 10h2v30h-2V10ZM246 11h2v29h-2V11ZM249 12h2v28h-2V12ZM252 13h2v27h-2V13ZM255 14h2v26h-2V14ZM258 15h2v25h-2V15ZM261 15h2v25h-2V15ZM264 14h2v26h-2V14ZM267 15h2v25h-2V15ZM270 16h2v24h-2V16ZM273 18h2v22h-2V18ZM276 19h2v21h-2V19ZM279 12h2v28h-2V12ZM282 13h2v27h-2V13ZM285 13h2v27h-2V13ZM288 14h2v26h-2V14ZM291 15h2v25h-2V15ZM294 16h2v24h-2V16ZM297 4h2v36h-2V4ZM300 7h2v33h-2V7ZM303 6h2v34h-2V6ZM306 8h2v32h-2V8ZM309 9h2v31h-2V9ZM312 5h2v35h-2V5ZM315 7h2v33h-2V7ZM318 10h2v30h-2V10ZM321 11h2v29h-2V11ZM324 13h2v27h-2V13ZM327 14h2v26h-2V14ZM330 14h2v26h-2V14ZM333 15h2v25h-2V15ZM336 15h2v25h-2V15ZM339 7h2v33h-2V7ZM342 7h2v33h-2V7ZM345 8h2v32h-2V8ZM348 9h2v31h-2V9ZM351 11h2v29h-2V11ZM354 11h2v29h-2V11ZM357 12h2v28h-2V12ZM360 13h2v27h-2V13ZM363 12h2v28h-2V12ZM366 14h2v26h-2V14ZM369 11h2v29h-2V11ZM372 12h2v28h-2V12ZM375 13h2v27h-2V13ZM378 11h2v29h-2V11ZM381 12h2v28h-2V12ZM384 13h2v27h-2V13ZM387 9h2v31h-2V9ZM390 11h2v29h-2V11ZM393 7h2v33h-2V7ZM396 7h2v33h-2V7ZM399 8h2v32h-2V8ZM402 9h2v31h-2V9ZM405 9h2v31h-2V9ZM408 5h2v35h-2V5ZM411 1h2v39h-2V1ZM414 5h2v35h-2V5ZM417 6h2v34h-2V6ZM420 7h2v33h-2V7ZM423 9h2v31h-2V9ZM426 1h2v39h-2V1ZM429 2h2v38h-2V2ZM432 6h2v34h-2V6ZM435 8h2v32h-2V8ZM438 6h2v34h-2V6ZM441 8h2v32h-2V8ZM444 9h2v31h-2V9ZM447 10h2v30h-2V10ZM450 11h2v29h-2V11ZM453 13h2v27h-2V13ZM456 14h2v26h-2V14ZM459 13h2v27h-2V13ZM462 13h2v27h-2V13ZM465 14h2v26h-2V14ZM468 14h2v26h-2V14ZM471 4h2v36h-2V4ZM474 5h2v35h-2V5ZM477 7h2v33h-2V7ZM480 8h2v32h-2V8ZM483 9h2v31h-2V9ZM486 8h2v32h-2V8ZM489 2h2v38h-2V2ZM492 3h2v37h-2V3ZM495 4h2v36h-2V4ZM498 7h2v33h-2V7ZM501 0h2v40h-2V0ZM504 2h2v38h-2V2ZM507 3h2v37h-2V3ZM510 4h2v36h-2V4ZM513 5h2v35h-2V5ZM516 3h2v37h-2V3ZM519 5h2v35h-2V5ZM522 6h2v34h-2V6ZM525 8h2v32h-2V8ZM528 8h2v32h-2V8ZM531 9h2v31h-2V9ZM534 11h2v29h-2V11ZM537 12h2v28h-2V12ZM540 9h2v31h-2V9ZM543 11h2v29h-2V11ZM546 11h2v29h-2V11ZM549 12h2v28h-2V12ZM552 13h2v27h-2V13ZM555 14h2v26h-2V14ZM558 14h2v26h-2V14ZM561 16h2v24h-2V16ZM564 17h2v23h-2V17ZM567 18h2v22h-2V18ZM570 19h2v21h-2V19ZM573 13h2v27h-2V13ZM576 6h2v34h-2V6ZM579 7h2v33h-2V7ZM582 7h2v33h-2V7ZM585 9h2v31h-2V9ZM588 11h2v29h-2V11ZM591 13h2v27h-2V13ZM594 15h2v25h-2V15ZM597 14h2v26h-2V14ZM600 15h2v25h-2V15ZM603 15h2v25h-2V15ZM606 16h2v24h-2V16ZM609 12h2v28h-2V12ZM612 10h2v30h-2V10ZM615 11h2v29h-2V11ZM618 12h2v28h-2V12ZM621 13h2v27h-2V13ZM624 15h2v25h-2V15ZM627 4h2v36h-2V4ZM630 7h2v33h-2V7ZM633 6h2v34h-2V6ZM636 8h2v32h-2V8ZM639 9h2v31h-2V9ZM642 5h2v35h-2V5ZM645 7h2v33h-2V7ZM648 10h2v30h-2V10ZM651 11h2v29h-2V11ZM654 13h2v27h-2V13ZM657 14h2v26h-2V14ZM660 14h2v26h-2V14ZM663 15h2v25h-2V15ZM666 15h2v25h-2V15ZM669 11h2v29h-2V11ZM672 7h2v33h-2V7ZM675 8h2v32h-2V8ZM678 9h2v31h-2V9ZM681 11h2v29h-2V11ZM684 11h2v29h-2V11ZM687 12h2v28h-2V12ZM690 13h2v27h-2V13ZM693 12h2v28h-2V12ZM696 14h2v26h-2V14ZM699 11h2v29h-2V11ZM702 12h2v28h-2V12ZM705 13h2v27h-2V13ZM708 11h2v29h-2V11ZM711 12h2v28h-2V12ZM714 13h2v27h-2V13ZM717 9h2v31h-2V9Z" | ||
| /> | ||
| </svg> | ||
| ); | ||
| export const SvgWaveform = () => { | ||
| const id = useId(); | ||
|
|
||
| return ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| preserveAspectRatio="none" | ||
| focusable={false} | ||
| aria-hidden={true} | ||
| > | ||
| <pattern | ||
| id={`waveform-pattern-${id}`} | ||
| viewBox="0 0 300 40" | ||
| width="300" | ||
| height="100%" | ||
| patternUnits="userSpaceOnUse" | ||
| preserveAspectRatio="none" | ||
| > | ||
| <path | ||
| stroke={palette('--card-media-waveform')} | ||
| stroke-width="2" | ||
| d="M1,24V40M4,15V40M7,8V40M10,1V40M13,2V40M16,4V40M19,6V40M22,8V40M25,9V40M28,6V40M31,7V40M34,7V40M37,9V40M40,11V40M43,7V40M46,8V40M49,6V40M52,7V40M55,9V40M58,10V40M61,12V40M64,14V40M67,16V40M70,16V40M73,11V40M76,12V40M79,13V40M82,14V40M85,14V40M88,15V40M91,16V40M94,18V40M97,18V40M100,17V40M103,19V40M106,20V40M109,21V40M112,9V40M115,11V40M118,11V40M121,10V40M124,7V40M127,8V40M130,9V40M133,10V40M136,12V40M139,12V40M142,4V40M145,5V40M148,5V40M151,6V40M154,8V40M157,10V40M160,8V40M163,4V40M166,4V40M169,5V40M172,3V40M175,4V40M178,4V40M181,5V40M184,7V40M187,8V40M190,10V40M193,13V40M196,15V40M199,13V40M202,6V40M205,8V40M208,10V40M211,11V40M214,11V40M217,12V40M220,13V40M223,5V40M226,5V40M229,7V40M232,8V40M235,9V40M238,9V40M241,10V40M244,10V40M247,11V40M250,12V40M253,13V40M256,14V40M259,15V40M262,15V40M265,14V40M268,15V40M271,16V40M274,18V40M277,19V40M280,12V40M283,13V40M286,13V40M289,14V40M292,15V40M295,18V40M298,20V40" | ||
| /> | ||
| </pattern> | ||
| <rect | ||
| x="0" | ||
| y="0" | ||
| width="100%" | ||
| height="100%" | ||
| fill={`url(#waveform-pattern-${id})`} | ||
| ></rect> | ||
| </svg> | ||
| ); | ||
| }; |