Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 09:15:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: give svgs unique ids to avoid clash

Browse Source
This commit is contained in:
Jean-Philippe Sirois
2020-09-02 07:38:55 -04:00
parent 59a965911a
commit ae7ebddb1b
7 changed files with 114 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/useId.tsx
+14
View File
@@ -0,0 +1,14 @@
import { v4 as uuidV4 } from "uuid"
import { useState } from "react"
export const useId = () => {
// Utilize useState instead of useMemo because React
// makes no guarantees that the memo store is durable
const [id] = useState(() => {
return uuidV4()
})
return id
}
export default useId
src/images/jetbrains-logo.tsx
+11 -8
View File
@@ -1,22 +1,25 @@
import React from "react"
import useId from "../hooks/useId"
const JetbrainsLogo: React.FC = (props) => {
const id = useId()
return (
<svg fill="none" viewBox="0 0 121 131" {...props}>
<path
fill="url(#jetbrains1)"
fill={`url(#jetbrains1-${id})`}
d="M118.62 71.8a4.68 4.68 0 00-6.2-7l-83.8 45.9a10.07 10.07 0 00-1.1 18c3.4 2 7.5 1.8 10.7-.2.2-.2.5-.3.7-.5l78-54.8c.4-.3 1.5-1.1 1.7-1.4z"
/>
<path
fill="url(#jetbrains2)"
fill={`url(#jetbrains2-${id})`}
d="M118.82 65.1L55.02 2.5A7.7 7.7 0 1043.72 13c.4.4.8.7 1.2 1l67.4 57.7c.8.7 1.8 1.2 3 1.3 2.6.1 4.7-1.8 4.9-4.4a5 5 0 00-1.4-3.5z"
/>
<path
fill="url(#jetbrains3)"
fill={`url(#jetbrains3-${id})`}
d="M57.12 59.5c-.1 0-39.4-31-40.2-31.5l-1.8-.9a11.18 11.18 0 00-9.8 20c.7.4 1.3.7 2 .9.4.2 45.4 18.8 45.4 18.8a4.3 4.3 0 004.4-7.3z"
/>
<path
fill="url(#jetbrains4)"
fill={`url(#jetbrains4-${id})`}
d="M49.32 0c-1.7 0-3.3.6-4.6 1.5L4.92 28.3c-.1.1-.2.1-.2.2h-.1A11.14 11.14 0 007.32 48c3.6 1.4 7.5.7 10.4-1.4.7-.5 1.3-1 1.8-1.6l34.6-31.2c1.8-1.4 3-3.6 3-6.1 0-4.2-3.5-7.7-7.8-7.7z"
/>
<path fill="#000" d="M85.62 37.4h-51v51h51v-51z" />
@@ -30,7 +33,7 @@ const JetbrainsLogo: React.FC = (props) => {
/>
<defs>
<linearGradient
id="jetbrains1"
id={`jetbrains1-${id}`}
x1="31.86"
x2="110.26"
y1="120.56"
@@ -41,7 +44,7 @@ const JetbrainsLogo: React.FC = (props) => {
<stop offset="1" stopColor="#F37B3D" />
</linearGradient>
<linearGradient
id="jetbrains2"
id={`jetbrains2-${id}`}
x1="48.38"
x2="119.94"
y1="6.91"
@@ -53,7 +56,7 @@ const JetbrainsLogo: React.FC = (props) => {
<stop offset="1" stopColor="#F37B3D" />
</linearGradient>
<linearGradient
id="jetbrains3"
id={`jetbrains3-${id}`}
x1="52.97"
x2="10.56"
y1="63.64"
@@ -66,7 +69,7 @@ const JetbrainsLogo: React.FC = (props) => {
<stop offset=".96" stopColor="#ED3D7D" />
</linearGradient>
<linearGradient
id="jetbrains4"
id={`jetbrains4-${id}`}
x1="52.2"
x2="10.79"
y1="3.7"
src/images/tph-logo.tsx
+5 -2
View File
@@ -1,10 +1,13 @@
import React from "react"
import useId from "../hooks/useId"
const TPHLogo: React.FC = (props) => {
const id = useId()
return (
<svg fill="none" viewBox="0 0 473 573" {...props}>
<path
fill="url(#logo_gradient)"
fill={`url(#logo_gradient-${id})`}
d="M.9 46.76c60.76.25 121.5 1.8 182.26 1.22 44.73-.43 89.03 21.05 116.19 56.6 22.74 28.63 33.14 65.93 31 102.24 1.96 63.88-43.05 125.73-104.83 142.8-18.36 5.67-37.66 5.85-56.7 6.5-12.38.07-23.4 9.97-24.33 22.34-1.9 28.84 0 57.83-.93 86.7-3.27 43.2-32.86 82.86-73.1 98.76-22.1 9.65-46.57 9.04-70.17 8.68C.07 542.29.6 512 0 481.73c15.35-1.82 34.15 2.44 45.74-10.58 9.68-10.36 5.6-25.36 6.85-38.06 2.54-28.94-3.41-59.11 7.17-86.95A131.4 131.4 0 0179.5 310.3c-14.35-19.65-24.07-43.04-25.11-67.54-.72-26.26-.79-52.52-2.48-78.74-.35-12.09-10.5-23.17-22.6-24.29-9.64-1.18-19.37-.93-29.01-1.32.35-30.57-.87-61.16.6-91.65zm143.01 98.93c1.22 28.7 2.66 57.47.72 86.16-1.61 16.93 10.51 33.22 27.01 37.02 32.1 8.8 66.4-15.92 72.75-47.63 7.9-32.36-16-67.59-48.43-73.72-15.65-2.75-31.6-1.62-48.52-1.76l-3.52-.07z"
/>
<path
@@ -17,7 +20,7 @@ const TPHLogo: React.FC = (props) => {
/>
<defs>
<linearGradient
id="logo_gradient"
id={`logo_gradient-${id}`}
x1="250.28"
x2="-161.47"
y1="79.37"
src/images/waves-bot.tsx
+13 -10
View File
@@ -1,6 +1,9 @@
import React from "react"
import useId from "../hooks/useId"
const WavesBot: React.FC = (props) => {
const id = useId()
return (
<svg
fill="none"
@@ -8,35 +11,35 @@ const WavesBot: React.FC = (props) => {
viewBox="0 0 1825 862"
{...props}
>
<g mask="url(#bot_mask)">
<g mask={`url(#bot_mask-${id})`}>
<path
fill="url(#bot_gradient1)"
fill={`url(#bot_gradient1-${id})`}
d="M-339.72 271.98S-38.1 54.63 236.91 121.17c275 66.53 328.23 416.94 550.01 483.48 221.78 66.53 550.01-190.73 754.05-235.09 204.04-44.35 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.76 88.71 567.76s-891.56 137.5-993.58 128.63c-102.01-8.87-1042.36-128.63-1042.36-128.63l-541.14-146.37 57.66-638.73z"
opacity=".64"
/>
<path
fill="url(#bot_gradient2)"
fill={`url(#bot_gradient2-${id})`}
d="M-339.72 313.71S-38.1 96.37 236.91 162.91c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.75 88.71 567.75s-891.56 137.5-993.58 128.64c-102.01-8.87-1042.36-128.64-1042.36-128.64l-541.14-146.37 57.66-638.73z"
opacity=".18"
/>
<path
fill="url(#bot_gradient3)"
fill={`url(#bot_gradient3-${id})`}
d="M-556.34 194.47S-254.72-22.87 20.3 43.67c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.02-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.02 119.76 248.39 141.94 88.71 567.75 88.71 567.75s-891.56 137.5-993.57 128.64C867.49 1099.34-72.86 979.57-72.86 979.57L-614 833.2l57.66-638.73z"
opacity=".18"
/>
<path
fill="url(#bot_gradient4)"
fill={`url(#bot_gradient4-${id})`}
d="M-323.82 379.3S-22.2 161.94 252.8 228.47c275 66.54 328.23 416.95 550.01 483.48 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.01 119.76 248.4 141.94 88.72 567.75 88.72 567.75s-891.56 137.5-993.58 128.64c-102.02-8.87-1042.36-128.64-1042.36-128.64l-541.14-146.37 57.66-638.73z"
opacity=".91"
/>
<path
fill="url(#bot_gradient5)"
fill={`url(#bot_gradient5-${id})`}
d="M-494.73 403.14S-193.11 185.8 81.9 252.34c275 66.53 328.23 416.94 550.01 483.47 221.78 66.54 550.01-190.73 754.05-235.08 204.04-44.36 301.62-22.18 550.01 119.76 248.4 141.93 88.72 567.75 88.72 567.75s-891.56 137.5-993.58 128.63C929.1 1308.01-11.25 1188.24-11.25 1188.24l-541.14-146.37 57.66-638.73z"
/>
</g>
<defs>
<linearGradient
id="bot_gradient1"
id={`bot_gradient1-${id}`}
x1="1872.87"
x2="573.95"
y1="602.05"
@@ -48,7 +51,7 @@ const WavesBot: React.FC = (props) => {
<stop offset="1" stopColor="#FEAF6D" />
</linearGradient>
<linearGradient
id="bot_gradient2"
id={`bot_gradient2-${id}`}
x1="1872.87"
x2="573.95"
y1="643.79"
@@ -60,7 +63,7 @@ const WavesBot: React.FC = (props) => {
<stop offset="1" stopColor="#FEAF6D" />
</linearGradient>
<linearGradient
id="bot_gradient3"
id={`bot_gradient3-${id}`}
x1="1574.79"
x2="448.43"
y1="459.89"
@@ -72,7 +75,7 @@ const WavesBot: React.FC = (props) => {
<stop offset="1" stopColor="#FEAF6D" />
</linearGradient>
<linearGradient
id="bot_gradient4"
id={`bot_gradient4-${id}`}
x1="1993.87"
x2="1553.41"
y1="1147.96"
src/images/waves-top.tsx
+13 -10
View File
@@ -1,6 +1,9 @@
import React from "react"
import useId from "../hooks/useId"
const WavesTop: React.FC = (props) => {
const id = useId()
return (
<svg
fill="none"
@@ -11,7 +14,7 @@ const WavesTop: React.FC = (props) => {
{...props}
>
<mask
id="top_mask"
id={`top_mask-${id}`}
width="1825"
height="859"
x="0"
@@ -20,29 +23,29 @@ const WavesTop: React.FC = (props) => {
>
<path fill="#C4C4C4" d="M0 0h1825v859H0z" />
</mask>
<g mask="url(#top_mask)">
<g mask={`url(#top_mask-${id})`}>
<path
fill="url(#top_gradient1)"
fill={`url(#top_gradient1-${id})`}
d="M2615.01 917.26s-390.49 148.08-669.53-4.11c-279.03-152.2-234.85-547.89-456.12-684.6-221.28-136.7-652.27 46.94-886.56 35.71-234.3-11.23-333.72-63.68-561.94-289.95-228.22-226.27 68.91-641.84 68.91-641.84s1007.37 110.17 1115.48 149.48c108.11 39.3 1093.57 442.8 1093.57 442.8L2863.39 241l-248.38 676.26z"
/>
<path
fill="url(#top_gradient2)"
fill={`url(#top_gradient2-${id})`}
d="M2615.01 879.5s-390.49 148.08-669.53-4.11c-279.03-152.2-234.85-547.89-456.12-684.6-221.28-136.7-652.27 46.94-886.56 35.71-234.3-11.23-333.72-63.68-561.94-289.95-228.22-226.27 68.91-641.84 68.91-641.84S1117.14-595.12 1225.25-555.8c108.11 39.3 1093.57 442.8 1093.57 442.8l544.57 316.25-248.38 676.26z"
/>
<path
fill="url(#top_gradient3)"
fill={`url(#top_gradient3-${id})`}
d="M2615.01 897.39s-390.49 148.08-669.53-4.12c-279.03-152.2-234.85-547.88-456.12-684.6-221.28-136.7-652.27 46.95-886.56 35.72C368.5 233.16 269.08 180.7 40.86-45.56c-228.22-226.27 68.91-641.84 68.91-641.84s1007.37 110.17 1115.48 149.48c108.11 39.3 1093.57 442.8 1093.57 442.8l544.57 316.25-248.38 676.26z"
opacity=".68"
/>
<path
fill="url(#top_gradient4)"
fill={`url(#top_gradient4-${id})`}
d="M1826.79 455.45s-182.14 69.07-312.28-1.92c-130.15-70.98-109.54-255.54-212.75-319.3-103.2-63.76-304.22 21.9-413.5 16.66-109.27-5.24-155.65-29.7-262.09-135.24-106.44-105.54 32.14-299.36 32.14-299.36s469.85 51.38 520.27 69.71c50.43 18.34 567.42 50.5 567.42 50.5l337.5 96-256.71 522.95z"
opacity=".39"
/>
</g>
<defs>
<linearGradient
id="top_gradient1"
id={`top_gradient1-${id}`}
x1="310.32"
x2="945.33"
y1="-84.55"
@@ -54,7 +57,7 @@ const WavesTop: React.FC = (props) => {
<stop offset="1" stopColor="#00FCFF" />
</linearGradient>
<linearGradient
id="top_gradient2"
id={`top_gradient2-${id}`}
x1="500.6"
x2="1128.26"
y1="11.42"
@@ -66,7 +69,7 @@ const WavesTop: React.FC = (props) => {
<stop offset="1" stopColor="#00FCFF" />
</linearGradient>
<linearGradient
id="top_gradient3"
id={`top_gradient3-${id}`}
x1="310.32"
x2="945.33"
y1="-104.42"
@@ -78,7 +81,7 @@ const WavesTop: React.FC = (props) => {
<stop offset="1" stopColor="#00FCFF" />
</linearGradient>
<linearGradient
id="top_gradient4"
id={`top_gradient4-${id}`}
x1="930.96"
x2="1210.61"
y1="106.95"