Working with a wave SVG is presenting me with a challenge. I am noticing a border at the bottom that I would like to eliminate.
Below is my JSX code:
<DarkWave>
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
class="shape-fill"></path>
</svg>
</DarkWave>
This is the CSS portion of the code:
export const DarkWave = styled.div`
width: 100%;
overflow: hidden;
line-height: 0;
height: 95vh;
background-color: #705df2;
transform: rotate(180deg);
margin-bottom: 5rem;
svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 127px;
}
path.shape-fill {
fill: #ffffff;
}
`;
I attempted to make the stroke transparent, but it did not resolve the issue:
svg{
.........
stroke: transparent;
stroke-width: 0px;
}
Here is a glimpse of the problem in an image:
https://i.sstatic.net/zOtKb.png
Your advice on this matter would be greatly appreciated.