# animate Published articles for animate. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Dynamic Tints with CSS and Kotlin/JS DevFeed: [Dynamic Tints with CSS and Kotlin/JS]() Original publisher: [Read original article]() Author: Jesse Wilson Published: 2026-01-30T23:12:23Z Content type: tutorial Language: en Sources: [Public Object]() Topics: [CSS](), [ui](), [color](), [Kotlin](), [SVG]() Tags: [animate](), [color](), [css](), [kotlin](), [svg](), [ui]() ### AI overview A developer describes adding dynamic color tints to a game-scoring UI using CSS classes, transitions, and Kotlin/JS. The article also explains recoloring single-color SVG icons with CSS masks and dynamically inserted stylesheet rules. ### Source excerpt I've been trying to build a remarkable UI for Rounds.app. One feature that turned out quite well is tinting the game name & menu bar icons when the winner changes. In this recording you can see colors change when I toggle the win condition: The title color changes ## Using Compose Hot Reload to Build a Vaporwave-Inspired Compose Desktop Project DevFeed: [Using Compose Hot Reload to Build a Vaporwave-Inspired Compose Desktop Project]() Original publisher: [Read original article]() Published: 2025-06-09T10:52:55Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [compose-hot-reload](), [Compose](), [Kotlin](), [Gradle](), [multiplatform](), [repo]() Tags: [animate](), [code](), [compose](), [compose-hot-reload](), [gradle](), [kotlin](), [multiplatform](), [reload](), [repo](), [vaporwave]() ### AI overview An exploratory tutorial on using JetBrains Compose Hot Reload in a Compose Desktop project, with Vaporwave as the visual theme. It covers project setup, Kotlin 2.1.20 or later, plugin configuration, the foojay resolver, and running the application. ### Source excerpt Why I want to play with the recently released Compose Hot reload feature by JetBrains. To do this I setup a Desktop compose project and picked a topic to draw and explore: Vaporwave Why? because Vaporwave is a curious Internet thing. It has a strong visual aesthetic that I wanted to recreate. It is intriguing. It is seems to be a fleeting transient phenomena: it is in the name vapor and wave and yet... and yet we see it pop up in unexpected places. It is a form of hauntology: a cultural idea that returns from the past to haunt the present. There will be ramblings interspersed and remixed with code, I will put the code at the beginning of the sections, so that you can easily skim if remix-rambling is not your thing. Yes, there is a matching repo. Yes, it is a mix of organic hand coding and AI enhancements. I will explain my process. But first Setting up Hot Reload You need: A project that has a Compose desktop part. It can be stand alone or part of a multiplatform project Use a Kotlin version 2.1.20 or later Get the plugin and the latest version information and add it the place you keep your versions, like a toml file Setup the plugin in your build.gradle.kts Setup the foojay resolver Run the main application from the gutter icon or command line. something like ./gradlew runHot --mainClass MainKt --auto Optional extra make a run target for your particular main application if you have more than one See and example of each line in the sample repo Wow these instructions are vague! indeed things change quickly. Please follow the original repo. This post will date. Origins and Sound track Vaporwave appeared as a music genre with a strong aesthetic, some say in 2010. The iconic album Floral Shoppe by Macintosh Plus is still available and makes a perfect sound track for inspecting the code or reading this article. Go ahead click the link and start the music. I'll wait. We are on the cusp of widespread changes in how we interact with technology. Will we have nostalgia for the ## Vibecoding a Totoro tribute with Junie DevFeed: [Vibecoding a Totoro tribute with Junie]() Original publisher: [Read original article]() Published: 2025-03-02T21:02:23Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [junie](), [Compose](), [Kotlin Multiplatform](), [Canvas](), [shaders]() Tags: [animate](), [canvas](), [code](), [compose](), [junie](), [kotlin](), [kotlin-multiplatform](), [screen](), [shaders]() ### AI overview The article describes using Junie to experiment with visual drawing techniques in a Kotlin Multiplatform Compose desktop project. The project combines canvases, gradients, paths, shapes, text, shaders, animations, and interaction to create a Totoro tribute, without aiming for production readiness. ### Source excerpt Sunday afternoon. Perfect time to hang out with Junie. I want to refresh my memory on some Compose drawing techniques. I am not really in the mood for Googling. I don't need a production ready app. I really just want to mess around. How far can I vibe code this. I'll start off by setting Junie to brave mode. I added an image and some colours to the repo of a blank compose desktop project. I also put a copy of an older blogpost of mine with some drawing techniques. I set some ground rules with the first prompt and then just keep asking Junie to add things. Create a guidelines file with the following information and update the README.md file. Let's explore some visual techniques in this Kotlin multiplatform project. The aim is to go for variety of techniques. Feel free to use the canvas, brush, paint, gradient, lines, paths, rounded polygons, skia shaders, text, colours, shapes. Or anything that will create an interesting visual effect. Animations are not necessary but can be added. The project does not have a practical application other than to demonstrate how to create interesting visual elements and to have some fun. It is a visual tribute to the Studio Ghibli film, [My Neighbor Totoro](https://en.wikipedia.org/wiki/My_Neighbor_Totoro). * It does not need any tests * Layer all the visual techniques on the main composable screen. * Find the suggested fonts in the resources folder * Find inspiration in the docs/looks folder and in the docs/blogpost folder I think Junie got what I wanted to do, I never explained what Totoro looks like but it figured out something from the included inspiration image. The early experiments needed some tweaking The only time the project didn't run was when Junie didn't download the new fonts but I found the instructions on where to get the fonts added to the README.md. I had no real expectations so I'm pretty happy with the final result. Animating rain and clickable wobbling Totoro. No explanations really what can I say I didn't read the ## How to build Wrapped 2023 in Compose Animation DevFeed: [How to build Wrapped 2023 in Compose Animation]() Original publisher: [Read original article]() Published: 2023-12-09T15:18:17Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [Compose](), [Android](), [SVG]() Tags: [animate](), [animation](), [canvas](), [code](), [compose](), [compose-animation](), [how-to](), [svg]() ### AI overview A tutorial on recreating selected Spotify Wrapped 2023-style animations with Jetpack Compose. It demonstrates Canvas drawing, drawWithCache, gradients, RoundedPolygon transformations, looping animations, progressive line drawing, and extracting paths from SVG files. ### Source excerpt How to build Wrapped 2023 in Compose Animation If I had to build the Spotify Wrapped 2023 animations in Compose, this is how I would do it. This blog post doesn't reproduce the effects identically, but it shows some of the basic Compose animation techniques you could use. It uses Canvas drawing and especially the drawWithCache modifier. It also uses RoundedPolygon, various matrix transformations and looping animation techniques using infiniteRepeatable. There is a section about how to get a path from an svg file as well. I created three different techniques. The first is a simple box with an animating linear gradient and an animating offset. The second is a spiky star using a RoundedPolygon with colour stop gradient and some animations in a graphicsLayer. The last is a progressivly drawing line. As a bonus we'll make a palette using unsplash.com and coolors.co Let's start with the palette. Pick a palette Pick an image from unsplash and pull some colours from the image. Here's one I got. I then loaded it into coolors.co and picked some palette colours from the image. Here are the colours I picked: val Pasta = Color(0xFFE7D6CE) val OrangeSquash = Color(0xFFFD9B72) val Plumberry = Color(0xFF682084) val Aubergette = Color(0xFF421F7B) val SwimmingCap = Color(0xFF4FBBA5) val Cherry = Color(0xFFFC1946) val Sherbet = Color(0xFFD33BB9) val Licorice = Color(0xFF35192B) val Custard = Color(0xFFFEC05D) We can now use these everywhere as gradients or backgrounds and our animation will have a consistent look that matches the mood from the image. Shimer pane - animating Linear Gradient For this sliding box we animate the offset with an infiniteRepeatable and we animate the offset of the LinearGradient. The colors of the gradient are chosen from the colors of our newly created palette. The linear gradient changes colour from corner to corner. By changeing the offset of the gradient it moves the gradient in the shape. If we then animate this offset it will make the colours move acro ## Android Makers by droidcon 2023: Talk and App Clinic Stream DevFeed: [Android Makers by droidcon 2023: Talk and App Clinic Stream]() Original publisher: [Read original article]() Published: 2023-04-27T19:46:32Z Content type: opinion Language: en Sources: [maiatoday]() Topics: [Android](), [App]() Tags: [android](), [android-makers-2023](), [animate](), [app](), [compose](), [conference](), [droidcon](), [stream](), [talk]() ### AI overview A personal commentary on Android Makers by droidcon 2023, describing it as a small conference with interesting talks and networking, and linking to the author's talk and the app clinic session stream. ### Source excerpt Android Makers by droidcon 2023 was a lovely well sized conference. Big enough to hear some interesting talks and small enough to make new friends. Here is my talk and also the stream of the app clinic session. ## CSS blocky people making waves DevFeed: [CSS blocky people making waves]() Original publisher: [Read original article]() Author: Stanko Published: 2022-11-10T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [CSS](), [Web Components](), [HTML](), [Web Development]() Tags: [animate](), [code](), [components](), [css](), [element](), [html]() ### AI overview A tutorial on creating blocky people performing a stadium wave using only CSS. It explains how to build 3D boxes from HTML elements and CSS, then use Web Components templates to reduce the repeated HTML needed for each person. ### Source excerpt It all started with the code challenge in our office. The weekly theme was waves, and I tried to think outside of the box. After dropping a few ideas, I remembered the waves people do on stadiumsAccording to Wikipedia these are known as Mexican or stadium waves. So I made waves using CSS only (code is available on CodePen): I started without a real idea on how to do it. Obviously, I needed to create some people and animate them. 3D people would be nice, but as this was a weekly code challenge, I had to keep it simple. Blocky people, similar to characters in Minecraft, seemed like a good idea. Making them using Three.js felt too obvious, as I wanted something a little bit more unconventional and fun. CSS was definitely not made for something like this, which is why I wanted to try it out. Box # Blocky people are obviously made of blocks, so I needed to build some 3D boxes in CSS. There are many tutorials on creating a 3D box in CSS, so I'll try to keep this short. We'll need six elements to use as sides of the box. Each side needs to be appropriately sized, rotated and translated into its place.
Show HTMLHide HTML Here you can see the three steps in creating a CSS box: Size the sides appropriately Translate them into position Rotate them The box wrapper element is outlined in red and sides are outlined in blue. If you want to play with it, I created a standalone CodePen. As a bonus, here is a three-sided prism as well. WebComponents # Each box consists of seven HTML elements (a wrapper and six sides). And each person ended up being built from twelve boxes and some additional wrappers. That means that each person requires a lot of HTML to be written. To simplify things, we can use WebComponents. Web components are a pretty powerful tool, but in this case, we will only use their template capabi ## Retro Cursor-Inspired Animations in Jetpack Compose DevFeed: [Retro Cursor-Inspired Animations in Jetpack Compose]() Original publisher: [Read original article]() Published: 2022-05-24T20:11:19Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [Jetpack Compose](), [Mobile](), [Code](), [Canvas]() Tags: [90s-website](), [animate](), [animation](), [canvas](), [code](), [compose](), [jetpack-compose](), [mobile]() ### AI overview A tutorial describing Jetpack Compose implementations of retro cursor-inspired mobile animations. It covers gesture-controlled draggable content, an animated lifesaver candy, a pulsing heart, and a pixie-dust particle effect. ### Source excerpt Another installment of the 90s web aesthetic experiments. In the 9Os animated cursors were all the rage. On a mobile device of course we don't have the concept of a cursor. There are gestures that can be detected: touches and drags. So for this project I split up the following pieces to code: The benefits of this approach are the animating composables can be reused as progress indicators or other elements that appear or disappear to reward customers on their actions. Detect gestures and draw a composable lambda on screen based on the gestures - CursorVisible Build a few animating composables An animating lifesaver candy /Sweet A pulsing pink and red heart Build a screen where I can switch the different animating composables in the CursorVisible composable Build pixie dust animation by repurposing my confitti code First of all I needed a Composeable which would take a content and could allow me to drag another composable around. Here's the code for this. It makes the content visible and invisible on a tap and lets you drag the content. @Composable fun CursorVisible(content: @Composable () -> Unit) { val boxSize = 100.dp val boxPx = with(LocalDensity.current) { boxSize.toPx() } var offset by remember { mutableStateOf(Offset(0f, 0f)) } var visible by remember { mutableStateOf(false) } Box(modifier = Modifier .fillMaxSize() .pointerInput(Unit) { detectTapGestures { offset = it - Offset(boxPx/2, boxPx/2) visible = !visible } } ) { if (visible) { Box( Modifier .offset { offset.round() } .size(boxSize) .pointerInput(Unit) { detectDragGestures { change, dragAmount -> change.consumeAllChanges() offset += dragAmount } } ) { content() } } } } This CursorVisible can have content of anything. So I made a lifesaver sweet/candy that changes colour and a pulsing red and magenta heart. The lifesaver is just circles and arcs drawn on the canvas and then some parameters such as angle and colour animated. @Composable fun LifeSaver(rainbow: List = SkittlesRainbow) { val color by ## Lightning Demo of Compose animation DevFeed: [Lightning Demo of Compose animation]() Original publisher: [Read original article]() Published: 2022-02-28T19:13:06Z Content type: article Language: en Sources: [maiatoday]() Topics: [Compose](), [Mobile](), [Demo]() Tags: [animate](), [compose](), [compose-animation](), [demo](), [desktop](), [lightning](), [mobile](), [talk]() ### AI overview A lightning talk for Jozi-JUG demonstrates Compose animation on mobile and desktop, with accompanying slides. ### Source excerpt A lighting talk for Jozi-JUG demonstrating Compose animation and demo on mobile and desktop. slides ## Magic Sprinkles at DevFest UK Ireland DevFeed: [Magic Sprinkles at DevFest UK Ireland]() Original publisher: [Read original article]() Published: 2022-01-29T10:53:10Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [Jetpack Compose](), [ui](), [API]() Tags: [animate](), [compose](), [compose-animation](), [compose-ui](), [devfest](), [jetpack-compose](), [repo](), [sample](), [talk](), [ui-components](), [video]() ### AI overview A shorter version of a DevFest UK Ireland talk introducing Jetpack Compose animations. It covers the animation API, simple quick-win animations, and more complex custom animations, with examples in a sample app and companion code repository. ### Source excerpt A shorter version of my Magic Sprinkles talk presented at DevFest UK Ireland Magic Sprinkles: Adding animations to your app with Jetpack Compose I have some Jetpack Compose UI components in my app and now I want to add animations, where do I start? In this presentation I will look briefly at the Jetpack Compose animation api to get an overview of the animation system. Then I will look at a few quick win simple animations that can add some magic to your app. I will dive into more complex and custom animations to see what is possible. All of these experiments will be illustrated in a sample app provided in a companion repo. At the end of this talk you will: have an overview of how animation works in Jetpack Compose have some practical animation examples that you can add to your app immediately have an idea of what is possible with complex and custom animations have a code repo of examples Repo Slides Video ## Confetti Cleanup DevFeed: [Confetti Cleanup]() Original publisher: [Read original article]() Published: 2021-12-31T05:37:42Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [Jetpack Compose](), [Code](), [implementation](), [function]() Tags: [animate](), [animation](), [code](), [compose](), [extension-function](), [how-to](), [implementation](), [memory](), [state]() ### AI overview The article revisits a confetti animation modifier for Jetpack Compose and examines object allocation in its particle system. It explains how using the immutable Offset class reduces extra allocations while retaining Compose's state-change requirements, and briefly shows how to create and apply a drawing modifier. ### Source excerpt In my exploration of animation in Jetpack Compose I built a Confetti modifier that could be applied to any composable. I first showed the modifier in my presentation for Chicago Roboto but since I made it something was bothering me. The way that I can get the state in Compose to register change is by making copies of objects or making new objects. For a modifier that uses particles this can be many objects. I profiled my original modifier and sure enough I see the object allocation and also the garbage collectore cleaning up when the confetti modifier is visible. Fast forward to Dec 2021 and my friends over at Code with Italians built a similar snow modifier. Revisiting my modifier, I cleaned it up. I managed to get rid of some of the object allocation. However since it is a particle system and each of the particles change position, it needs some form of state that changes as the position of the particles change. I used the Offset class as this is the object that a Circle needs to draw and the object has been optimised to pack the x and y floats. It also has some other useful functions and operators. Offset is immutable so if the particle changes position a new object is made. It is smaller than my original implementation. It isn't really fair to compare the screenshot below with the one above as the time over which the heap capture ran is is not the same. The shallow size of Offset is 16 and the shallow size of the original Confetto objects is 24 and the point inside the Confetto object also has a shallow size of 16. The improvements eliminated the allocation of the extra Confetto object. My intuition says it is preferable to sprinkle the memory with fewer smaller pieces of confetti rather than many larger ones. Still there isn't really a way around it since Offset is immutable and Compose is built around tracking unidirectional state flow. Mutable State holder classes won't register a change if the object that holds the state doesn't change. This means if I keep a ## Two Talks - Magic Sprinkles: adding animations to a Jetpack Compose app DevFeed: [Two Talks - Magic Sprinkles: adding animations to a Jetpack Compose app]() Original publisher: [Read original article]() Published: 2021-09-28T14:10:24Z Content type: article Language: en Sources: [maiatoday]() Topics: [Jetpack Compose](), [Compose]() Tags: [animate](), [compose](), [gdg](), [jetpack-compose](), [talk](), [talks](), [video](), [videos]() ### AI overview A resource page for the "Magic Sprinkles" talks presented at Chicago Roboto 2021 and GDG Cape Town, focused on adding animations to an existing Jetpack Compose app. It provides videos and slides. ### Source excerpt I presented a talk for Chicago Roboto 2021 and for GDG Cape Town titled Magic Sprinkles: Adding animations to and existing app. Below are the videos of both talks and the slides Slides Chicago Robot video GDG Cape Town video ## Welcome you are visitor number 12345 DevFeed: [Welcome you are visitor number 12345]() Original publisher: [Read original article]() Published: 2021-07-12T19:44:03Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [ui](), [Code](), [navigation]() Tags: [90s-website](), [animate](), [code](), [components](), [compose](), [coroutine](), [snippet](), [state](), [stateflow](), [stateless](), [ui](), [viewmodel](), [visitor-counter]() ### AI overview A tutorial on building an animated visitor counter in a classic 1990s website style. It explains how to animate each digit independently, manage the counter and counting direction in a view model, keep composable UI components stateless and reusable, and connect the screen through navigation and Hilt. ### Source excerpt Another step forward in recreating the icon 90s website look is the hit counter, visitor counter or web counter in classic squemorphic odometer style. I was inspired by a recent episode of Code with Italians where they animated a time field. I wanted to change the counter component to animate each number individually to get that odometer look. Before doing this though there was a question of state. I wanted to make a counter that would auto increment in a coroutine. It had to change direction up or down if you tapped it. To do this I decided to store the state and the counting direction in a view model. This allowed me to keep the components as stateless as possible. The components are re-usable because the logic that makes the numbers go up or down is held outside of the composable functions. The recommendation from Google is when you use a view model to hold state, keep it close to the root screen. I made a screen for my visitor counter and added it to my navigation code. Since I already had Hilt enabled in the project it was pretty easy to get hold of the viewmodel. The code snippet in the Navigation looks like this: NavHost(navController, startDestination = "overview") { //... other routes go here composable(route = "counter") { val viewModel: CounterViewModel = hiltViewModel() //<--- get the viewmodel from Hilt val count by viewModel.counter.collectAsState() //<--- the viewmodel exposes the counter as a StateFlow CounterScreen( count = count, onClick = { viewModel.onClick() } // <--- the viewmodel provides a method for when the element is clicked ) } } The CounterScreen is stateless and gets the value of the counter and the event handler as parameters. The CounterScreen has a Counter composable. The role of the Counter composable is to create a row of individual odometer numbers from the passed values. Also it should intercept a click and call the click handler. @Composable fun Counter( onClick: () -> Unit, count: Int, width: Int ) { val displayWidth = maxOf(3, ## Animating Rainbow Text DevFeed: [Animating Rainbow Text]() Original publisher: [Read original article]() Published: 2021-06-26T22:13:10Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [Compose](), [Jetpack Compose](), [color](), [Font](), [Website]() Tags: [90s-website](), [animate](), [animation](), [code](), [color](), [compose](), [jetpack](), [jetpack-compose](), [rainbow](), [recompose](), [repo](), [test](), [typography]() ### AI overview A tutorial on building animated rainbow text with Jetpack Compose. It covers custom colors and typography, per-character coloring, continuous transitions, keyframes, and staggered animations, with a test screen and source repository. ### Source excerpt Do you remember web pages in the nineties? Everything was pulsing, rotating and animating. I am exploring Jetpack Compose animations and I figured if I can reproduce a 90s web page look, I can do anything. Also June is the month of Rainbows. So to kick off this series I am building animating rainbow text. First I need a rainbow. It needs to be flexible enough for me to be able to swap in any rainbow. val RainbowRed = Color(0xFFDA034E) val RainbowOrange = Color(0xFFFF9800) val RainbowYellow = Color(0xFFFFEB3B) val RainbowGreen = Color(0xFF4CAF50) val RainbowBlue = Color(0xFF2196F3) val RainbowIndigo = Color(0xFF3F51B5) val RainbowViolet = Color(0xFF9C27B0) val SkittlesRainbow = listOf( RainbowRed, RainbowOrange, RainbowYellow, RainbowGreen, RainbowBlue, RainbowIndigo, RainbowViolet ) Since web pages in the nineties used Times New Roman and Helvetica, I added a free version of a serif font. I chose Source Serif. I included the ttf files in the project and made a FontFamily and hooked this into the theme. val SourceSerif = FontFamily( Font(R.font.source_serif_pro_regular), Font(R.font.source_serif_pro_bold, FontWeight.Bold), Font(R.font.source_serif_pro_light, FontWeight.Light), Font(R.font.source_serif_pro_black, FontWeight.Black), Font(R.font.source_serif_pro_extra_light, FontWeight.ExtraLight), ) val Typography = Typography(defaultFontFamily = SourceSerif) MaterialTheme( colors = colors, typography = Typography, shapes = Shapes, content = content ) Next I made a composable that would colour each letter of a string. This simple composable took as many text parameters in and then split the string colouring each character to the colour of the rainbow in the parameter. The startColor index is used to pick which colour the first letter will be. @Composable fun MultiColorText( modifier: Modifier = Modifier, text: String, style: TextStyle = LocalTextStyle.current, rainbow: List = SkittlesRainbow, startColor: Int = 0, ) { Row(modifier) { var index = startColor for (l ## Random Animating Pie Button DevFeed: [Random Animating Pie Button]() Original publisher: [Read original article]() Published: 2021-06-16T21:36:11Z Content type: tutorial Language: en Sources: [maiatoday]() Topics: [Compose](), [Canvas](), [Code]() Tags: [animate](), [canvas](), [code](), [color](), [component](), [compose](), [custom](), [data-class](), [exploring](), [fun](), [functions](), [jetpack](), [jetpack-compose](), [random](), [val](), [var]() ### AI overview A Jetpack Compose sample demonstrates a custom pie-chart component that draws with Canvas and animates to a random percentage when a button is clicked. ### Source excerpt I am exploring animations with small sampler functions using Jetpack Compose. This one is a custom component that draws a little pie chart. It will animate a random pie value on the click of the button. data class PieData( val foreground: Color = Color.White, val strokeWidth: Dp = 4.dp, val percentage: Float ) @Composable fun PieStatus( modifier: Modifier = Modifier, pieData: PieData ) { var animationPlayed by remember { mutableStateOf(false) } val currentPercentage = animateFloatAsState( targetValue = if (animationPlayed) pieData.percentage else 0f, animationSpec = tween(1000) ) LaunchedEffect(key1 = true) { animationPlayed = true } Canvas( modifier = modifier ) { val canvasWidth = size.width val canvasHeight = size.height drawCircle( color = pieData.foreground, center = Offset(x = canvasWidth / 2, y = canvasHeight / 2), radius = canvasWidth / 2 - pieData.strokeWidth.toPx(), style = Stroke(width = pieData.strokeWidth.toPx()) ) val arcPadding = pieData.strokeWidth.toPx() * 2 drawArc( color = pieData.foreground, startAngle = -90f, sweepAngle = currentPercentage.value * 360, useCenter = true, topLeft = Offset(arcPadding, arcPadding), size = Size(size.width - (arcPadding * 2f), size.height - (arcPadding * 2f)) ) } } code ## Sektor - draw and animate SVG sectors DevFeed: [Sektor - draw and animate SVG sectors]() Original publisher: [Read original article]() Author: Stanko Published: 2016-06-29T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [SVG](), [JavaScript](), [Library](), [browser](), [React UI animations]() Tags: [animate](), [browser](), [javascript](), [library](), [react-component](), [svg]() ### AI overview This article introduces Sektor, a plain JavaScript library for drawing circular sectors or arcs in SVG. It explains that the sector angle can be changed and animated, and notes browser support including IE10 and modern browsers with SVG and requestAnimationFrame support. ### Source excerpt For a current project I'm on, we needed both circular timer, and progress bar. Again, I wasn't able to find small library to do that. But I found awesome answer on Stack Overflow, decided SVG is way to go, and wrote Sektor. Sektor is a plain JavaScript library that draws circle sector (or an arc). Once it is drawn, you can change it's angle and animate the change. It works in every browser with SVG and requestAnimationFrane support (IE10+ and modern browsers). Check demo and docs. I may use this for example how much better is to use requestAnimationFrame than setInterval. If you are bored, try it yourself, and you'll see that animating using requestAnimationFrame is way smoother. React component is coming soon as well. Cheers!