Responsive Zara

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZARA</title>

<style>

/* https://www.dafont.com/bodoni-xt.font */
@font-face {
  font-family: 'BodoniXT';
  src: url('BodoniXT.ttf');
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: 'BodoniXT', Georgia;
}

span {
  position: absolute;
  font-size: 100px;
  top: 50%;
}

</style>

const text = Array.from("ZARA")
const margin = 200
const scaleX = d3.scaleLinear()
  .domain([975, 400])
  .range([1.5, 1])
const scaleY = d3.scaleLinear()
  .domain([975, 400])
  .range([0.75, 1.5])
const body = d3.select("body")
body.selectAll("span")
  .data(text)
  .enter()
  .append("span")
  .text(d => d)

function render() {
  const x = d3.scaleLinear()
    .domain([0, text.length - 1])
    .range([margin, innerWidth - margin])
  d3.selectAll("span")
    .style("left", (d, i) => `${x(i)}px`)
    .style("transform", `
      scaleX(${scaleX(innerWidth)})
      scaleY(${scaleY(innerWidth)})
      translate(-50%, -50%)
    `)
}

d3.timer(render)

</script>
</html>

https://d3js.org/d3.v5.min.js