From 563218ed2187b64becf4d7c7e471ac0c74a356d9 Mon Sep 17 00:00:00 2001
From: Stephen Buley <stephen.a.buley@gmail.com>
Date: Wed, 13 Mar 2024 12:29:02 +0100
Subject: [PATCH] change pngs to use as mask with white background

---
 public/Background Mask.png        | Bin 0 -> 1489 bytes
 src/components/InstrumentPage.tsx |  15 ++++++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 public/Background Mask.png

diff --git a/public/Background Mask.png b/public/Background Mask.png
new file mode 100644
index 0000000000000000000000000000000000000000..82e56a16211cd0a39a0c3b10c632954ed4eb5e5e
GIT binary patch
literal 1489
zcmeAS@N?(olHy`uVBq!ia0y~yVEh8aaU5(wk>bF&OhAgWz$3Dlfq`2Xgc%uT&5-~K
zG8PB9J29*~C-V}>VM%xNb!1@J*w6hZk(GggHO<q-F{Fa=?NvrW1_d4l#jW+}TaW!)
z!1B9}n?d5O4nu;?LS~1C3yca5FBk+AN*Fi<tQc50WEq%R_!t<S*c%u|rALEhG&ziB
ggVE9fPpMc@Z^pJGRPW7pU<u6N>FVdQ&MBb@02O>GD*ylh

literal 0
HcmV?d00001

diff --git a/src/components/InstrumentPage.tsx b/src/components/InstrumentPage.tsx
index 28bdeda..cd0ddeb 100644
--- a/src/components/InstrumentPage.tsx
+++ b/src/components/InstrumentPage.tsx
@@ -62,7 +62,20 @@ export default function InstrumentPage<T extends Record<string, string[]>>({
           musicNotes[`${clef}${note}` as keyof typeof musicNotes] +
           musicNotes.staffEnd}
         </p> */}
-      <img src={`/${note}${clef}.png`} alt={`${note}${clef}`} />
+      <img
+        style={{
+          width: '300px',
+          height: '300px',
+          maskImage: `url(/${note}${clef}.png)`,
+          WebkitMaskImage: `url(/${note}${clef}.png)`,
+          maskPosition: 'center',
+          WebkitMaskPosition: 'center',
+          maskRepeat: 'no-repeat',
+          WebkitMaskRepeat: 'no-repeat',
+        }}
+        src={`/Background Mask.png`}
+        alt={`${note} ${clef}`}
+      />
       <div className="valves">
         {valveSet ? (
           valveSet.map((valve) => ({