JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="mask"></div>

<div class="mask02"></div>

SCSS

body {
  height: 100%;
  background: #000000;
}
.mask {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 40px auto;
  border-radius: 50%;
  background: #ff6600;
  /* -webkit-mask-image: radial-gradient(
    circle at 0% 0%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 80px,
    rgba(0, 0, 0, 1) 80px,
    rgba(0, 0, 0, 1) 100%
  ); */
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 10% 10%;
  /* -webkit-mask-composite: add; */
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(
      circle at 50% 50%,
      rgba(0, 61, 255, 0) 0%,
      rgba(0, 61, 255, 0) 20px,
      rgba(0, 61, 255, 1) 20px,
      rgba(0, 61, 255, 1) 100%
    );
  }
}


.mask02 {
  position: relative;
  width: 700px;
  height: 700px;
  margin: 40px auto;
  border-radius: 50%;
  background: #ff6600;
  -webkit-mask-image: radial-gradient(
    circle at 0% 0%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 50px,
    rgba(0, 0, 0, 1) 50px,
    rgba(0, 0, 0, 1) 100%
  );
  /* -webkit-mask-size: 100% 100%; */
  -webkit-mask-size: 100px 100px;
  -webkit-mask-repeat: repeat;
  /* -webkit-mask-position: 50px 50px; */
  /* -webkit-mask-composite: add; */
}