Amy Cheng Web Developer, New York Magazine Drawing a Circle Three Ways: Generating Graphics for the Web There are multiple ways to generate graphics for the web. In this talk, we’ll learn three ways create a circle: CSS, SVGs, the Canvas. Each approach has its advantages and disadvantages. Which one is best for mobile performance? Which one should I use to create visualizations based on real-time data? Which one is the best for personalized user interfaces? We’ll answer these questions and explore how these technologies offer us possibilities of visual expressiveness on the web, across different form factors and platforms.

1. Drawing Circles Three Ways:
Generating Graphics for the
Web
Amy Cheng
Web Developer, New York Magazine

2. Hello! My name is Amy Cheng.
• Web Developer for New York Magazine
2

3. What do we mean by
“creating graphics for the web?”
• Using code to create visual elements on a web page
3

4. The History of Creating Graphics on the Web
• Proprietary software like Macromedia Flash/Director
• Third-party plugins
4

5. The Present!
• native browser apis
• CSS, SVG, <canvas>/JS
5

6. CSS Circles
• DOM element (most likely a <div>)
• border-radius
6

7. 7

8. 8
<style>
.css-circle {
background-color: red;
border-radius: 50%;
height: 100px;
width: 100px;
}
</style>

9. 9
<div class="css-circle"></div>

10. 10
<div class="css-circle animate"></div>

11. 11

12. 12
<style>
@keyframes position {
0%, 100% {
margin-left: 0;
}
50% {
margin-left: calc(100% - 100px);
}
}
.animate {
animation: position 5s infinite;
}
…

13. CSS Pros
• scales and responsive (when using relative units)
• in-between frames
13

14. 14
<style>
.css-circle {
background-color: red;
border-radius: 50%;
height: 100px;
width: 100px;
}
</style>

15. CSS Cons
• hacky
• not a good mental model "does a circle have a border?"
• content less DOM element
15

16. SVG Circles
• DOM element (<svg>)
• can be an embedded file or inlined XML!
• <circle>
16

17. 17

18. 18
<svg height="100" width="100">
<circle cx="50" cy="50" r="50" stroke-width="3" fill="red" />
</svg>

19. 19
<svg class="animate" height="100" width="100">
<circle cx="50" cy="50" r="50" stroke-width="3" fill="red" />
</svg>

20. 20

21. SVG Pros
• scales and responsive (when using relative units)
• accessible API
• XML can be exported from third-party software (Adobe
Illustrator)
21

22. SVG Cons
• animation is not a native SVG api
• bloated mark-up
22

23. <canvas> Circles
• <canvas></canvas> + JavaScript
23

24. 24

25. 25
<script type="text/javascript">
function staticCircle(){
var c=document.getElementById('static-canvas-circle'),
ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(50,50,50,0,2*Math.PI);
ctx.strokeStyle="red";
ctx.stroke();
ctx.fillStyle = "red";
ctx.fill();
}

26. 26
var posX = 50, direction = 1;
…
ctx.clearRect(0, 0, 800, 105); // clear canvas
ctx.fillStyle = 'white';
ctx.strokeStyle = 'whte';
…
ctx.arc(posX,50,50,0,2*Math.PI);
…
if(posX > 800) {
direction = -1;
}
if(posX < 0) {
direction = 1;
}
posX = posX + direction;
window.requestAnimationFrame(animatedCircle);
}

27. 27

28. <canvas> Cons
• code is verbose
• when we think of circles, do we usually see them as arcs?
• bitmap graphics
• there is no tween default
28

29. <canvas> Pros
• use JavaScript for complex behaviors
29

30. 30

31. Wrapping it all together
• Are you creating user interfaces?
• Are you creating data visualizations?
• Are you creating animations?
• Is performance a concern?
31

32. 32

33. 33

34. 34

35. 35

36. 36

37. An opportunity for collaboration!
• Data scientists
• Visual Designer
• Motion Graphics
37

38. Thanks!
38
amy (at) amycheng.info