JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div class="baz one">
  <svg xmlns="http://www.w3.org/2000/svg" class="shape" viewbox="0 0 466.5 525">
    <path fill-rule="evenodd" d="M142.448 3.794c14.458 14.458 11.058 32.173 8.546 45.26l-.062.322c-2.384 12.456-2.914 18.02 1.46 22.394 4.505 4.505 10.07 3.976 22.525 1.592l.323-.062c13.087-2.512 30.802-5.912 45.26 8.546 14.577 14.577 11.001 32.465 8.352 45.45-2.384 12.455-3.046 17.888 1.459 22.393.995.995 2.042 1.744 3.201 2.281 3.983 1.313 9.352.555 18.192-1.137l.322-.061c9.041-1.736 20.292-3.895 31.151-.297 5.202 1.555 10.334 4.382 15.11 9.158 14.458 14.458 11.058 32.173 8.546 45.26l-.062.322c-2.384 12.456-2.913 17.756 1.592 22.261.438.438.836.899 1.196 1.378 4.127 2.075 9.678 1.353 19.617-.549l.322-.062c13.087-2.511 30.802-5.911 45.26 8.547l.168.168.147.147c14.458 14.458 11.058 32.173 8.546 45.26l-.062.322c-2.384 12.455-2.913 17.756 1.592 22.261.287.287.558.584.811.89 4.297 3.174 9.914 2.519 21.003.254l.322-.062c13.087-2.511 30.802-5.911 45.26 8.547 14.458 14.457 11.058 32.173 8.546 45.26l-.062.322c-2.384 12.455-2.913 17.755 1.592 22.261 5.036 5.035 4.904 13.118.002 18.02-4.902 4.903-13.118 4.902-18.021-.001-14.458-14.458-11.058-32.173-8.546-45.26l.062-.322c2.384-12.456 3.046-17.888-1.46-22.394-4.505-4.505-9.938-3.843-22.393-1.459l-.322.061c-12.785 2.454-29.986 5.755-44.252-7.571a12.596 12.596 0 01-.561-.527l-.23-.232-.217-.216c-14.458-14.458-11.058-32.173-8.546-45.26l.061-.322c2.344-12.245 3.024-17.703-1.236-22.165-4.462-4.264-9.919-3.585-22.169-1.24l-.322.062c-13.087 2.511-30.802 5.911-45.26-8.546l-.23-.232-.218-.216c-14.458-14.458-11.058-32.173-8.546-45.261l.062-.322c2.343-12.242 2.895-17.828-1.24-22.167-.909-.868-1.859-1.531-2.9-2.017-3.949-1.296-9.258-.472-18.132 1.227l-.322.062c-9.711 1.863-21.968 4.216-33.553-.599-4.422-1.657-8.761-4.315-12.841-8.395-14.458-14.458-11.058-32.173-8.546-45.26l.062-.322c2.384-12.456 2.913-18.021-1.46-22.394a12.827 12.827 0 01-1.19-1.37c-4.157-2.423-9.662-1.634-20.07.359l-.322.061c-13.087 2.512-30.802...

CSS

/*
SVG dimensions from design are originally 466.5 x 525

i want it to be in a 30vw wide parent and [whatever] associated height

*/


.baz {
  background-color: tan;
  display: inline-block;
  height: calc(80vw * 1.1254);
  width: 80vw;
}

svg {

}
.shape {
  fill: blue;
  width: 100%;
  height: 100%;
}