Julian ambigram

I first saw an ambigram many years ago and wondered if I could make my name in to one, and it turned out I could. I first created it using Flash, and have done many versions over the years, some have been laser cut into business cards. This one was created with D3 path using just lines and arcs.

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

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>

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