Profile card component using Mobile-first approach

To set up the background images you can do something along the lines of this:

background-color: var(--theme-dark-cyan);
  background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  /* top img is offset 52 percent of the vw from the right and offset 35 of the vh from the bottom*/
  /* bottom img is offset 48 percent of the vw from the left and offset 52 of the vh from the top*/

Hope you find this feedback useful 👍

You can check my solution for the answer. Long story short, set the circles as background images for body and position them.

Lice site url: https://dselimovic02.github.io/profile-card/

Cheers!