SVG кнопка меню

10.10.19 12:05:05 10.10.19 15:02:05 86
<style> body { background-color: black; overflow: hidden; } svg { width: 200px; height: 200px; cursor: pointer; } polygon { fill: white; } </style> <svg id=svg onclick=toggle() viewbox="-50 -50 100 100"></svg> <script> let cos = Math.cos, sin = Math.sin, k = 1000, a1 = 0, a2 = 0, far = 1000, dir = 0, planes = []; let pts = Array(8).fill(0).map((e, i) => { let a = Math.PI*(.25+.5*Math.floor(i/2)) + (i%2?.2:-.2); return [cos(a)*30, sin(a)*30]; }); let t = -25; whitePlane([pt(0,t),pt(1,t),pt(4,t),pt(5,t)]) whitePlane([pt(2,t),pt(3,t),pt(6,t),pt(7,t)]) for (var i=0; i<3;i++){ let t2 = t+20*i; let t3 = -15+20*i; whitePlane([ pt(4,t2),pt(5,t2),{x:0,y:t2,z:-7},pt(6,t2),pt(7,t2), pt(7,t3),pt(6,t3),{x:0,y:t3,z:-7},pt(5,t3),pt(4,t3), ]) } requestAnimationFrame(render) function whitePlane(points) { let id = "plane_" + planes.length; svg.innerHTML += `<polygon id="${id}" ></polygon>`; planes.push({points, id}); } function pt(i, y=0) { return {x:pts[i][0], y, z:pts[i][1]}; } function project(p) { let x = p.x*cos(a1) + p.z*sin(a1); let z = p.z*cos(a1) - p.x*sin(a1); let y = p.y*cos(a2) + z*sin(a2); let d = z*cos(a2) - p.y*sin(a2) + far; return [ (k/d)*x ,(k/d)*y ]; } function render() { a2 += dir * 0.1 if (a2 < -Math.PI/2 || a2 > 0){ dir = 0; a2 = a2 > 0 ? 0 : -Math.PI/2; } dir !== 0 && requestAnimationFrame(render) planes.forEach(plane => window[plane.id] .setAttribute("points", plane.points.map(project))); } function toggle() { if (dir !== 0) return; requestAnimationFrame(render); dir = a2 === 0 ? -1 : 1 } </script>