SVG кнопка меню
∘XML 10.10.19 10.10.19 509
на главную сниппетов
<![CDATA[
<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>
]]> на главную сниппетов
