Web designers and internet programmers are able to show off their skills on the website codepen.io by posting creative demonstrations of what the three most baseline syntax languages responsible for basic web pages are capable of. Recent web design trends are resulting in the rise of scalable vector-based graphics interpreted directly by web browsers as a replacement for separately loaded image and video files, and programmers are finding ways to make unexpectedly sophisticated aesthetic displays and interactive sequences by using nothing more than HTML, CSS, and JavaScript code working together.
The codepen project linked here is a relatively simple example that uses virtually no HTML syntax; it illustrates a light blue circle and separately illustrates three other black shapes that resemble the eyes and mouth of a smiley face. The eyes regularly flatten themselves horizontally every five seconds to simulate blinking, and the eyes and mouth dynamically reposition themselves within the circle's bounds to simulate the face angling itself to keep looking at wherever the viewer is currently holding their mouse's cursor.
The unexpected complexity of the project is showcased when the size of the window currently displaying the face is contracted to the point that the edges of the window would start overtaking the circle. When the dark gray edge of codepen's editor function is dragged toward the bottom so that the segments containing the HTML, CSS, and JavaScript syntax overtake the white background, the face changes its expression as the circle is compressed into a shape resembling a rectangle with widely rounded edges. The face fades and disappears right before the shape is compressed out of existence.
The project features a similar squishing process that comes into play when the left and right edges of the window containing the white space are compressed together. This is hard to see in browser programs that enforce a limit on how narrow their application windows can be, but the "Change View" function on codepen lets the user choose an alternative layout that moves the adjustable dark gray area to one of the edges of the screen. For more information click here https://i.redd.it/e32tp7lrlsl21.gif.