<div class="item">
  <svg viewBox="0 0 900 550" xmlns="http://www.w3.org/2000/svg" id="svg">
    <defs>

      <pattern id='pattern' width='100%' height='100%' x='50' y='200'>
        <circle cx='230' cy='300' r='250' fill='orange' id="circle"></circle>
      </pattern>

      <clipPath id="cp">
        <text x="300" y="200" class="cphead">Интернет- </text>
        <text x="300" y="280" class="cphead">магазин</text>
        <text x="300" y="350" class="cpsub">Полноценный онлайн-магазин</text>
        <text x="300" y="390" class="cpsub">для вашего бизнеса</text>
        <rect x="300" y="447" width="500" height="5" fill="#000" />
        <path d="M600,440 610,450 600,460z" transform="translate(200,0)" />
      </clipPath>

    </defs>
    <text x="300" y="200" class="head">Интернет- </text>
    <text x="300" y="280" class="head">магазин</text>
    <text x="300" y="350" class="sub">Полноценный онлайн-магазин</text>
    <text x="300" y="390" class="sub">для вашего бизнеса</text>
    <rect x="300" y="447" width="500" height="5" fill="#000" />
    <path d="M600,440 610,450 600,460z" transform="translate(200,0)" />

    <rect width="100%" height="100%" clip-path="url(#cp)" fill="url(#pattern)" />

  </svg>
</div>

.item {
  max-width: 480px;
  margin: 30px auto;
  background: #f5f5f5;
}

.head,
.cphead {
  text-transform: uppercase;
  font-weight: 900;
  font-family: sans-serif;
  font-size: 80px;
}

.sub,
.cpsub {
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 20px;
}

svg.addEventListener("mousemove", function (event) {
  event = event || window.event;

  circle.setAttribute("cx", event.offsetX * 2 + "px");
  circle.setAttribute("cy", event.offsetY * 2 + "px");
});

svg.addEventListener("mouseout", function () {
  circle.setAttribute("cx", "230");
  circle.setAttribute("cy", "300");
});