SVG: Rounded Triangles and a Simple, Geometric Rose Pattern

In this video we use SVG (Scalable Vector Graphics) to make a "rounded triangle" -- an equilateral triangle with rounded off vertices. Because for each "side" of the rounded triangle we wanted to control two endpoints (the points on the side of the un-rounded triangle) and two slopes (tangents to the circle that circumscribes the triangle), the natural choice was a cubic Bezier path. We use the viewBox attribute of the SVG tag to set the origin to the middle of the SVG element. After establishing the circumscribing circle element, we begin a SVG/XML path element. The "d" attribute collects a sequence of points defining the path. M designates the starting point, then C provides two control points and the endpoint of the first Bezier cubic. After this we can use the S notation and forego the first control point, so all we need for the second and third Bezier curves are two points. Since we gave the first path an id, we cane reuse the path by using a "use" tag. We can place the "use" tag inside an open-close "g"-tag pair and give the g tag a transform attribute. The transform will include both a rotate (60 degrees) and a scale (0.7165). We used Excel to calculate the scale factor that went with our choice of the control point P1 being a distance R/3 from the initial end point P0 -- where R is the radius of the circumscribing circle.

Видео SVG: Rounded Triangles and a Simple, Geometric Rose Pattern канала Thomas Blum