I'm trying to replicate the look of a solar eclipse. I have a startup screen that shows a <div> with a border-radius at 50% and a width/height of 20vw. This achieves the rounded look of course and with some box-shadow I pretty much accomplish a look.
But I'd like to enhance the aesthetic with an overlay with some kind of blend-mode (I've tinkered with color-dodge and hard-light so I'll do both somehow)
But I'm running into a wall right now because I cannot fit my eclipse overlay to be perfect around my circle. And I worry that specifically going down to decimal points will just have my design break later because of the units I'm using to make it responsive but I don't know how else I'd try to keep my current layout while syncing my overlay with my shape.
I feel like there must be a better way.
I'm new to stack overflow so I'm sorry if I formatted this poorly. I've attached the overlay image I'm using to this question as well as the image reference I'm trying to replicate
overlay image (incase earlier link doesn't work):https://imgur.com/a/jYMDkaR
.startup-screen { position: absolute; z-index: 99; display: flex; overflow: hidden; align-items: center; flex-direction: column; justify-content: center; width: 100vw; height: 100vh; background: black;}.startup-screen__eclipse { display: flex; align-items: center; justify-content: center; width: 20%; height: 40%; padding: 5%; box-shadow: 17px 17px 18px rgba(255, 255, 255, 1), 5px 5px 5px rgb(255, 213, 0), 6px 6px 6px rgb(66, 230, 255), 50px 50px 100px rgb(230, 207, 255); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%;}.startup-screen__eclipse__overlay { position: absolute; width: fit-content; height: fit-content; border: 2px solid red; top: 13%; left: 33%; /* mix-blend-mode: color-dodge; */}.startup-screen__eclipse__overlay img { width: 35vw; height: 35vw; mix-blend-mode: hard-light;}<div class="startup-screen" id="startupScreen"><div class="startup-screen__eclipse"><div class="startup-screen__eclipse__overlay"><img src="https://i.sstatic.net/6OwwlZBM.png"> </div></div></div>