JSFiddle - React, Tailwind, and code Playground

by texinwien

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/1.1.6/mithril.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>

JavaScript

const log = x => ( console.log ( x ), x )

const state = {
  svgPath: 'M 0 0 L 0 300 300 300 300 0 Z'
}
const root = document.body

const Svg =
  { view: _ =>
    m ( `svg.svg[xmlns=http://www.w3.org/2000/svg][version=1.1][viewbox=0,0,800,800][height=800][width=800]`
      , m ( 'path.path#path[fill=#444]', { d: state.svgPath } )
      )
  }

const App = {
  view: _ =>
    m ( '.main'
     , m ( 'input.path[size=130]'
         , { oninput: e => state.svgPath = e.target.value
           , value: state.svgPath
           }
         )
     , m ( 'pre'
         , m ( '.state', JSON.stringify ( state, null, 2 ) )
     , m ( Svg
         , { height: 500, width: '100%' }
         )
         )
     
      )
}

m.mount ( root, App )

setTimeout(() => {
  const box = SVG.select('path.path')
  log(box.members[0].node.attributes.d.value)
  box.y(10)
  log(box.members[0].node.attributes.d.value)
  box.y(10)
  log(box.members[0].node.attributes.d.value)
  box.x(10)
  log(box.members[0].node.attributes.d.value)
  box.x(10)
  log(box.members[0].node.attributes.d.value)
}, 500)