On the advice of several wise people, I’m starting by learning the foundations. When they get tedious, then I’ll appreciate & understand the ways that d3 makes things easier. I hear that I’ll probably still curse it sometimes, but hopefully will curse with more appreciation 🙂
[an aside on pedagogy] As a former high school math teacher, one of my greatest critiques of how we teach math is that we don’t spend enough time doing the boring stuff which might help students crave & desire the algorithms that will make things easier instead of hating (and not understanding) those algorithms. For example, the quadratic formula should be the salvation from tedious ‘completing the square’ rather than being an arbitrary formula that you memorize with a song as a mnemonic. It’s also a great chance to demonstrate deriving formulas and start building the foundation for proofs. Perhaps if we spent longer on the manual task & then led students to the derivation, then the algorithm would seem less arbitrary and students would experience the mathematics process (of abstraction) and sense of discovery. One of my favorite days teaching of all time was when I set the stage for three students, who didn’t like math much, to together discover the quadratic formula. [end of aside]
So, with that background, I’m ready to dive into writing a lot of repetitive code to understand the core of what’s going on with SVG & javascript.
Day #1 goal: create a smily face with SVG elements.
step 1 – worried smiley (background, circles, lines)

<!–?xml version=”1.0″ standalone=”no”?>
<!– Points –>
<rect width=”100%” height=”100%” fill=”lightsteelblue”/>
<circle cx=”100″ cy=”100″ r=”73″ fill=”gold”/>
<circle cx=”100″ cy=”100″ r=”70″ fill=”yellow”/>
<circle cx=”120″ cy=”80″ r=”12″ fill=”black”/>
<circle cx=”80″ cy=”80″ r=”12″ fill=”black”/>
<path d=”M 80 105 L 110 120″ stroke=”black” stroke-width=”3″/>
<!–svg>
# step 2 – curves! Now he can smile. The offset was intended.
<!–?xml version=”1.0″ standalone=”no”?>
<!– Points –>
<rect width=”100%” height=”100%” fill=”lightsteelblue”/>
<circle cx=”100″ cy=”100″ r=”73″ fill=”gold”/>
<circle cx=”100″ cy=”100″ r=”70″ fill=”yellow”/>
<circle cx=”120″ cy=”80″ r=”12″ fill=”black”/>
<circle cx=”80″ cy=”80″ r=”12″ fill=”black”/>
<path d=”M 75 105 C 80 140, 95 150, 115 120″ stroke=”black” stroke-width=”4″ fill = “transparent”/>
</svg>
And… polygons! With starry eyes!

figured out an algorithm for creating a star from 4 variables (x start, y start, and the sides of a right triangle that makes up half of each sticking-out-part of the start). :). Will come in handy when I define the variables in javascript (instead of calculating & copying/pasting). There are probably better algorithms, though :).
—————-
<!– Points –>
<rect width=”100%” height=”100%” fill=”lightsteelblue”/>
<circle cx=”100″ cy=”100″ r=”73″ fill=”gold”/>
<circle cx=”100″ cy=”100″ r=”70″ fill=”yellow”/>
<circle cx=”120″ cy=”80″ r=”12″ fill=”black”/>
<circle cx=”80″ cy=”80″ r=”12″ fill=”black”/>
<path d=”M 75 105 C 80 140, 95 150, 115 120″ stroke=”black” stroke-width=”4″ fill = “transparent”/>
<polygon points= ” 117 70 118 74 121 74 119 76 120 79 117 77 114 79 115 76 113 74 116
74″ stroke = “transparent” fill = “white” stroke-width = “0”/>
<polygon points= ” 77 70 78 74 81 74 79 76 80 79 77 77 74 79 75 76 73 74 76 74″ stroke = “transparent” fill = “white” stroke-width = “0”/>
</svg>
next step –> switch from creating svg objects with SVG to creating them with javascript.
Like this:
Like Loading...
Related