Assignment 07: Self-Similarity

an open-ended exploration into self-similarity

Due April 7 at 11:59pm


In class, we employed SVG coordinate transformations and recursion together in order to generate self-similar images such as those depicted below:

koch snowflake recursive tree

In this assignment, you will make a website that incorporates transformations


The main goals of this assignment are for you to:

  1. gain more familiarity with creating and manipulating SVG elements with JavaScript
  2. employ coordinate transformations, element groups, and recursion to achieve self-similar images
  3. have an opportunity for open-ended, creative exploration.


Code and SVG
  • MDN SVG Tutorial
    • You can add (and transform!) external images from an SVG element with the <image> tag
  • Code examples from Lectures 11 and 12


The only requirements for your submission are:

  1. The website uses only plain html, css, and JavaScript without external libraries or dependencies.
  2. It uses one or more <svg> elements to make the main graphical content on the site.
  3. Elements in the SVG image are created and manipulated using JavaScript.
  4. The <svg> element(s) incorporate coordinate transformations.
  5. The site includes a brief description of how the image was generated including links to any inspirational material for its generation.


20 points

  • 10 points basic functionality and specifications
    • site loads without errors or warnings
    • program incorporates all required items from the specification above
  • 5 points style
    • main graphical content exhibits self-similarity (possibly with variations)
    • colors, shapes, and textures are employed to a deliberate visual effect
  • 5 points technical sophistication
    • image incorporates a variety of visual elements
    • program performs non-trivial computation to place or style elements (such as recursion)
    • site incorporates elements elements are styled according to some computational rule (such as varying color or shape by recursion depth)