Viewing a saved revision (read-only)
4d3ef27dd8c14a3c9b2ec6d2a8d74b8d
Fork of Let's make a face with D3.js!
This example demonstrates a pair of smiley faces whose eyes follow the mouse cursor across the screen. It shows two circular faces with white eyes and black pupils, while the mouth changes shape when hovered over. The interaction is built with vanilla JavaScript event listeners, specifically `document.querySelector("body").addEventListener("mousemove", eyeball)`, and uses `getBoundingClientRect` and `Math.atan2` to calculate the rotation angle for each `.eye` element. The faces are styled entirely with CSS, using properties like `border-radius` and `transform: rotate()`, and the page renders through an SVG element alongside the HTML structure.
AI-generated descriptionDemonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.