SVG can do that?! (Sarah Drasner)
Articles,  Blog

SVG can do that?! (Sarah Drasner)

>>Hey, everybody! Thanks for coming back after lunch. I know we all had lots of food and wine and
stuff. But we’re gonna be talking about something
that I find really exciting this afternoon. And hopefully you do too. The title of this talk is SVG can do that? Part of the reason I’m giving this talk is
because SVG as a graphics format is just capable of so much. And I think we’re just at the tip of the iceberg
for really touching on all of those capabilities. So yeah. Like I said, my name is Sarah Drasner. This is a photo of me as a child and my mom
and my relationship with authority. I’m a senior developer advocate at Microsoft. I just started. So that’s exciting. And I just think SVG is a total party. You can kind of make your party yourself or
you can have JavaScript be the event coordinator. Get it? Event? There’s gonna be lots of bad jokes where that
came from. And we can do so many cool things with it. So some of you might already know the benefits
of SVG, but just in case you don’t, let’s go over some of those. It’s crisp on any display. It’s built with math. So basically any time you’re making an SVG,
you’re just plotting a few coordinates, and the computer is drawing all those coordinates
out for you. So it’s not like bitmaps, where if you make
something really big or really small, it loses clarity or it kind of loses pieces of it. So that’s really nice. It has — I always mess that part up — less
HTTP requests to handle. Did it. All right. Cool. It can have no HTTP requests to handle. Because you can have it directly inline. Unlike other images, where you have to make
requests from other sources. As we move into HTTP 2, this is less of an
issue, but we’re not quite there yet. So for the time being, SVG is really awesome
for that. It’s easily scalable for responsive. One of my favorite things. It’s in the name. Scalable vector graphics. That means that you can make it adjust to
any kind of viewport. And we’re definitely gonna be doing stuff
with that today. It’s a really small file size if you design
for performance. If you design for performance is an important
part of that. So we’ll talk about that today as well. It’s easy to animate. Again, one of my favorite things. I wrote a literal book about that. It has a navigable DOM. Which means that you can reach right inside
of it and move certain pieces around. So if you have a flat image where everything
is just kind of presented in front of you, in order to make an arm move or something,
you would have to go in and cut out pieces of it, in order to kind of move them around. These are literally just DOM nodes that you
can slap classes on, that you can do all of the same things that you do with HTML elements
with. So that’s really cool. We talked about how it has a navigable DOM. It also can be accessible. Because it has a navigable DOM. And it’s fun. Remember when we used to have fun? Fun is cool. Yeah, cool. All right. So with all of the pens that I’m going to
be showing today, I made all of these demos. But I’m going to be showing you some work
that other people made as well, to kind of showcase them. But I’ll definitely have their names at the
top of them, and then also I made the slides Open Source, so you can check them out later. (chirping) (thunder booming) SVG is such a flexible medium. We can do so much with it. We can manage state even within it and do
all sorts of beautiful effects. So I actually hope this is the last year I
have to show this slide. People think that SVG is really not well supported
because years past it wasn’t. But look at all that green. We got Opera Mini! We never get Opera Mini! That’s just amazing. It says IE11 there, but it actually goes back
to IE9 with partial support on IE8. If you’re not using SVG because you think
it’s poorly supported, you can update that information in your mind as well. So what does the scalable mean, when we talk
about scalable vector graphics? You can see here we placed the graphic directly
inline in the HTML and it has width and height attributes which keep it to that size. But when I take those out, it adjusts and
fills the entire area. Which means that if I wanted to make it constrained
to the viewport width or the viewport height, I can do so, or if I want to put it inside
of a flexbox or grid or percentage, you name it. That’s really nice, because everything stays
totally consistent. And is positioning in CSS keeping you down? Well, sometimes it kind of bothers me. SVG might just be your answer. You saw all of those things that were inside
of the SVG were staying exactly at their coordinates, no matter what we were doing to it. That’s really awesome for positioning. You can kind of just throw all of the crazy
CSS stuff to the wayside and position things within SVG. It even has text. As a side note, I did this to myself on the
plane on the way here. I was drinking wine and watching a horror
movie, and splashed it in my face. Anyway… SVG allows you to create advanced effects
like this type lockup. And it can look really slick and professional
while still using actual accessible text. That’s so nice for responsive. Which also means that in terms of animation,
we can create something that’s fully responsible and scalable in every direction, and the animation
values are working within that coordinate system, so they’ll stay totally stable, even
if you’re changing the sizes of them. And moving things around. And adjusting it. These types of positioning refinements are
really, really wonderful if you have a ton of information on smaller screens like mobile,
and you don’t want to show all of the information at once. If you have tons of icons and you need to
kind of collapse that view, you can do really advanced layout effects, where you’re showing
and hiding that information with only a small amount of kilobytes. So it doesn’t necessarily have to be squishy
either. We don’t just squish things back and forth
when we make responsive design. Let’s do some real responsive design. So I made a huggy laser panda factory. We know to know where huggy laser pandas come
from. That’s where they come from. So if we have the huggy laser panda on desktop,
it’s three SVGs. One for the top, one for the side, one for
the other side. On mobile, they’re going to stack and reconfigure. The one on the side that’s magenta is being
transformed, translated, and moved over to the side. So if we have the panda factory running, we’re
getting our panda getting painted to be a panda, then we’re having our panda getting
lasered and our panda getting huggied, like you have in real life, and when we scale it
down to mobile, everything can reconfigure and reconfirm. Everything works on old Android devices, old
Windows phones, and it’s only 30 kilobytes. So you can see I have a timeline that’s wrapped
in a function that’s named appropriately. In this case, the naming it appropriately
is functionPaintPanda. And I literally have a click event listener
to retrigger that timeline. But you’ll see all of the functions are scoped
to the SVGs itself. So the design and the functions are all organized
in the same way. So if I need to update something, everything
stays totally organized. We can also use that stability for page transforms. So React is awesome because it helps us manage
state in a really responsible manner. I made this with React and Greensock, an animation
API. React coordinates the state, while GreenSock
coordinates all the intermediary values. So we’re showing the transmission from page
to page, and SVG will stabilize all of our graphics while we do so. So in this example, I have this concept of
screens. I’m toggling the screens forward, and then
they wrap back around to the beginning screen. And then we have a timeline function that
can choreograph all of the animation. But something that’s really cool about the
GreenSock animation API is this thing called SVG origin here. This thing called ClearProps here. The ClearProps will actually allow us to remove
any inline styles that are set on that element or that DOM ref. So we can remove those if we need to recalculate
values or put it into another position. So here’s another one I made with Vue and
Nux, which I love. Vue is very similar to React. It’s the V of MCV. You’re probably familiar with it. Nux is a quick way to get server side rendering
with Vue and it allows you to do routing and all sorts of code splitting without stepping
outside of a Vue file. Because we’re using SVG for all of these animations,
everything stays totally stable. Nux also gives us page transition hooks so
we can hook into the animation and make it different per page. All the ways that the mountains are changing
and the text is changing changes per page. So if you would like to check out the code,
I have a repo for it and also a demo site that’s live that you can check out too. I’m showing this slide so you can get a sense
of how those JS hooks work. We have all these different page routes, and
if you want to plug into them, there’s a bunch of page hooks per page. The one that’s really important here is this
transition mode, and that’s super cool. Because when you have a transition mode in
Vue, what it’ll do is allow that component to completely unmount, but it will wait for
the animation to fully fade out. Then it will unmount and the other thing will
wait until it’s done, so you don’t have to write any messy callbacks, which is what you
usually end up having to do when you write that kind of code. So this is from Codrops. It’s built in a similar way. The fixed content lies beneath and once we
move the content up, it gets revealed. And all the time the SVG path is changed through
path data ID. And this is done through animate.js, not GreenSock. This pen by Sullivan Nolan uses transition
effects and morphing. This is back to GreenSocks’ morph SVG. This stays totally stable for mobile. But we can also use SVG 4, the layout itself. When we were making this page for animation
workshops, we wanted to make interesting page layouts. The triangles between the sections are pieces
of SVG where we said preserve aspect ratio none. Which means it’s always gonna scale in every
direction with the container. Usually you don’t want that. If it’s a face or something. It’s gonna be womp-wemp. And that’s the technical term for that. But in terms of page layout, that’s exactly
what we want. Cool. So SVG can also be super tiny. If you look at this HTTP archive graphic,
it’s a breakdown of all of what we’re transmitting over the web. Right? All of the kind of content breakdown. So we’ve got a bunch of video, a bunch of
fonts and scripts and stylesheets. But images is huge. Images is two thirds of what we deliver over
the internet. For everybody! So I love this quote. You can’t be a web performance expert without
being an image expert. It’s actually pretty true if you think about
it. If you think about that last graphic, if you’re
not thinking about the size of your graphics, then you’re really doing yourself a disservice. I used to be a consultant before I worked
for Microsoft, and this company hired me because they had 10-second page load times, and just
by optimizing the SVGs on their site, I brought the site speed down to less than 2 seconds. That’s all of those seconds of deployment
and performance, all came from the graphics. So how did I do that? Well, not all SVG graphics are created equal. We have everything drawn with math, but if
you have tons and tons of path points and you’re not optimizing correctly, it can really
bulk your files. So I really like using SVG OMG. These are linked up in the slides, if you
want to check them out later. SVG OMG is by Jake Archibald. It uses a lot of service workers. So if you have a bunch of settings in it,
it will remember the next time you go there. Which I think is super cool. It uses SVGO, the last one under the hood,
which is terminal-based. So if you’re more comfortable with your terminal,
you can use SVGO, but I suggest you pair it with the GUI, because the way you optimize
affects the way that SVG will look. The milled one is Peter Collingridge’s SVG
editor. I keep it because I’m a neck beard. Probably less useful, but still fun. I also wrote a post called high performance
SVGs. That was all of the process that I went through
to reduce the size of those SVGs for that consulting gig. So in this pen, I have this little draggable
thing, and it’s a little spaceman and he’s standing on the moon and the cow keeps scaring
him as he goes over the moon and it’s touch enabled for mobile, and that whole SVG is
2 kilobytes. So you can do really kind of cool effects
and show really, really interesting information and have things be super small. So while we’re looking at this, let’s take
a gander at what’s happening under the hood. Because I ran into a gotcha, when I was trying
to build this. At first I was like… I’m gonna make this thing that’s like a null
object around with this cow and then I can spin that and it can also detect if there
are collisions with getBoundingClientRect or get BBox with that little astronaut head. But then it was firing all the time. I was like… What’s going on? I think the browser is wrong. No, the browser is not wrong. What was happening, once I started putting
borders around it and kind of understanding this a little bit more, is that the browser
doesn’t see diagonals. The browser only sees in rectangles. So to give you a better idea of what that
means, if you look at the bounding box stroke of these rotating elements, this is what the
DOM sees. So I think that’s crazy. Look at that circle. That’s so weird. So sometimes in order to debug things like
this, you do actually have to think like the browser. Not like yourself. Back to the weight of SVGs. Because they have the potential to be so small,
SVG is a perfect time to use something like a loader. A lot of loaders are really ugly and a lot
of loaders are using GIFs, which are really heavy. If you have a heavy and ugly GIF, maybe you
should think about updating it. This graphic, when I was given this graphic
by the designer, this is for smashing magazine’s checkout experience, it was 35 kilobytes,
and I brought it down to 6 kilobytes, just by optimizing it correctly. And that includes the animation and everything. So SVGs can make other graphics smaller. There’s this thing called JPEG.SVG by this
guy named Shah. And this is not a particular graphic that
I found. But you can see that just dropping in any
graphic that I had around, which is my I am happy Marge Simpson… We brought the file size from 38 kilobytes
to 16 kilobytes, just by switching it to an SVG and creating an image mask over the kind
of repeated images. If a bitmask has a lot of the same colored
squares, it’s still mapping out all of that territory. Where an SVG can say: Take the bounds of these
things and don’t paint them. Just show this one color. So that’s pretty cool. SVG can be accessible. We mentioned this before. There’s actually a ton of ways that SVG can
be accessible. And it’s like… Can be complicated. But nine times out of ten, this is what you’re
gonna need in order to make an SVG accessible. So I’m just gonna dive into that really quick. So we write ARIA labeled by and then a title. And that title — it has to be the first thing
that follows that SVG tag. That title also has to have a unique ID on
it. Otherwise it won’t be picked up by JAWS or
NVDA devices. Just writing title is not enough. We also have role of presentation on the SVG
itself. What that will do — even for your icons,
you should be doing this — it will allow screen readers to know that it’s an image
and not announce everything inside. If you want it to announce things inside,
you would move that to role:group. That’s some of the ways it’s responsive. I like writing whatever language it is, so
if somebody is using a screen reader in another language, the computer does the hard work
for them. That’s pretty cool. So there’s a resource with support charts. There’s also this article by Heather that
she wrote for CSS-Tricks. She spent every weekend going to the library,
checking every different device. This whole big labor of love for the community. So definitely check out that article. She did a great job with it. SVG can be styled like text. This is kind of like not too fancy, but something
that a lot of people kind of come to me and ask me about. So let’s cover it real quick. Somebody on Twitter asked me about this. They made an SVG sprite sheet, and they’re
not styling it along with the text. They wanted everything… If they change that line of text, for it to
pick that up. So really, this is the question code. I left it exactly how it was. And the secret trick here that you may or
may not know about is that you change the fill to currentColor, camelCase, and that
will just make it reflect whatever it is. So right now I just have that line with a
class that says colorRed on it, and it’s picking up that color. So if you are using SVG icons for your site,
that’s a quick way to not have a headache whenever you’re working with it. SVG can bounce. We can make a ball bounce with SVG really
easily, without any animation libraries, using a requestAnimation frame. If we have this ball bouncing, we can use
a little physics to kind of drum up the bounce of the ball, and we can make the radius bigger,
and we can do all of that midstream. So I’m using Vue again here. And there’s some info that I’m not showing
here. But here’s the gist of it. We’ve got data, we’ve got the total height
of everything. We’ve got the radius. We’re incrementing things based off of a click
event. And then we have gravity that increases the
vertical speed, horizontal speed increments from the horizontal position, all of these
things I learned from, like, just pulling things out of physics books. So you don’t have to invent all of this stuff
from scratch. You can steal ideas that have been around
for a really long time. This pen by Tiffany Rayside is one of my favorite
animations of all time. She’s not using any library or anything at
all. She’s spinning up pieces of the SVG, applying
physics, and even these crazy bounces to it all, so she manipulates the SVG path values
when it hits the wall. She’s just kind of a master. So if you don’t already follow her on Twitter
or CodePen, you should definitely go do that. SVG can snap. In order to create some really, really beautiful
effects, we’re gonna use some ES6 template literals, which you’re probably all familiar
with. But just in case you’re not, I’m gonna say
something about them really quickly. Previously we had string concatenation, and
it was really hard to read. Now we have awesome template literals, and
when you put things in backticks, we can manipulate strings really readily. What does that have to do with SVG? All of those paths inside of an SVG are really
just a bunch of strings of commands. And they have these curve values. And all of the letters mean a certain thing
and draw a certain kind of curve and create a certain kind of path. So I really like this kind of path explorer
tool, if you’re not familiar with the way that SVG works. You can go and play with this. I also wrote about it in my book. If you want something that’s a little bit
more traditional. And if we know enough about how those curves
are made, updating them is very simple with something like template literals. When we’re building out these paths, we start
with a move to — and then we can create those curves by using things like C and Q. So we give it a handle and then we give it
another point and the computer draws a curve for us. How cool is that? You can, like, plot three points and the computer
draws the curve. I just think that’s great. So that’s really neat. And then we can plot the points, we have a
bunch of different coordinate values that we’re updating. And it’s so flexible. We can make effects like this. So you might have noticed that that SVG was
distorting at the end there. So let’s kind of cover distortion really quickly
and dig into how you can do that. So distortion filters are really awesome. There was this great codrops demo with a bunch
of buttons and definitely the most impressive technique is you hit a button and this little
ripple effect came out. And what they’re doing, in order to create
that, is they’re using a filter called Turbulence. And you can animate this filter in JavaScript. You can’t do it in CSS. It’s not an animatable property. We’re kind of hacking the spec here and manipulating
it, because there’s just a bunch of numbers. But I would say that from manipulating filters
and pushing the DOM’s boundaries and stuff and doing things I’m not supposed to do, I
would suggest setting the filter on a timer. Like, applying it when you need it and taking
it off when you don’t, because it is performance insensitive. It’s not really hardware accelerated. So we can make things like this pool. And that’s pretty fun, because the way that
this is done is by applying that filter and using an image to distort anything that’s
beneath it. So we can have tons and tons of path values,
like you see here. Everything under the pool is also getting
updated too. And we can do it really, really simply. All we’re doing is we’re taking that distortion
filter and that image, and we’re basically making it scale down, hit the wall, and scaling
up, and we’re also animating the filter. (laser beam noises) (explosions)>>So we can do really, really crazy effects. And when I made this pen, I wasn’t really
thinking about the political climate. So… Eugggh. It’s kind of a weird one to show. But we can… By animating filters, we can also make things
like a realistic candle that’s drawn with math! That’s really, really fun. In order to make this, I have a few different
pieces that I just kind of traced off of a candle photo. So I just made this in Illustrator, and then
made a gradient that’s attached to it. And they’re not actually blue. But I have a bunch of different path values
that I’m going to set on a for loop, and I’m gonna morph between those path values for
each second, and plot them along a timeline. But I also am using a filter. And it’s this GUI filter that Lucas Beber
created. So he has some prior art here. He’s actually using this with divs. You can make an SVG filter and apply it to
HTML. You don’t only have to use SVG. So that’s pretty cool. A lot of people use this Gooey effect. It’s a blur filter and a contrast filter applied
at the same time. So because that standard deviation of the
filter is just using numbers, we can have JavaScript update those numbers. Request animation frame knows how to update
numbers. So we can do that. We go through all of the path values and then
we’ve got a little math.random opacity, because nature is just a little unpredictable. And then we can use that effect to create
smoke with math. SVG can do on the fly logo adjustment. This demo was made by Lea Verue. If you don’t follow her already, you should
probably do so, because she makes crazy great things. But basically you’re allowed to update these
logos on the fly, which I think is super great. If you have to collaborate with a designer
who keeps on not making their mind up, and they’re like… Oh, change it out here. Oh, no, fat is in. No, flat is in. You can kind of make all of these things really,
really adjustable. So you don’t have to keep changing things
up. And she made this with a tool called Mavo
that she built. That’s basically so that you can drum up sites
using HTML and CSS with very little JavaScript. Which is not very useful for us, but I’m pretty
sure that almost everyone in this audience has a family member that’s like… Hey, can you make me a website? And if you do, this is a really good thing
to show them. Because with just a little bit of training,
they can make their own website, and you can get on to your real life work. SVG can draw itself too. So let’s say we have a shape. And the stroke of that shape is dashed. But we make the dash all the way around that
entire shape. It’s the length of the entire shape. That offset, the offset between those two
dashes, is animatable. So we can have an SVG draw all onto the page,
just using CSS or something. So I made this pen, to kind of celebrate new
year’s. And there’s like — the fireworks are that
kind of idea. Pew! Yeah. This pen, by Chris Gannon, is also really
awesome. He does that same effect. If you don’t follow him, you should go follow
him, because I think he’s just pretty much a genius. He’s also doing this with ClipPath. It’s super cool. You can also interact with an SVG. We can manipulate it and interact with it
on the fly as well. So since it has a navigable DOM, you can do
all sorts of things with it. Again, I’m using Vue here to update the text
and make random lines and allow the user to kind of play with the SVG graphic as much
as they want to. I can also animate it, if I want to. And have them be in charge of that as well. And I made this demo too long. So we’re all gonna watch it. So it’s gonna play the animation. But the coolest part of all of this is I’m
gonna play this animation. It’s still a graphic. So I can still download it. And it’s gonna respect all of the positions
that were set during that animation. So even though I’m animating it, it’s still
in all of those places. It’s still a graphic that they can hand out
to their friends or something. So here inside the HTML template, we can create
some semantic form elements, and then we can bind them to these methods, where we’re creating
and kind of drumming up pieces of the SVG on the fly. We can use SVG to respond to things that the… That the browser is doing. So we have this little Wall-E pen. I don’t know if you’ve seen the movie Wall-E.
But I really like it. He has a little cockroach friend and he’s
kind of reaching out for him, any time the user moves across the page. What we have here… We have a bit more code than that. But basically we have these atMouseMove events,
and I’ve created an entire timeline for him reaching his arms out, complete with eases,
and I plot the progress of that timeline along the coordinates, so the user can control all
of that, and it stays really, really lifelike. So in order to make that pen, we had to clip
and mask things. So SVG can clip and mask things. SVG offers this thing called clip path, which
is really nice, because if you looked at his arms, they had to reach out from somewhere. I can’t just keep tucking everything behind
everything else. In order to make it look realistic, it has
to clip out parts of his arm. So we were able to do that with ClipPath. And if you use something called mask, you
can use opacity. So ClipPath will respect the geometry, but
something like a mask — we can create something like a GIF masking, with all of these SVG
patterns, and slowly unveil them. We create a mask in defs and put inside of
it the image that we want to use and apply it to a rect that has this pattern associated
with it. I learned this technique from Yoksel. These are super, super awesome. She has an amazing collection of ClipPaths. So if you need to learn about them, this is
interactive and you can play with it and the code is Open Source. I got confused by the difference between ClipPaths
and masks, so I wrote a CSS-Tricks article you can look at that defines the difference
between them. CSS-Tricks has good SEO so I knew I could
look at my own resource if I got lost over and over again. And you can have that masking apply to text
and do things like have your users update text too. This pen, by Noel Delgado, is the most famous
and my favorite example of this, clipping and masking that’s paired animation. SVG can signify something changing. I kept going in between different time zones
for my work. I couldn’t remember where all of my coworkers
were or what time it was. And I could have just made a dial that just
showed what time things were. But by changing the SVG and making that dial,
that associates that change in time, I get a better sense of whether or not it’s day
or night and I can ping them or not, or they’re probably with their kids or something like
that. But while I was working on this, something
interesting I found was — I used to use this thing called moment.js that kind of allowed
me to work with time data and understand where everybody was, in terms of daylight savings
time. But there’s actually a native method called
two-locale-time-string that offers all of these defaults. Like hours and minutes and all sorts of things. So that actually respects all of those daylight
savings times. So you can eliminate a big library like Moment. You can use SVG’s viewBox as a camera. This is one of my favorites. You might already know this, but when you
have something like a graphic, when SVG’s plotting all of those points to draw those
coordinates, it’s doing so on a big piece of graph paper, basically. And that piece of graph paper is endless. It’s just this giant coordinate system. And in order to see inside of that SVG, and
know where to plot those coordinates, and what you’re looking at, you have a thing called
the viewBox. And the viewBox is made up of four values. 0,0, that’s X and Y, where to start it off,
and then width and height. So if I wanted to update this viewBox to just
look at these little houses or something, I would have to update them to 215×160, 42×20,
so SVG also has a native method called get bbox. And that will return this object that has
X, Y, width, and height, for anything that’s inside the SVG. That’s cool. That sounds a little familiar. That might be what we need to maybe animate
it or update it on the fly. So here I’m just using that to update the
viewBox, and then if I take that out, it will go right back to where it was. So I’m just setting the attributes based on
that. So then we can do something like this data
visualization, where we’re zooming in on a certain country, in order to show different
pieces of information. And again, because it’s SVG, it’s all totally
scalable for mobile, and it’s so small, because it’s just one path that’s drawn. We can also make a flowchart. Basically this is just a giant SVG, and we’re
just moving things based on the user input. And people can pick a certain thing and then
they can go to a different kind of output. We can make interactive flow charts. This one is really cool. This is a game that somebody made. Updating the viewBox, where they’re placing
little household items and stuff. But we can do better. We can do a big game. So let’s make a game. And that will be the last thing we do this
afternoon. (funky driving music) So if we have a game about a hipster elephant
that’s going to go get tacos but his friends keep texting him to change plans, and you’re
supposed to get the tacos, but avoid the text messages, and there’s margaritas for extra
bonus points, so you can basically move this guy around, and your heart meter goes up and
down. And if you lose the game, you become hangry
and you have to watch a movie you already saw. And if you win the game, you can tweet out
your score. It’s based on real life events. So how do we use SVG, in order to create this? We’re using React to manage all the state
for that application. If you know how to manage state for an application,
you can probably already make a game too. So we’re using SVG three ways. We have it directly inline in the HTML for
loops. We have background images for things like
tacos. But we’re not really updating the tacos. We’re just throwing them across. So they don’t have to do anything super special. And we have things inline directly in React. So let’s look at that last one really quickly. So this is a slightly older pen, so I know
I’m using react.createClass. I wouldn’t use that now. I would use class extends. So we have that original score at 500. We’re setting it to start. Because they can play it again. They can get to the end and decide to replay. We’re setting the score back to 500. We don’t want them winning too much or losing
too much. And we have the updateScore that will end
the game or win the game if it gets to a certain amount. Then — and my highlighter is not on this. It’s on the dots. But it should be on the heart meter. And that heart meter — we’re passing down
this .state.score. So you might have noticed that the heart meter
at the top of the game that was keeping track of our score… So basically we have this SVG. And that SVG is actually really, really big. Because I want to use whole numbers for this. I don’t want to use 27.25 or something to
update the score. I want to use 1,000 or zero. So it’s really big. And then we have the width, that’s this.props.score. And in our rect, in SVG, in order to update
it, we have an X, Y, width, and height. Just like the bounding box. So we can update that on the fly. And because it’s SVG, we can make it super
small then, for the size of the screen that we need. And on desktop, it’s a certain size, and on
mobile, it’s a different size, with media queries. All of that, and we didn’t even get to any
data visualization. I wrote a book about SVG animation. This is not my book. This is my friend making fun of me. I don’t have a Manblob animal. That’s not even my last name. I do have a real O’Reilly book. I think I have a fancy chicken or something. That’s cool. Yeah. Thank you so much for coming today. I appreciate it. (applause)>>Thank you so much, Sarah! Those animations totally blew my mind. And I love how you shouted out so many other
creators in your talk. Way to spread the love.>>Yeah, yeah. There are a lot of them.>>We have time for one quick question. What resources would you recommend to get
started creating awesome SVGs like the ones you showed?>>Yeah, actually, I think a misconception
that a lot of people have is that you have to be a designer in order to make things with
SVG. You don’t. There’s tons of free SVGs online that you
can go play with. has tons of free vectors that
you can use. The Noun Project has a bunch of free vectors. So you can just download them and start playing
them and animating them and manipulating them.>>Awesome. Thank you, Sarah. Definitely go buy her book if you want to
learn more.

Leave a Reply

Your email address will not be published. Required fields are marked *