Alexei Kozhushkov

@joystick·3 public vizzes

sunrise sunset

An animated SVG landscape depicts a continuous sunrise-sunset cycle over layered hills. A white sun rises and falls between 75% and 50% vertical positions while the sky and land gradients shift between indigo, aliceblue, and steelblue tones over 15 seconds. The scene uses SMIL animations for the sun’s `cy` attribute and gradient stops, with no external JavaScript libraries.

Aug 16, 2023

Loading thumbnail…

smily

This visualization shows a smiling face that reacts to hover interactions. The SVG draws a yellow circular face with black eyes and an arc-shaped mouth. When the user hovers over the face, the `fill` property transitions from yellow to red via CSS, and the mouth’s `d` path attribute animates from a smile to a frown using a CSS `transition` on the `d` property. The code relies on inline SVG elements, CSS transitions, and the `:hover` pseudo-class.

Aug 15, 2023

Loading thumbnail…

mastercard

This example shows the Mastercard logo constructed from three overlapping circular arcs in red, orange, and yellow, with the wordmark “mastercard” set below in a custom Google Font. The SVG is hand-coded with path elements using arc commands, and each shape is filled with a distinct brand color via the `fill` attribute. The rendering relies on inline SVG within an HTML page, styled with Google Fonts’ Maven Pro, and the layout is positioned using SVG `<g>` transform translations. No external data or JavaScript libraries are used; the visualization is purely declarative markup.

Aug 15, 2023