arisa-logo.html

<div id="renderer">
  <svg id="svg"></svg>
  <canvas id="canvas"></canvas>
</div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script src="https://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script src="https://canvg.googlecode.com/svn/trunk/canvg.js"></script> 

<script>
  var svg = $("svg").attr('width', 1200).attr('height', 800)
  var canvas = $("canvas").attr('width', 1200).attr('height', 800).css('display', "none")

  var p1 = {x:  25, y: 25, stroke: "#ff3333", strokeWidth: 4, fill: "#ff7f0e", text: "A"}
  var p2 = {x:  50, y: 75, stroke: "#000000", strokeWidth: 0, fill: "#1f77b4", text: "R"}
  var p3 = {x:  75, y: 25, stroke: "#000000", strokeWidth: 0, fill: "#2ca02c", text: "I"}
  var p4 = {x: 100, y: 75, stroke: "#000000", strokeWidth: 0, fill: "#2ca02c", text: "S"}
  var p5 = {x: 125, y: 25, stroke: "#000000", strokeWidth: 0, fill: "#d62728", text: "A"}
  var points = [p1, p2, p3, p4, p5]

  var mkCircle = function(p) {
    var circle = $("<circle />")
    circle
      .attr('cx', p.x)
      .attr('cy', p.y)
      .attr('r', 20)
      .attr('stroke', p.stroke)
      .attr('stroke-width', p.strokeWidth)
      .attr('fill', p.fill)
    return circle
  }
  var mkText = function(p) {
    var text = $("<text />")
    text
      .text(p.text)
      .attr('x', p.x)
      .attr('y', p.y)
      .attr('text-anchor', 'middle')
      .attr('dy', 8)
      .attr('font-size', '24px')
      .attr('font-family', 'Century Gothic')
      .attr('fill', "#ffffff")
    return text
  }
  var mkLine = function(p1, p2) {
    var line = $("<line />")
    line
      .attr('x1', p1.x)
      .attr('y1', p1.y)
      .attr('x2', p2.x)
      .attr('y2', p2.y)
      .attr('stroke', "#999999")
      .attr('stroke-width', 4)
    return line
  }

  $(function() {
    //svg.css('background', "#000000")

    var g = $("<g></g>").attr('transform', "scale(" + 1200 / 150 + ")")

    g.append(mkLine(p1, p2))
    g.append(mkLine(p2, p3))
    g.append(mkLine(p3, p4))
    g.append(mkLine(p4, p5))
    g.append(mkLine(p2, p4))

    points.forEach(function(p) {
      g.append(mkCircle(p))
      g.append(mkText(p))
    })

    svg.append(g)

    $("#renderer").html($("#renderer").html())

    canvg(document.getElementById("canvas"), "<svg>" + $("#svg").html() + "</svg>")

    var data = document.getElementById("canvas").toDataURL()
    $("body").append($("<a></a>").attr('href', data).attr('download', "arisa.png").text("Download as PNG"))
  })
</script>