JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<svg width="100%" height="100%" viewBox="-100 -100 200 200">
  <g id="corners">
    <circle r="20" cx="-100" cy="-100" fill="none" stroke="blue"></circle>
    <circle r="20" cx="100" cy="-100" fill="none" stroke="blue"></circle>
    <circle r="20" cx="100" cy="100" fill="none" stroke="blue"></circle>
    <circle r="20" cx="-100" cy="100" fill="none" stroke="blue"></circle>
  </g>
  <circle r="20" fill="none" stroke="blue"></circle>
  <text fill="black" >Hello World</text> 
</svg>

CSS

body {
  margin: 0px;
  height: 400px;
  width: 100%;
}

JavaScript

var svg = document.getElementsByTagName('svg')[0]
var t = 0
var viewBox = {
	pos: [ 0, 0 ],
  size: [ 100, 100 ],
  zoom: 1
}

function toViewBoxString (vb) {
	var ulx = ( vb.pos[0] - ( vb.size[0] / 2 ) ) * vb.zoom
  var uly = ( vb.pos[1] - ( vb.size[1] / 2 ) ) * vb.zoom
  var w = vb.size[0] * vb.zoom
  var h = vb.size[1] * vb.zoom
  
	return `${ulx} ${uly} ${w} ${h}`
}

function render() {
	t = Date.now()
  if ( ! dragging ) viewBox.zoom = Math.sin(t / 1000) + 1
  svg.setAttribute('viewBox', toViewBoxString(viewBox))
	requestAnimationFrame(render)
}

var dragging = false
var dragPos = [ 0, 0 ]

function startDrag (e) {
	e.preventDefault()
  dragging = true
  dragPos = [ e.clientX, e.clientY ]
}

function drag (e) {
	e.preventDefault()
	if ( !dragging ) return
	var [ x, y ] = dragPos
  var delta = [ x - e.clientX, y - e.clientY ]
  
  dragPos[0] = e.clientX
  dragPos[1] = e.clientY
  viewBox.pos[0] += x - dragPos[0]
  viewBox.pos[1] += y - dragPos[1]
}

function endDrag (e) {
	e.preventDefault()
	dragging = false	
}

svg.addEventListener('mousedown', startDrag)
svg.addEventListener('mousemove', drag)
svg.addEventListener('mouseup', endDrag)
svg.addEventListener('mouseleave', endDrag)
svg.addEventListener('blur', endDrag)

requestAnimationFrame(render)