hard edge gradient

by Lorenzo Brutti

JavaScript

// Circle with Gradient

var width = 300,
  height = 300;

var svg = d3.select('body').append('svg')
  .attr('width', width)
  .attr('height', height);

var g = svg.append('g');

var circle = g.append('circle')
  .attr('cx', width / 2)
  .attr('cy', height / 2)
  .attr('r', height / 3)
  .attr('stroke', 'black');


var gradient = g.append("svg:linearGradient")
  .attr("id", "gradient")
  .attr("x1", "0%")
  .attr("y1", "100%")
  .attr("x2", "0%")
  .attr("y2", "0%");
//.attr("spreadMethod", "pad");

let backgroundColor = "#fff";
let liquidColor = "#00f";

let liquid = gradient.append("svg:stop")
  .attr("offset", "0%")
  .attr("stop-color", liquidColor)
  .attr("stop-opacity", 1);

let background = gradient.append("svg:stop")
  .attr("offset", "0%")
  .attr("stop-color", backgroundColor)
  .attr("stop-opacity", 1);

circle.attr('fill', 'url(#gradient)')
liquid.transition().duration(500).attr('offset', '60%')