D3 Examples - Julian ambigram

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <title>Julian Ambigram</title>
  <style type="text/css">
    body {
      margin: 0;
      background: #eee;
    }
​
    svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: #fff;
    }
​
    path, circle {
      fill: #555;
    }
  </style>
</head>
<body>
​
<svg id="julian" width="100%" height="100%" viewBox="0 0 900 900"></svg>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
var width = 900, height = 900
​
var svg = d3.select('#julian').append('g')
  .attr('transform', 'translate(' + [width/2, height/2] + ')')
​
var customElastic = d3.easeElastic.period(0.6)
​
function rotate() {
  if (d3.active(this)) return
​
  d3.select(this)
    .transition()
      .duration(3000)
      .ease(customElastic)
      .attr('transform', 'rotate(180,0,0)')
      .on('end', function() {
        d3.select(this).attr('transform', 'rotate(0,0,0)')
      })
}
​
​
svg.append('use')
  .attr('xlink:href', '#left')
  .attr('transform', 'rotate(180)')
​
svg = svg.append('g').attr('id', 'left')
​
svg.on('click', rotate)
​
​
var r1 = 22
var r2 = 77
var d = r2 - r1
var r2 = 82
var padding = 20
var extend = 12
​
var pi = Math.PI
​
var J = svg.append('path')
var U = svg.append('path')
var L = svg.append('path')
var I = svg.append('circle')
​
var scale = d3.scaleLinear().domain([0, 60]).range([10, 120])
​
render()
​
function render() {
  // window.requestAnimationFrame(render);
  // var now = new Date()
  // r1 = scale(now.getSeconds())
​
  var path = d3.path()
  path.moveTo(r1, -r2-r1)
  path.arc(0,0,r1,0,-pi)
  path.lineTo(-r1, -r1-extend)
  path.lineTo(-r1-d, -r1)
  path.arc(0,2*extend,r2,pi,0, true)
  path.lineTo(r1+d, -r2-r1)
  path.closePath()
​
  J.attr('transform', 'translate(' + [-r2*3-d-padding/2-padding*2, 0] + ')')
    .attr('d', path.toString())
​
  var path = d3.path()
  path.moveTo(r1+d, -r1)
  path.lineTo(r1, -r1)
  path.arc(0,0,r1,0,-pi)
  path.lineTo(-r1, -r1)
  path.lineTo(-r1-d, -r1)
  path.arc(0,2*extend,r2,pi,0, true)
  path.closePath()
​
  U.attr('transform', 'translate(' + [-r2-d-padding/2-padding, -padding] + ')')
    .attr('d', path.toString())
​
  var path = d3.path()
  path.moveTo(-d/2, 0)
  path.lineTo(-d/2, -r2*2+r1)
  path.lineTo(d/2, -r2*2+r1)
  path.lineTo(d/2, r2+d/2-padding)
  path.lineTo(-d/2, r2+d/2-padding)
  path.closePath()
​
  L.attr('transform', 'translate(' + [-d/2 - padding/2, 0] + ')')
    .attr('d', path.toString())
​
  I.attr('cx', -d/2-padding)
    .attr('cx', -d/2-padding/2)
    .attr('cy', r2+d)
    .attr('r', d/2+padding/2)
    .attr('r', d/2*1.1)
​
  // svg.append('circle')
  //   .attr('r', padding/2)
  //   .style('fill', 'red')
}
​
​
​
</script>
​
​
​
</body>
</html>
    