JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="runner">
  <svg viewBox="-15 -15 130 205" class="runner__svg">
    <defs>
        <path d="M 0 50 A 50 50 0 0 1 50 0 L 50 0 A 50 50 0 0 1 100 50 L 100 125 A 50 50 0 0 1 50 175 L 50 175 A 50 50 0 0 1 0 125 Z M 0 50 A 50 50 0 0 1 50 0 L 50 0 A 50 50 0 0 1 100 50 L 100 125 A 50 50 0 0 1 50 175 L 50 175 A 50 50 0 0 1 0 125 Z M 0 50 A 50 50 0 0 1 50 0 L 50 0 A 50 50 0 0 1 100 50 L 100 125 A 50 50 0 0 1 50 175 L 50 175 A 50 50 0 0 1 0 125 Z M 0 50 A 50 50 0 0 1 50 0 L 50 0 A 50 50 0 0 1 100 50 L 100 125 A 50 50 0 0 1 50 175 L 50 175 A 50 50 0 0 1 0 125 Z" id="text-path"/>
    </defs>
    <path d="M 0 50 A 50 50 0 0 1 50 0 L 50 0 A 50 50 0 0 1 100 50 L 100 125 A 50 50 0 0 1 50 175 L 50 175 A 50 50 0 0 1 0 125 Z" fill="none"/>
    <text x="0" id="text" size="10">
        <textPath xlink:href="#text-path">
          Sam and Whitnee are tying the knot Sam and Whitnee are tying the knot
        </textPath>
    </text>
  </svg>
  <div class="runner__bg"></div>
</div>

CSS

body {
  padding: 100px;
}

.runner {
  width: 400px;
  position: relative;
}

.runner:before {
  content: '';
  display: block;
  padding-bottom: 157.15%;
}

.runner__svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  top: 0;
}

.runner__svg text {
  text-transform: uppercase;
  font-size: 11.3px;
}

.runner__bg {
  position: absolute;
  top: 10%;
  left: 15%;
  right: 15%;
  bottom: 10%;
  border-radius: 999px;
  background: no-repeat center url(https://file.hstatic.net/1000206480/article/ariel-and-alissa-wedding29-a1766c0c4c35406381bed3dee27d7e1a_74ecabe6458e4e8b9796aab81a3653e8_grande.jpeg);
  background-size: cover;
}

JavaScript

window.addEventListener('scroll', e => {
	const $text = document.querySelector('#text');
  $text && $text.setAttribute('x', window.scrollY);
})