What's the best way go about animating this SVG? - reactjs

Question

I've been scrolling through looking various dev pages, many many answers but I think I'm missing the entire concept. It gets very technical and I'm at a loss for understanding. Most the pages I've read turn up things on the burger icon itself - which is what it is just broken down; so really I'm just at a lost for how to clone that. Strokes and Stroke-disarrays... The following is the SVG component (Open Icon):
export default function OpenIcon() {
return (
<svg
width="24"
height="20"
viewBox="0 0 24 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.800049 1.9999C0.800049 1.11625 1.51639 0.399902 2.40005 0.399902H21.6C22.4837 0.399902 23.2001 1.11625 23.2001 1.9999C23.2001 2.88356 22.4837 3.5999 21.6 3.5999H2.40005C1.51639 3.5999 0.800049 2.88356 0.800049 1.9999Z"
fill="#c91249"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.800049 9.9999C0.800049 9.11625 1.51639 8.3999 2.40005 8.3999H21.6C22.4837 8.3999 23.2001 9.11625 23.2001 9.9999C23.2001 10.8836 22.4837 11.5999 21.6 11.5999H2.40005C1.51639 11.5999 0.800049 10.8836 0.800049 9.9999Z"
fill="#c91249"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.800049 17.9999C0.800049 17.1162 1.51639 16.3999 2.40005 16.3999H21.6C22.4837 16.3999 23.2001 17.1162 23.2001 17.9999C23.2001 18.8836 22.4837 19.5999 21.6 19.5999H2.40005C1.51639 19.5999 0.800049 18.8836 0.800049 17.9999Z"
fill="#c91249"
/>
</svg>
);
}
Standard. Non-descript (intense descriptions lol). It is called under <OpenFocusTrap> on a MobileNavagation.jsx to operate as an App. It is then likewise displayed on a normal Header.jsx (see following):
MobileNavagation.jsx
<OpenFocusTrap>
<button
type="button"
className="flex justify-center items-center w-7 h-full"
onClick={() => setIsOpen((previousIsOpen) => !previousIsOpen)}
>
<span className="sr-only">{isOpen ? 'Close' : 'Open'} Menu</span>
{isOpen ? <CloseIcon /> : <OpenIcon />}
</button>.........
/* Additionally */
function CloseIcon() {
return (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 17L17 1M1 1L17 17"
stroke="#c91249"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
and...
Header.jsx
<Headroom>
<header className="h-14 lg:h-15" role="banner">
<div
className={`fixed z-20 h-14 lg:h-15 w-full bg-realative px-3 md:px-4 md:py-2 lg:pt-2 lg:pb-0 mx-auto ${
isMobileNavOpen ? '' : 'bg-opacity-95'
}`}
> ...........
They're cut short, didn't think the full pages necessary. If anyone have any solid sources for animating the paths? And/or a barney style explanation as to how...
Thanks for the assistance.
PS. Current "index.css" for <header> is as follows:
header {
position: sticky;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
background-color: #191c1b;
top: 0;
left: 0;
height: 80px;
width: 100%;
margin-bottom: 10px;
z-index: 1;
font-family: 'Times New Roman', Times, serif;
}
#layer header {
.logo {
letter-spacing: -.16em;
}
.shadow {
box-shadow: 0 9px 9px -9px rgba(0, 0, 0, 0.13);
}
.hidden {
transform: translateY(-110%);
}
Note: Some details that might matter...
I'm using VSCode, WSL as a workspace for Ubuntu.
"Prettier" and "Tailwind" are included within.
"Hydrogen" is the app.
Yarn and github are used primary for repository downloads (npm gives me lip)