Viewing a saved revision (read-only)
751e8a8736cc4b5f9d8ebb9a208bd1e3
Fork of Fork of HTML Starter
The visualization shows a self-squared dragon fractal, a geometric pattern constructed by recursively arranging smaller copies of a dragon curve into a square configuration. It depicts how the classic dragon curve, known for its self-similarity and space-filling properties, transforms at multiple scales, with colors shifting from blue to yellow and line widths thinning at deeper recursion levels. The code uses d3.line and d3.curveBasis to render SVG paths, while custom recursive functions and geometric transformations handle scaling, rotation, and translation. The fractal is generated from an initial curve produced by D3 v7, with level-based hue and opacity styling applied to differentiate each recursive tier.
AI-generated descriptionSelf-Squared Dragon Fractal
This visualization creates a fractal pattern based on the classic dragon curve with a self-similar, squared arrangement.
About the Visualization
The fractal is constructed in two main steps:
- First, a dragon curve is generated using the folding algorithm, which creates the characteristic 90-degree turns.
- Then, transformations are recursively applied to create smaller copies of the dragon arranged in a square pattern, along with some diagonal elements for added complexity.
The dragon curve has several interesting properties:
- It never crosses itself
- It approaches but never completely fills space
- Its limit set has a Hausdorff dimension of 2
- It exhibits self-similarity at multiple scales
Mathematical Background
The dragon curve can be constructed by repeatedly folding a strip of paper in half, always folding in the same direction. When unfolded so that each crease makes a 90° angle, the edge forms the dragon curve.
The self-squared pattern is created using geometric transformations that combine scaling, rotation, and translation: