<div class="cpath one"></div>
<div class="cpath two"></div>
<div class="cpath three"></div>
html{
--background-color: white;
}
body{min-height: 100vh; position: relative;
background-color:var(--background-color)
}
.cpath{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAAuCAYAAABgd+QDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTnU1rJkAAAEHElEQVRoQ+Wb6VbiQBCFef9HcRSRHVFE9CA7ouC+O/McPXU7qQhtCSHpLMiP74C3GkgudTtpEjNKqdRQqt2pg9KNyruU6W9zTJKIYtz0Bu/qoHijjSpV71S7++b8XZxprTf8oGHya+NEFOOkWL1VOTImR8acnj+T9FVrd161YajVju8XakkginFw3HxUuQIZQdSOlhtRO3rQhqHb8Nysx4UoRslo/Kn2XZPwaNZ/YnT56Zjrdhqia46JGlGMikL5Vu3nySTCjJxfdJe5plVXdKRtRNE2zbNnlYVJtJMwzKwHAdHlGB9RpM16FIiiLYbjD6+TsvmpQpTMMWFAFNkwYNZtI4o2yJdvtEEAnWXWbVKt3+uuBXhu1m0himE4aT2p7IFjUt5S5PwCo9BhMK3bt38AEMUgTK7/eSZhfhrSUc8cEwddiiZ3GTDrYRDFdSkf3qk9bdRM1RvxTLar0NF058uKpWiKol8QOZgEMEeZ9aS5QrdTp2vTLERTFFeByGHN5sRups7aLyTLY9MATOIuK9CXOpn+I1keuwxRXAZ+CeBuQvzMeppBNLnTKofrR1MUJdA9bBK6Ct1ljtkEEE2Y5RyIpmtFUxRNYA4bhXnKrG8i5xcvegoBFZ8JEUWmfvyg9nIwabZxkfMLjHJMm66MpigOaJnCnQSzNjVyfsE5IXcZ6PwQzW/Cb4ycX+qNh6Vd5j1xzplm2iQYxvo2gmjCBxg3f5LtRo5MwtxEJLVMSRvd/ps+j+SUDUefKsN/nLSi/WVgU+EuA5ld90mn90Y1+QXbDC/pspS+DEzSzlEEca3OHLyt8JKOuwqmeUW9jNHnVFN97Y71bcTzgpi/0LswCG7uuoPw2OnGfwUlSS4oZbz/0pJuYTBzcvqkXwS2pctwoZf3+afzy2/CPLj3gLvst5rWaD5+NcZc5CREcZ7B6MN7MzBIyX0HYekP39Wf/WuN3i86jzLHmIiiBFzfdd+4WIn3QoRt8KspG9Vo+l/SieIyStVb74Nwv4JZTzPY3h1324NczBDFVeCowYaB8STdS6QeRy57pR8xtZhj/CCKfsHtQs5GXKc2mgXaLt7GsEkQxXWBaTvut4Yb0cx6EsAYbM8OmYSfkc16EEQxCO3uq/72sHHYyKSiic/lbQAXFr88UQwD4gjTkogmRw5mRfHZohiWy6u/3kbjMepoLkSOjnL4fHOMDUTRFjqa2AkCOzGe2N0JRG7+nKl1Hu3FXlG0jXMAcHbIVjy8uOM96f3NehSIYhToaLo7B+PanWDRxO2V3ElRRk5CFKOk5e5skEkYpwC6Q4l1lim2EMU40DFyO2SVabh/NO7ISYhiXOA/J3guA+ZRE3XoPCbOyEmIYtygs9gQPO+TSfooRxr0JCInIYpJMb/WBDDMHJMcKvMfAg60jVd+RlwAAAAASUVORK5CYII=');
position: absolute;
box-shadow:inset 0 0 10px 10px var(--background-color);
}
.one{
width:30vw;height:40vh;left:10%;top:10%;
border-radius: 30% 90%;
}
.two{
width:30vw;height:40vh;right:10%;bottom:10%;
border-radius: 90% 30%;
}
.three{
width:30vw;height:40vh;right:20%;bottom:50%;
border-radius: 50%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.