Skip to content

Commit c445fef

Browse files
hasparushasparus
committed
Animate server edges on small screens
1 parent 5a8928f commit c445fef

File tree

1 file changed

+119
-38
lines changed
  • src/components/index-page/what-is-graphql

1 file changed

+119
-38
lines changed

‎src/components/index-page/what-is-graphql/wires.tsx‎

Lines changed: 119 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -92,31 +92,31 @@ function ServerEdges({
9292
highlighted,
9393
highlightedVisible,
9494
edges,
95+
baseStroke,
96+
oddStroke,
97+
evenStroke,
9598
}: {
9699
highlighted: number[]
97100
highlightedVisible: boolean
98101
edges: string[]
102+
baseStroke: string
103+
oddStroke: string
104+
evenStroke: string
99105
}) {
100106
return (
101107
<>
102108
{edges.map((d, index) => {
103109
const isHighlighted = highlighted?.includes(index)
104110
return (
105111
<Fragment key={index}>
106-
<path
107-
d={d}
108-
strokeWidth={1}
109-
className="stroke-[url(#paint_sr_light_linear_671_9150)]"
110-
/>
112+
<path d={d} strokeWidth={1} className={baseStroke} />
111113
{isHighlighted && (
112114
<path
113115
d={d}
114116
strokeWidth={3}
115117
className={clsx(
116118
highlightedVisible ? "opacity-100" : "opacity-0",
117-
index % 2
118-
? "stroke-[url(#paint_sr_pri_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_pri_highlight_linear_static_671_9150)]"
119-
: "stroke-[url(#paint_sr_sec_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_sec_highlight_linear_static_671_9150)]",
119+
index % 2 ? oddStroke : evenStroke,
120120
)}
121121
/>
122122
)}
@@ -562,6 +562,9 @@ export function Wires({ className }: { className?: string }) {
562562
highlighted={[1, 6]}
563563
highlightedVisible={step > 0}
564564
edges={bigScreenServerEdges}
565+
baseStroke="stroke-[url(#paint_sr_light_linear_671_9150)]"
566+
oddStroke="stroke-[url(#paint_sr_pri_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_pri_highlight_linear_static_671_9150)]"
567+
evenStroke="stroke-[url(#paint_sr_sec_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_sec_highlight_linear_static_671_9150)]"
565568
/>
566569
<ServerBoxes
567570
highlighted={step > 0 ? [1, 6] : []}
@@ -661,32 +664,13 @@ const mobileServerBoxes: Array<[string, React.ReactNode]> = [
661664
]
662665
/* eslint-enable react/jsx-key */
663666

664-
function MobileServerEdges() {
665-
return (
666-
<>
667-
<path
668-
d="M130.094 344L130.094 426L91.6745 426L91.6745 454"
669-
stroke="url(#smallscrean_linear2)"
670-
/>
671-
<path
672-
d="M156.002 344L156.002 345.948L156.002 454"
673-
stroke="url(#smallscrean_linear2)"
674-
/>
675-
<path
676-
d="M101.504 344L101.504 398.5L26.0075 398.5L26.0075 454"
677-
stroke="url(#smallscrean_linear2)"
678-
/>
679-
<path
680-
d="M181.918 344L181.916 426L220.335 426L220.337 454"
681-
stroke="url(#smallscrean_linear2)"
682-
/>
683-
<path
684-
d="M210.512 344L210.512 398L286.008 398L286.008 454"
685-
stroke="url(#smallscrean_linear2)"
686-
/>
687-
</>
688-
)
689-
}
667+
const mobileServerEdges = [
668+
"M181.918 344L181.916 426L220.335 426L220.337 454",
669+
"M210.512 344L210.512 398L286.008 398L286.008 454",
670+
"M156.002 344L156.002 345.948L156.002 454",
671+
"M101.504 344L101.504 398.5L26.0075 398.5L26.0075 454",
672+
"M130.094 344L130.094 426L91.6745 426L91.6745 454",
673+
]
690674

691675
function MobileSVGDefinitions() {
692676
return (
@@ -749,7 +733,7 @@ function MobileSVGDefinitions() {
749733
</linearGradient>
750734

751735
<linearGradient
752-
id="smallscrean_linear2"
736+
id="smallscreen_linear2"
753737
x1="66.6927"
754738
y1="344"
755739
x2="66.6927"
@@ -766,6 +750,90 @@ function MobileSVGDefinitions() {
766750
className="dark:[stop-color:hsl(var(--color-neu-100))]"
767751
/>
768752
</linearGradient>
753+
754+
<linearGradient
755+
id="smallscreen_linear2_pri"
756+
gradientUnits="userSpaceOnUse"
757+
>
758+
<stop
759+
stopColor="hsl(var(--color-pri-lighter))"
760+
className="dark:[stop-color:hsl(var(--color-pri-darker))]"
761+
>
762+
<animate
763+
attributeName="offset"
764+
values="-2.562;1.438;-2.562"
765+
begin="2.5s"
766+
dur="5s"
767+
repeatCount="indefinite"
768+
/>
769+
</stop>
770+
<stop
771+
stopColor="hsl(var(--color-pri-dark))"
772+
className="dark:[stop-color:hsl(var(--color-pri-light))]"
773+
>
774+
<animate
775+
attributeName="offset"
776+
values="-1.562;2.438;-1.562"
777+
begin="2.5s"
778+
dur="5s"
779+
repeatCount="indefinite"
780+
/>
781+
</stop>
782+
<stop
783+
stopColor="hsl(var(--color-pri-lighter))"
784+
className="dark:[stop-color:hsl(var(--color-pri-darker))]"
785+
>
786+
<animate
787+
attributeName="offset"
788+
values="-0.562;3.438;-0.562"
789+
begin="2.5s"
790+
dur="5s"
791+
repeatCount="indefinite"
792+
/>
793+
</stop>
794+
</linearGradient>
795+
796+
<linearGradient
797+
id="smallscreen_linear2_sec"
798+
gradientUnits="userSpaceOnUse"
799+
>
800+
<stop
801+
stopColor="hsl(var(--color-sec-light))"
802+
className="dark:[stop-color:hsl(var(--color-sec-darker))]"
803+
>
804+
<animate
805+
attributeName="offset"
806+
values="-2.562;1.438;-2.562"
807+
begin="2.5s"
808+
dur="5s"
809+
repeatCount="indefinite"
810+
/>
811+
</stop>
812+
<stop
813+
stopColor="hsl(var(--color-sec-dark))"
814+
className="dark:[stop-color:hsl(var(--color-sec-light))]"
815+
>
816+
<animate
817+
attributeName="offset"
818+
values="-1.562;2.438;-1.562"
819+
begin="2.5s"
820+
dur="5s"
821+
repeatCount="indefinite"
822+
/>
823+
</stop>
824+
<stop
825+
stopColor="hsl(var(--color-sec-light))"
826+
className="dark:[stop-color:hsl(var(--color-sec-darker))]"
827+
>
828+
<animate
829+
attributeName="offset"
830+
values="-0.562;3.438;-0.562"
831+
begin="2.5s"
832+
dur="5s"
833+
repeatCount="indefinite"
834+
/>
835+
</stop>
836+
</linearGradient>
769837
</defs>
770838
)
771839
}
@@ -789,9 +857,22 @@ function MobileDiagram({ step }: { step: number }) {
789857
baseStroke="url(#smallscreen_linear1)"
790858
highlightedStroke="url(#smallscreen_linear1_high)"
791859
/>
792-
<ClientBoxes boxes={mobileClientBoxes} />
793-
<MobileServerEdges />
794-
<ServerBoxes highlighted={[]} boxes={mobileServerBoxes} />
860+
<ClientBoxes
861+
boxes={mobileClientBoxes}
862+
highlighted={step === 0 ? 0 : undefined}
863+
/>
864+
<ServerEdges
865+
edges={mobileServerEdges}
866+
highlighted={[1, 4]}
867+
highlightedVisible={step > 0}
868+
baseStroke="stroke-[url(#smallscreen_linear2)]"
869+
evenStroke="stroke-[url(#smallscreen_linear2_pri)]"
870+
oddStroke="stroke-[url(#smallscreen_linear2_sec)]"
871+
/>
872+
<ServerBoxes
873+
highlighted={step > 0 ? [1, 4] : []}
874+
boxes={mobileServerBoxes}
875+
/>
795876
<MobileSVGDefinitions />
796877
</svg>
797878
)

0 commit comments

Comments
 (0)