<h1>mask-imageでできること</h1>

<h2>色変更可能なアイコン</h2>
<span class="icon"></span>
<span class="icon gradient"></span>
<span class="icon"></span>
<span class="icon gradient"></span>
<span class="icon"></span>
<span class="icon gradient"></span>

<h2>ワイプ出現</h2>
<label>
  <input type="checkbox" />
  <span class="wipe">Click me!</span>
</label>

<h2>グラデーションで透過させる</h2>
<span class="decrescendo">うわああああああああああああああああああ</span>

.icon {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  
  // 三角形のSVGコード
  // SVGファイルのパスを指定してもOK
  mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 26 30"><path d="M25.133,14.100 L2.472,0.915 C1.673,0.450 0.675,1.031 0.675,1.961 L0.675,28.330 C0.675,29.260 1.673,29.841 2.472,29.376 L25.133,16.191 C25.932,15.727 25.932,14.564 25.133,14.100 Z" /></svg>');
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
  animation: gaming 5s infinite alternate;
  @keyframes gaming {
    0% {
      color: red;
    }
    25% {
      color: yellow;
    }
    50% {
      color: green;
    }
    75% {
      color: blue;
    }
    100% {
      color: pink;
    }
  }
  
  &.gradient {
    background-image: linear-gradient(to right, rgba(9,9,121,1), transparent);
  }
}

.wipe {
  font-size: 2rem;
  font-weight: 700;

  mask-image: linear-gradient(to right, black 0% 50%, rgb(0, 0, 0, 0.2) 50% 100%);
  mask-size: 200% 100%;
  mask-repeat: no-repeat;
  mask-position: 100%;
  transition: mask-position 0.5s;
  input:checked ~ & {
    mask-position: 0;
  }
}

label {
  cursor: pointer;
}

.decrescendo {
  mask-image: linear-gradient(to right, black 30%, transparent);
}