mask

by Simon Hi

HTML

<div class="conteneur-illustrations-visuelles">
  <div class="conteneur-illustration1">
    <img class="illustration-robot1" src="https://upload.wikimedia.org/wikipedia/commons/d/de/Curiosity_-_Robot_Geologist_and_Chemist_in_One%21.jpg" alt="robot1">
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.conteneur-illustration1 {
  display: flex;
  justify-content: center;
  background: #777;
}

.illustration-robot1 {
  display: block;
  width: 634px;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg"><path d="M240 360H400V80A80 80 0 0 0 240 80Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg"><path d="M240 360H400V80A80 80 0 0 0 240 80Z"/></svg>');
}