<div class="svgShape"></div>
.svgShape {
position: relative;
width: 606px;
height: 514px;
filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}
.svgShape::before {
display: block;
height: 100%;
content: "";
background: linear-gradient(125.72deg, #837DFB 2.15%, #D389E8 50.52%, #FFE1DC 100%, #FFC5BB 100%);
-webkit-mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='606' height='514' viewBox='0 0 606 514' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M604.835 273.842C601.181 295.792 591.786 312.864 571.43 321.959C528.421 341.216 484.472 398.53 475.234 451.17C462.237 525.2 389.999 534.651 328.043 475.05C295.682 443.904 263.842 426.272 221.46 427.898C156.163 430.287 58.1406 357.323 49.9459 287.001C47.3361 264.34 49.9459 242.949 52.2947 221.507C55.3742 194.171 46.762 169.071 26.3014 145.901C23.2219 142.345 20.299 138.788 17.5326 135.079C2.50035 115.11 -3.97187 89.7051 2.50035 65.6718C14.0355 22.9403 57.9318 2.56539 120.827 15.5728C154.493 22.5846 184.297 19.9425 213.161 9.11992C253.508 -5.81831 284.877 -3.17618 320.161 22.7879C341.718 38.6407 350.852 65.875 371.678 82.8457C429.563 129.998 462.968 124.205 521.374 141.938C576.649 158.807 612.925 225.572 604.887 273.791L604.835 273.842Z' fill='%23FAFAFD'/%3E%3C/svg%3E%0A");;
}
/* 見た目用 */
body {
background: #666;
}
div, svg {
display: block;
margin: 0 auto;
}
p {
color: white;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.