JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="box2 type01">
    <i class="icon"></i>
  </div>
  <div class="box2 type02">
    <i class="icon"></i>
  </div>
  <div class="box2 type02 blur01">
    <i class="icon"></i>
  </div>

CSS

.box {
  height: 200px;
  padding: 20px 20px 150px 20px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  /* mask-size: 100% 100%; */
  -webkit-mask-position: bottom left;
  mask-position: bottom left;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='360' height='879' viewBox='0 0 360 879' fill='none'  xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 793.952V0H360V793.952C360 812.688 348.646 828.245 335 828.245H213C201.75 828.245 180 845.02 180 879C180 845.02 157.688 828.245 147 828.245H25C11.3538 828.245 0 812.688 0 793.952Z' fill='%23260945'/%3E%3C/svg%3E%0A");
  background: url('mask.png') no-repeat 0 100%;
  background-size: 100% auto;
}
:root {
 --color: var(--color-a,red);
 --color: var(--color-b,blue);
 --color: var(--color-c,green);
 --color: var(--color-c,orange);
}

.box2 {
  position: relative;
  width: 400px;
  height: 400px;
  resize: both;
  overflow: auto;
}
.box2 .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='289' height='289' viewBox='0 0 289 289' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M162.986 16.6428L185.969 35.4738C191.883 40.3192 198.824 43.7276 206.26 45.4225L235.044 51.9835C248.517 55.0545 258.282 67.3421 258.222 81.7283L258.097 111.771C258.065 119.448 259.763 127.036 263.069 133.953L275.98 160.965C282.145 173.865 278.624 189.354 267.682 198.165L244.544 216.797C238.59 221.591 233.812 227.7 230.564 234.646L217.878 261.768C211.844 274.672 197.924 281.395 184.511 278.216L155.783 271.406C148.361 269.647 140.639 269.647 133.217 271.406L104.489 278.216C91.0761 281.395 77.1562 274.672 71.1215 261.768L58.4364 234.646C55.1883 227.7 50.4099 221.591 44.4563 216.797L21.3175 198.165C10.3758 189.354 6.85465 173.865 13.0204 160.965L25.9309 133.953C29.2367 127.036 30.9353 119.448 30.9033 111.771L30.7782 81.7283C30.7183 67.3421 40.4827 55.0545 53.9559 51.9835L82.7401 45.4225C90.1764 43.7276...