Skip to content

Instantly share code, notes, and snippets.

@rcatlord

rcatlord/.block

Last active December 30, 2017 16:21
Show Gist options
  • Save rcatlord/870138a491533f158d5b173277b0424e to your computer and use it in GitHub Desktop.
Save rcatlord/870138a491533f158d5b173277b0424e to your computer and use it in GitHub Desktop.
Download ZIP
Typography
Raw
.block
license: cc-by-4.0
height: 500
scrolling: no
border: yes
Raw
index.html
<!DOCTYPE html>
<html lang='en-GB'>
<head>
<meta charset='utf-8'>
<title>Typography</title>
<script src='http://d3js.org/d3.v4.min.js'></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<svg width='1000' height='100'>
<text x='10' y='30' style='text-anchor:start; font-family:Helvetica; font-size:1.2em; fill:none; stroke:#D83B3C; stroke-width:0.5'>
<tspan>Helvetica</tspan>
<tspan x='10' dy='20'>Haas Type Foundry</tspan>
<tspan x='10' dy='20'>1957</tspan>
</text>
</svg>
<svg id='typeface' width='1000' height='300'>
<text x='205' y='40' style='text-anchor:start; font-family:Helvetica; font-size:2.5em; fill:none; stroke:#D83B3C; stroke-width:1'>
<tspan>And the days are not full enough</tspan>
<tspan x='205' dy='50'>And the nights are not full enough</tspan>
<tspan x='205' dy='50'>And life slips by like a field mouse</tspan>
<tspan x='405' dy='50'>Not shaking the grass.</tspan>
<tspan x='685' dy='60' font-size='0.5em' stroke-width='0.8'>- Ezra Pound</tspan>
</text>
</svg>
<svg width='1000' height='100'>
<text x='960' y='30' style='text-anchor:end; font-family:Arial; font-size:1.2em; fill:none; stroke:#000; stroke-width:0.5;'>
<tspan>Arial</tspan>
<tspan x='960' dy='20'>Monotype</tspan>
<tspan x='955' dy='20'>1982</tspan>
</text>
</svg>
<script>
d3.select('#typeface')
.select('text')
.on('mouseover', function(){d3.select(this)
.style('font-family', 'Arial')
.style('stroke', '#000');})
.on('mouseout', function(){d3.select(this)
.style('font-family', 'Helvetica')
.style('stroke', '#D83B3C');});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment