Create a macro for rendering the logo using CSS.
I think we can do the line with a really long thin div and a radial gradient background to created the pointed tips, but we might just need an SVG for that.
Diamonds can be rotated divs.
Once we have this slotted out as DOM, we can start throwing CSS animations at it.
My current thinking is to have the green diamond scale up from nothing.
Staggered behind that start the yellow diamonds scale up and slide out from behind the green diamond.
Staggered behind that the line grows from nothing sliding out of the edges.
Text fades in and slides up simultaneously.
kadenzipfel
commented
5 years ago
Create a macro for rendering the logo using CSS. I think we can do the line with a really long thin div and a radial gradient background to created the pointed tips, but we might just need an SVG for that. Diamonds can be rotated divs.
Once we have this slotted out as DOM, we can start throwing CSS animations at it.
My current thinking is to have the green diamond scale up from nothing. Staggered behind that start the yellow diamonds scale up and slide out from behind the green diamond. Staggered behind that the line grows from nothing sliding out of the edges. Text fades in and slides up simultaneously.