# How to build Wrapped 2023 in Compose Animation

DevFeed: [How to build Wrapped 2023 in Compose Animation](<https://devfeed.tech/articles/how-to-build-wrapped-2023-in-compose-animation-32058.md>)

Original publisher: [Read original article](<https://www.maiatoday.net/p/how-to-build-wrapped-2023-in-compose-animation/>)

Published: 2023-12-09T15:18:17Z

Content type: tutorial

Language: en

Sources: [maiatoday](<https://devfeed.tech/sources/maiatoday.md>)

Topics: [Compose](<https://devfeed.tech/topics/compose.md>), [Android](<https://devfeed.tech/topics/android.md>), [SVG](<https://devfeed.tech/topics/svg.md>)

Tags: [animate](<https://devfeed.tech/tags/animate.md>), [animation](<https://devfeed.tech/tags/animation.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [code](<https://devfeed.tech/tags/code.md>), [compose](<https://devfeed.tech/tags/compose.md>), [compose-animation](<https://devfeed.tech/tags/compose-animation.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [svg](<https://devfeed.tech/tags/svg.md>)

## 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