Hakim El Hattab / hakim.se

Building Better Interfaces

Dev/design

Creative tools

SLIDES.com

I

U

REVEAL.JS

LOADING

POPOUTS

WIREFRAME

Hover MENUS

👆😑

Timeout?

let anchor = document.querySelector( '.anchor' ).getBBox();
let menu = document.querySelector( '.menu' ).getBBox();

document.querySelector( 'path' ).setAttribute( 'd', `
  M ${anchor.x} ${anchor.y}
  Q ${menu.x} ${anchor.y},
    ${menu.x} ${menu.y}
  v ${menu.height}
  Q ${menu.x} ${anchor.y + anchor.height},
    ${anchor.x} ${anchor.y + anchor.height}
  h ${anchor.width}
  v ${-anchor.height}
  z` );
<svg width="300" height="200">
  <rect class="anchor" fill="#ddd" y="85" width="100" height="30" />
  <rect class="menu" fill="#ddd" x="140" width="120" height="200" />
  <path stroke="#00ff00" stroke-width="2" />
</svg>
svg  { pointer-events: none; }

path { pointer-events: auto; }

CORE COMPONENTS

ANIMATIONS

MEANINGFUL
POINTLESSNESS

TABLE OF CONTENTS

github.com/hakimel

Tutorial

hakim.se

@hakimel

Thanks!