LDND3 circle

index.html

<canvas></canvas>

<svg><path/></svg>

LDND3 circle.markdown

LDND3 circle

A Pen by Robert Monfera on CodePen.

License.

script.js

/* 
 * D3 lookalike functionality
 */

// We don't have a d3 object as we selectively import plugins
const d3 = Object.assign({}, d3_path)

// We have no d3.select or d3.selectAll, so... no data binding
function select(s) {
  return document.querySelector(s)
}

function attr(element, attribute, value) {
  element.setAttribute(attribute, value)
}

function style(element, property, value) {
  element.style[property] = value
}

/*
 * Substrate-independent renderer (common to SVG and Canvas)
 */

const width = 300
const height = 150

const lineWidth = 5
const radius = 50

function drawCircle(context, s) {
  const r = radius * s
  context.arc(1.5 * r , 1.5 * r, r, 0, 2 * Math.PI)
}

function drawCurve(context, s) {
  context.moveTo(250 * s, 20 * s)
  context.bezierCurveTo(
    100 * s,  50 * s, 
     10 * s, 140 * s, 
    110 * s,  30 * s
  )
}

function render(context, scaler) {
  drawCircle(context, scaler)
  drawCurve(context, scaler)
}

/*
 * Rendering to the canvas
 */

const antialiasingMultiplier = window.devicePixelRatio

const canvas = select('canvas')
style(canvas, 'width', width + 'px')
style(canvas, 'height', height + 'px')
attr(canvas, 'width', width * antialiasingMultiplier)
attr(canvas, 'height', height * antialiasingMultiplier)

const canvasContext = canvas.getContext('2d')

function renderOnCanvas(context) {
  context.lineWidth = antialiasingMultiplier * lineWidth
  render(context, antialiasingMultiplier)
  context.stroke()
}

renderOnCanvas(canvasContext)

/*
 * Rendering to SVG
 */

const svg = select('svg')
attr(svg, 'width', width)
attr(svg, 'height', height)

const svgPath = select('path')
attr(svgPath, 'fill', 'none')
attr(svgPath, 'stroke', 'black')
attr(svgPath, 'stroke-width', lineWidth + 'px')

const svgContext = d3.path()

function renderOnSvg(context) {
  render(context, 1)
}

renderOnSvg(svgContext)
attr(svgPath, "d", svgContext.toString())

// the end.

scripts

<script src="https://d3js.org/d3-path.v0.1.min.js"></script>

style.css

svg, canvas {
  position: absolute;
  top: 0; 
  left: 0;
  opacity: 0.5;
}