square pulse

_.md

[ Launch: square pulse ] 6258175 by enjalot

config.json

{"description":"square pulse","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}},"fullscreen":false,"play":true,"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,"thumbnail":"http://i.imgur.com/IYv8YFD.png"}

inlet.js

var svg = d3.select("svg");

var stroke = 28;
var maxstroke = 200;
var diff = stroke;

svg.append("rect")
.style({
  fill: "#CC3838",
  stroke: "#000000"
})

tributary.run = function(g,t) {
  stroke = (1.02 + Math.sin(t))/2 * maxstroke
  var x = 251 - stroke/2;
  var y = 221 - stroke/2;
  var width = 300 + stroke;
  
  svg.select("rect")
  .attr({
    x: x,
    y: y,
    width: width,
    height: width,
    "stroke-width": stroke
  })
}

/*
svg.append("rect")
.attr({
  x: x + diff/2,
  y: y - 40 + diff/2,
  width: width,
  height: 20,
  fill: "#fff"
})
*/