Skip to content
A tool for generating animated magic square SVGs.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Draw the magic line of magic squares

Uses SVG to draw the magic line traced by joining the integers of a magic square of order n in a sequence from 0-(n^2)-1.

  • accepts a string of numbers only if separated by single spaces (not double)
  • accepts magic square strings where the lowest integer is either 0 or 1

TODO: magic square checking

Use code from the magic square checker for the following:

  • remove non-numeric characters
  • remove returns, line feeds
  • remove duplicate spaces
  • fix errors caused by strings without a single space separating numbers
  • use Frénicle's rules to normalise each square (see below)
  • finish adding and checking pandiagonal order 5 set
  • if contains '0' => x + 1)

Frénicle established two simple rules to determine the standard position or order 4 squares, which can be used for any order:

  • rotate the square until the smallest number in any corner is top left
  • the second number in the top row must be lower than the first number in the second row

TODO: interface

  • swap between multi and single square
  • set padding between squares
  • set size of squares
  • set SVG fill in JavaScript
  • user input for fill colour
  • user input for line colour
  • when numbers selected disable animate and stroke
  • hide settings for printing
  • printing stylesheet (order-4)
  • fix padding trigger
  • number squares fix mobile
  • fix color swapping issues (fill transparency)
  • swap coordsArray x y
  • merge js files into one
  • set size of squares
  • write library of helper function for hardcoding
  • hardcode lengths
  • redesign menu
  • hide settings after drawing
  • filters
  • use new index4new
  • filters page broken (populateOptions) (use new index only)
  • error message / disable numbers in filterGroups
  • give option of inputting numbers of squares
  • single input animations broken/disabled
  • add day/night mode
  • fix slowness of load due to massive index file
  • add about/info page
  • broken filter for order >= 7
  • fix print styles for all orders
  • check animation for >= order 7
  • give choice of print sizes
  • set fill-opacity/stroke-opacity="0.0" - "1.0"
  • loop through colour change
  • progress bar (loading) for animate
  • clean up unused stuff
  • refactor for node ?
  • not super happy with print styles
  • check mobile styles (reduce margins)
  • add settings to localstorage




22x40 order-4s will produce an even block.

Fania Raczinski and Dave Everitt

You can’t perform that action at this time.