 Ya, pergi, pergi, pergi Hai semua, saya Teng Xuyang, pembangunan dan pembangunan di Shopee Untuk bercakap dengan saya hari ini Saya mahu semua orang tahu bahawa B.A.T adalah kawasan C.S. Itu saja, itu semua kawasan Dan mari kita pergi makan malam, mari kita pergi Cuma beritahu Tidak-tidak pembentangan ini Ia berinspirasi oleh Tweet dari Chris Coyer Sebelumnya, saya tak boleh membuat pembentangan bercakap tentang B.A.T dalam C.S. Jadi, saya akan membuat kawasan ini dengan bercakap tentang Kilih kawasan C.S. dan Kilih S.V.G. Untuk membuat pembentangan seperti Ket Farting Dari pembentangan kita Ia dibuat dengan pembentangan untuk kawasan Rotet dan Transform Kita sebenarnya ada pembentangan Kilih kawasan C.S. Dan mempunyai kawasan unik kepada pembentangan Kilih S.V.G. Awak dapat membaca lebih banyak tentang kawasan C.S. You can read more about more details in the CSS documentation. For most of my examples, I'm using that fat-win thing that I drew on a tool, factor.com. We can see that lines in SVG are essentially represented by waypoints and as shown in the slides with the circles there. To get your hands on SVGs and play around, you can of course draw like I did on a tool online. Or with some of my examples, you can actually get it from just a free SVG.org. Sometimes you can also get it from a library. There are many JS libraries that allow you to draw SVG with a canvas syntax. Or you can just, or there are programs like for example Figma and basically they allow you to export images as SVGs. So if we pick into the SVG content, we see that it is mostly just a series of paths. And I'd like you to take note of this thing that I added called path length equals to 1. This will be used later. But basically, yeah, it's just paths or sometimes some basic shapes. Being a vector-based representation, it gives us some benefits. You can have crisp and sharp images at all sizes. If we declare SVGs in our markup itself, we don't have to send another HTTP request for each image. We can easily scale not just the whole thing but even parts of the images. And basic SVG support is already available in all browsers, even mini-browsers. So if anyone out there is still using PNG and GIFs for their icons, you can just switch over to SVG just based on all these benefits themselves. It's also very, very lightweight. But we don't just have to draw the paths as lines. We can also do fun things like have some tags follow a path, or we can make shapes from paths, or make shapes that follow a path, follow another path, or you can make paths follow a path that follows a path that follows a path, and so on and so forth. But some common CSS that we use in things like stroke fill and stroke wave. So these are normally used in my daily development to change colour of icons. Sometimes I do an effect where I thicken the stroke wave on hover to make it show as an item is highlighted. And yeah, we can also make shapes with fill. So the namesake of this presentation is actually, it was so disappointing. It was just a value for line-cat properties. So we can see it can be round, butt and square. So butt and square look almost the same, except square has a h that sticks a little bit out from the other lines. Another property that we can play around with, dash array and dash offset, it's a bit hard to wrap our head around what are all these values. So just now I pointed out the path length equals to 1. It shows us we can actually use, if we put it into the SVG line, we can use it to use a ratio from 0 to 1 to represent how much of that line. So there are other things we can do. So all these examples so far are very boring. We want to have more farting cats or at least more things that are a bit more interesting. What we can do, we can have CSS animations to move the dash offset value. So this is actually a single line spiral that I found on Free SVG. Without any prior knowledge, I just created this spiral effect just by having the stroke offset moving at different intervals. Alternatively, you can have a neon sign effect. All I did here was to change the color of the line and then thicken the line at certain timings. So it gives a glowing neon sign effect. We can also animate something like color fields. Right here. So we can animate color fields over here with CSS animations. You only need to actually write out which color stops you want. Like keyframes as you would in most animations and fading from color to color is automatically handled for us. So a very common use of SVG also or SVG animation is to create this sketching effect. Here I added the same path length equals to one for every path and adjusted the dash offset from zero to one and going back and forth. So I could put in more effort to stagger the line so that it actually looks like it's being drawn but I'm very, very lazy. So this is how I did it. I also was so lazy that I didn't want to put the path length and I wrote this JS loop to just set the attribute for all of them and the nice thing is that we don't have to use this CSS rules alone. We can always use JS to help us out with our tasks. Another way is we can actually just use the markup itself. So the ball is just a div and the line itself is a path that is independent of the ball. So I copied and pasted the path into this offset path value in the ball and then do the animations. So there are a lot of libraries out there that use the same few concepts under the hood to achieve animations and interactions with SVGs. A general idea for SVGs that we can play with usually simple line art drawings without fields. Those are very easy to manipulate and have fun. So that's all for my talks. The first link, my blog you can access the slide at Slides.com you can see my code pen for all these examples and add me at Twitter if you find this interesting. Thanks. Okay everybody virtually clap for you all here you can clap louder but we hope it grows. Thanks anyway sir so sharing your screen. I share my screen.