logo test

_.md

[ Launch: test ] 3224e974c606500c0969 by Y4suyuki
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"logo test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.css

.logo0 text {
  font-size: 40px;
}

.logo1 path {
  fill: none

}

inlet.js

var svg = d3.select("svg")

var logoData = [
  {
    size: 100,
    baseColor: '#3b62a4',
    background: '#ffffff'
  },
  {
    size: 100,
    baseColor: '#ffffff',
    background: '#3b62a4'
  }
];

svg.selectAll('g.logo')
.data(logoData)
.enter()
.append('g')
.attr('class', 'logo')
.append('rect')
.attr('x', 0)
.attr('y', function(d,i) { return i * d.size * 1.2; })
.attr('width', 400)
.attr('height', function(d) { return d.size * 1.2; })
.attr('fill', function(d) { return d.background; });

svg.selectAll('g.logo')
.append('g')
.attr('transform', function(d, i) {
  return 'translate(' + d.size * 0.1 + ',' + (i * d.size * 1.2 + d.size * 0.1) + ')';
})
.attr('class', 'logo0')
.call(createLogo0);

svg.selectAll('g.logo')
.append('g')
.attr('transform', function(d, i) {
  return 'translate(' + d.size * 1.3 + ',' + (i * d.size * 1.2 + d.size * 0.1) + ')';
})
.attr('class', 'logo1')
.call(createLogo1);


function createLogo0(selection) {
    selection.append('rect')
    .attr('width', function(d) { return d.size; })
    .attr('height', function(d) { return d.size; })
    .attr('x', 0)
    .attr('y', 0)
    .attr('fill', function(d) { return d.baseColor; })

    selection.append('text')
    .attr('x', function(d) { return d.size * 0.17; })
    .attr('y', function(d) { return d.size * 0.62; })
    .attr('fill', function(d) { return d.background; })
    .text('SW');
}



function createLogo1(selection) {
    selection.append('rect')
    .attr('width', function(d) { return d.size; })
    .attr('height', function(d) { return d.size; })
    .attr('x', 0)
    .attr('y', 0)
    .attr('fill', function(d) { return d.baseColor; })
  
  var line = d3.svg.line()
  .x(function(d) { return d.x})
  .y(function(d) { return d.y});

  selection.append('rect')
  .attr('width', function(d) { return d.size * 0.8; })
  .attr('height', function(d) { return d.size * 0.8; })
  .attr('x', function(d) { return d.size * 0.1; })
  .attr('y', function(d) { return d.size * 0.1; })
  .attr('fill', function(d) { return d.background; });

  selection.append('path')
  .attr('stroke-width', function(d) { return d.size * 0.1; })
  .attr('stroke', function(d) { return d.baseColor; })
  .datum(function(d) {
    return [{x: d.size * 0.55, y: d.size * 0.06},
            {x: d.size * 0.37, y: d.size * 0.35},
            {x: d.size * 0.63, y: d.size * 0.65},
            {x: d.size * 0.45, y: d.size * 0.94}];
  })
  .attr('d', line);
}