tophtucker/BodoniXT.ttf

## BodoniXT.ttf

      
        

                Raw

        
        
          
            
          
          
            
              BodoniXT.ttf
            
          
        
      
    
    

        
            View raw
        
    

  

## index.html
<!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>

<body></body>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

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>
	<!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>

	<body></body>

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>

	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>