Skip to content

Instantly share code, notes, and snippets.

@aubergene

aubergene/.block

Last active August 29, 2016 20:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aubergene/2d675dda7198b5414190a0a61ade6239 to your computer and use it in GitHub Desktop.
Save aubergene/2d675dda7198b5414190a0a61ade6239 to your computer and use it in GitHub Desktop.
Download ZIP
Barbican logo
Raw
.block
---
border: "no"
license: cc-by-4.0
Raw
README.md

The Barbican has a nice animated logo, which I've tried to recreate using JavaScript and D3.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Barbican logo</title>
<style type="text/css">
body {
margin: 0;
}
svg.barbican-logo {
display: block;
width: 100vmin;
height: 100vmin;
margin: 0 auto;
animation-timing-function: ease-out;
animation: barbican-logo 2s infinite alternate;
}
@keyframes barbican-logo {
0% {
transform: scale(5) rotate(0.5turn);
}
60% {
transform: scale(5) rotate(0.5turn);
}
95% {
transform: scale(1) rotate(0);
}
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
var width = 900,
height = 500,
radius = Math.min(width, height) * 0.48;
var svg = d3.select('body').append('svg')
.attr('class', 'barbican-logo')
.attr('viewBox', [0, 0, width, height])
svg = svg.append('g')
.attr('transform', 'translate(' + [width/2, height/2] + ')')
var s = Math.PI / 6
var path = d3.path()
path.arc(0, 0, radius, -s, Math.PI+s)
path.closePath()
svg.append('path')
.attr('d', path)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment