Скачать или смотреть Using SVG and JavaScript to create a design inspired by Victor Vasarely's Boglar

In this video we look at an HTML with an empty SVG element which is populated by JavaScript to create a design inspired by Victor Vasarely's work Boglar. The script starts by establishing a checkerboard pattern of SVG (scalable vector graphics) rectangles. The code use the HSL (hue-saturation-lightness) color model. The lightness varies -- being brighter in the middle and darker toward the corners. There are two hues, and they vary with time. Inside each rectangle is a shape made using the SVG path element -- and in particular utilizing Bezier cubic paths. Each Bezier curve has 1) a starting anchor point it actually passes through, 2) a control point it heads toward (but does not pass through) when leaving the starting anchor, 3) another control point that it does not pass through but from which it seems to be coming at it approaches the second anchor, and 4) the second anchor. The interior shapes are made by putting together four such Bezier cubic paths -- each a quarter the way around the circle. Finally there is a parameter in the two control points that determines whether the interior shape is closer to a square or closer to a circle. This parameter alternates in a checkboard pattern and varies with time. So the interior circles turn into squares and vice versa.