Preact Clock

HTML

<script src="https://npmcdn.com/preact@latest/dist/preact.js"></script>

Babel + JSX

/** @jsx h */

const { h, render, Component } = preact
const AnalogDisplay = (props) => {
  var date = new Date(props.time)
  var dialStyle = {
    position: 'relative',
    top: 0,
    left: 0,
    width: 200,
    height: 200,
    borderRadius: 20000,
    borderStyle: 'solid',
    borderColor: 'black'
  }
  var secondHandStyle = {
    position: 'relative',
    top: 100,
    left: 100,
    border: '1px solid red',
    width: '40%',
    height: 1,
    transform: 'rotate(' + ((date.getSeconds()/60)*360 - 90 ).toString() + 'deg)',
    transformOrigin: '0% 0%',
    backgroundColor: 'red'
  }
  var minuteHandStyle = {
    position: 'relative',
    top: 100,
    left: 100,
    border: '1px solid grey',
    width: '40%',
    height: 3,
    transform: 'rotate(' + ((date.getMinutes()/60)*360 - 90 ).toString() + 'deg)',
    transformOrigin: '0% 0%',
    backgroundColor: 'grey'
  }
  var hourHandStyle = {
    position: 'relative',
    top: 92,
    left: 106,
    border: '1px solid grey',
    width: '20%',
    height: 7,
    transform: 'rotate(' + ((date.getHours()/12)*360 - 90 ).toString() + 'deg)',
    transformOrigin: '0% 0%',
    backgroundColor: 'grey'
  }
  return <div>
    <div style={dialStyle}>
      <div style={secondHandStyle}/>
      <div style={minuteHandStyle}/>
      <div style={hourHandStyle}/>
    </div>
  </div>
}

class Clock extends Component {
    constructor() {
        super()
        this.state.time = Date.now()
    }
    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({ time: Date.now() })
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    render(props, state) {
        let time = new Date(state.time).toLocaleTimeString()
        return <span>{ time }<br/><AnalogDisplay time={this.state.time}/></span>
    }
}

render(<Clock />, document.body)