diff --git a/articles/getting_to_know/howto/graphics/HowTo_Animate_Sprite.md b/articles/getting_to_know/howto/graphics/HowTo_Animate_Sprite.md
new file mode 100644
index 00000000..da0e3ea7
--- /dev/null
+++ b/articles/getting_to_know/howto/graphics/HowTo_Animate_Sprite.md
@@ -0,0 +1,267 @@
+---
+title: Animating a Sprite
+description: Demonstrates how to animate a sprite from a texture using a custom class.
+requireMSLicense: true
+---
+
+## Overview
+
+In this example, you will draw a sprite to the screen and then animate the sprite using a custom sprite animation class.
+
+### End result
+
+
+
+> [!NOTE]
+> Better animations can be done with better images and more frames, have a look at the [Platformer Sample](https://github.com/MonoGame/MonoGame.Samples/tree/3.8.1/Platformer2D) Provided by MonoGame for example.
+
+## Requirements
+
+The example assumes the texture you are loading contains multiple frames of the same size in a texture whose size is uniform (also known as a spritesheet), for example, the following spritesheet contains 8 Images of a character in different phases of motion, when player together it looks like it is animated.
+
+
+
+Save the spritesheet to your content project and name it "**AnimatedCharacter**" (this name will used to reference it in the project).
+
+> [!NOTE]
+> The sample also uses a class named **AnimatedTexture**, which is included with the sample below.
+>
+> The `AnimatedTexture.cs` is a helper to simplify the loading and drawing of a texture that contains multiple frames of animation.
+
+## Drawing an Animated Sprite
+
+1. Follow the steps of [How To: Draw a Sprite](HowTo_Draw_A_Sprite.md).
+ A good first step to understanding the loading and drawing of textures and setting up your project.
+
+2. Create a new class called `AnimatedTexture.cs` in your project and replace its contents with the following:
+
+ ```csharp
+ using Microsoft.Xna.Framework;
+ using Microsoft.Xna.Framework.Content;
+ using Microsoft.Xna.Framework.Graphics;
+
+ ///
+ /// A helper class for handling animated textures.
+ ///
+ public class AnimatedTexture
+ {
+ private int frameCount;
+ private Texture2D myTexture;
+ private float timePerFrame;
+ private int frame;
+ private float totalElapsed;
+ private bool isPaused;
+
+ public float Rotation, Scale, Depth;
+ public Vector2 Origin;
+
+ public AnimatedTexture(Vector2 origin, float rotation, float scale, float depth)
+ {
+ this.Origin = origin;
+ this.Rotation = rotation;
+ this.Scale = scale;
+ this.Depth = depth;
+ }
+
+ public void Load(ContentManager content, string asset, int frameCount, int framesPerSec)
+ {
+ this.frameCount = frameCount;
+ myTexture = content.Load(asset);
+ timePerFrame = (float)1 / framesPerSec;
+ frame = 0;
+ totalElapsed = 0;
+ isPaused = false;
+ }
+
+ public void UpdateFrame(float elapsed)
+ {
+ if (isPaused)
+ return;
+ totalElapsed += elapsed;
+ if (totalElapsed > timePerFrame)
+ {
+ frame++;
+ // Keep the Frame between 0 and the total frames, minus one.
+ frame %= frameCount;
+ totalElapsed -= timePerFrame;
+ }
+ }
+
+ public void DrawFrame(SpriteBatch batch, Vector2 screenPos)
+ {
+ DrawFrame(batch, frame, screenPos);
+ }
+
+ public void DrawFrame(SpriteBatch batch, int frame, Vector2 screenPos)
+ {
+ int FrameWidth = myTexture.Width / frameCount;
+ Rectangle sourcerect = new Rectangle(FrameWidth * frame, 0,
+ FrameWidth, myTexture.Height);
+ batch.Draw(myTexture, screenPos, sourcerect, Color.White,
+ Rotation, Origin, Scale, SpriteEffects.None, Depth);
+ }
+
+ public bool IsPaused
+ {
+ get { return isPaused; }
+ }
+
+ public void Reset()
+ {
+ frame = 0;
+ totalElapsed = 0f;
+ }
+
+ public void Stop()
+ {
+ Pause();
+ Reset();
+ }
+
+ public void Play()
+ {
+ isPaused = false;
+ }
+
+ public void Pause()
+ {
+ isPaused = true;
+ }
+ }
+ ```
+
+3. In your game's constructor, create an instance of the **AnimatedTexture** class.
+ This example uses `(0,0)` as the origin of the texture, `no rotation`, a scale of `2`, and a depth of `0.5`.
+
+ ```csharp
+ // The reference to the AnimatedTexture for the character
+ private AnimatedTexture spriteTexture;
+ // The rotation of the character on screen
+ private const float rotation = 0;
+ // The scale of the character, how big it is drawn
+ private const float scale = 0.5f;
+ // The draw order of the sprite
+ private const float depth = 0.5f;
+
+ public Game1()
+ {
+ _graphics = new GraphicsDeviceManager(this);
+ Content.RootDirectory = "Content";
+ spriteTexture = new AnimatedTexture(Vector2.Zero, rotation, scale, depth);
+ }
+ ```
+
+4. Load the texture to provide the image data for the animation.
+ In this example, the **AnimatedTexture** class loads a single texture and divides it into frames of animation. It uses the last parameter to determine how many frames to draw each second. In this case, it draws eight frames at three frames per second (fps).
+
+ ```csharp
+ // The game visible area
+ private Viewport viewport;
+ // The position to draw the character
+ private Vector2 characterPos;
+ // How many frames/images are included in the animation
+ private const int frames = 8;
+ // How many frames should be drawn each second, how fast does the animation run?
+ private const int framesPerSec = 10;
+
+ protected override void LoadContent()
+ {
+ // Create a new SpriteBatch, which can be used to draw textures.
+ _spriteBatch = new SpriteBatch(GraphicsDevice);
+
+ // "AnimatedCharacter" is the name of the sprite asset in the project.
+ spriteTexture.Load(Content, "AnimatedCharacter", frames, framesPerSec);
+ viewport = _graphics.GraphicsDevice.Viewport;
+ characterPos = new Vector2(viewport.Width / 2, viewport.Height / 2);
+ }
+ ```
+
+5. In your game's [Game.Update](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Update_Microsoft_Xna_Framework_GameTime_) method, determine which animation frame to display.
+
+ ```csharp
+ protected override void Update(GameTime gameTime)
+ {
+ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
+ Exit();
+
+ // TODO: Add your update logic here
+ float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
+ spriteTexture.UpdateFrame(elapsed);
+
+ base.Update(gameTime);
+ }
+ ```
+
+ This is handled by AnimatedTexture's **UpdateFrame** method, which takes the elapsed seconds between updates as a parameter, as shown below in the except from the "AnimatedTexture" class.
+
+ ```csharp
+ // class AnimatedTexture
+ public void UpdateFrame(float elapsed)
+ {
+ if (isPaused)
+ return;
+ totalElapsed += elapsed;
+ if (totalElapsed > timePerFrame)
+ {
+ frame++;
+ // Keep the Frame between 0 and the total frames, minus one.
+ frame %= frameCount;
+ totalElapsed -= timePerFrame;
+ }
+ }
+ ```
+
+6. In your game's [Game.Draw](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Draw_Microsoft_Xna_Framework_GameTime_) method, call [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_) on the **AnimatedTexture** object.
+
+ ```csharp
+ protected override void Draw(GameTime gameTime)
+ {
+ GraphicsDevice.Clear(Color.CornflowerBlue);
+
+ // TODO: Add your drawing code here
+ _spriteBatch.Begin();
+ // Replacing the normal SpriteBatch.Draw call to use the version from the "AnimatedTexture" class instead
+ spriteTexture.DrawFrame(_spriteBatch, characterPos);
+ _spriteBatch.End();
+
+ base.Draw(gameTime);
+ }
+ ```
+
+ **AnimatedTexture** draws the sprite using the subrectangle of the texture that contains the desired animation.
+
+ ```csharp
+ // class AnimatedTexture
+ public void DrawFrame(SpriteBatch batch, Vector2 screenPos)
+ {
+ DrawFrame(batch, frame, screenPos);
+ }
+
+ public void DrawFrame(SpriteBatch batch, int frame, Vector2 screenPos)
+ {
+ int FrameWidth = myTexture.Width / frameCount;
+ Rectangle sourcerect = new Rectangle(FrameWidth * frame, 0,
+ FrameWidth, myTexture.Height);
+ batch.Draw(myTexture, screenPos, sourcerect, Color.White,
+ Rotation, Origin, Scale, SpriteEffects.None, Depth);
+ }
+ ```
+
+There are many ways in which to handle the animation of sprites and they do not all need to be in a single line, some spritesheets use both Rows and Columns, sometimes for different animations for the same characters, or to maintain the same animation for multiple characters (remember it costs memory and time to load multiple textures, so why not just use one for efficiency).
+
+> [!TIP]
+> Alternatively, some projects use a [Custom Content Processor](../content_pipeline/HowTo_Extend_Processor.md) to generate the animation when the spritesheet is imported, which is more of an advanced topic.
+
+## See Also
+
+- [Drawing a Sprite](HowTo_Draw_A_Sprite.md)
+
+### Concepts
+
+- [What Is a Sprite?](../../whatis/graphics/WhatIs_Sprite.md)
+
+### Reference
+
+- [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch)
+- [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_)
+- [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D)
diff --git a/articles/getting_to_know/howto/graphics/HowTo_Draw_A_Sprite.md b/articles/getting_to_know/howto/graphics/HowTo_Draw_A_Sprite.md
new file mode 100644
index 00000000..958c8e49
--- /dev/null
+++ b/articles/getting_to_know/howto/graphics/HowTo_Draw_A_Sprite.md
@@ -0,0 +1,132 @@
+---
+title: Drawing a Sprite
+description: Demonstrates how to draw a sprite by using the SpriteBatch class
+requireMSLicense: true
+---
+
+## Overview
+
+In any game, drawing basic textures to the screen is essential knowledge, whether it is for menus and background images, to 2D game textures and characters. In this sample we will walk though the steps needed to load a texture and then render it on the screen.
+
+### End result
+
+
+
+## Requirements
+
+The following texture will be used to render to the screen.
+
+
+
+Save it to your content project and name it "**Character**" (this name will used to reference it in the project).
+
+> [!NOTE]
+> The tutorial assumes you have already [created a new MonoGame project](https://docs.monogame.net/articles/getting_started/index.html#2-creating-a-new-project) using one of the standard templates.
+
+## To draw a sprite on screen
+
+1. Add the texture to your Content project, as detailed in [HowTo Add Content](../content_pipeline/HowTo_GameContent_Add.md).
+2. Load the textures that will be used for drawing sprites in the [Game.LoadContent](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_LoadContent) method.
+ In this case, the example uses the **Content** member to load a texture from the MonoGame Framework Content Pipeline.
+
+ > [!IMPORTANT]
+ > The texture must be in the project, with the same **Name** passed to [ContentManager.Load](xref:Microsoft.Xna.Framework.Content.ContentManager#Microsoft_Xna_Framework_Content_ContentManager_Load__1_System_String_). In this case the texture should be called "Character"!!
+
+ ```csharp
+ // The reference to the loaded sprite
+ private Texture2D spriteTexture;
+ // The position to draw the sprite
+ private Vector2 spritePosition;
+
+ protected override void LoadContent()
+ {
+ // Create a new SpriteBatch, which can be used to draw textures.
+ _spriteBatch = new SpriteBatch(GraphicsDevice);
+ spriteTexture = Content.Load("Character");
+ spritePosition = Vector2.Zero;
+ }
+ ```
+
+3. In the [Game.Draw](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Draw_Microsoft_Xna_Framework_GameTime_) method, you will see a call to [GraphicsDevice.Clear](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice#Microsoft_Xna_Framework_Graphics_GraphicsDevice_Clear_Microsoft_Xna_Framework_Color_), which clears out the screen for the next frame.
+
+4. After [GraphicsDevice.Clear](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice#Microsoft_Xna_Framework_Graphics_GraphicsDevice_Clear_Microsoft_Xna_Framework_Color_), call [SpriteBatch.Begin](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Begin_Microsoft_Xna_Framework_Graphics_SpriteSortMode_Microsoft_Xna_Framework_Graphics_BlendState_Microsoft_Xna_Framework_Graphics_SamplerState_Microsoft_Xna_Framework_Graphics_DepthStencilState_Microsoft_Xna_Framework_Graphics_RasterizerState_Microsoft_Xna_Framework_Graphics_Effect_System_Nullable_Microsoft_Xna_Framework_Matrix__) on your [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object to ready the next batch of textures to draw.
+
+5. Call [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_) on your [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object, passing the texture to draw, the screen position, and the color to apply.
+
+ > [!TIP]
+ > [Color.White](xref:Microsoft.Xna.Framework.Color) is used to draw the texture without any color effects.
+
+6. When all the sprites have been drawn, call [SpriteBatch.End](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_End) on your [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object.
+
+ ```csharp
+ protected override void Draw(GameTime gameTime)
+ {
+ GraphicsDevice.Clear(Color.CornflowerBlue);
+
+ // TODO: Add your drawing code here
+ _spriteBatch.Begin();
+ _spriteBatch.Draw(spriteTexture, spritePosition, Color.White);
+ _spriteBatch.End();
+
+ base.Draw(gameTime);
+ }
+ ```
+
+When run, you should now see the character drawn in the top-left of the screen.
+
+> [!NOTE]
+> Actually, what you should see is the character drawn from the top-left of the screen. This is because (by default) the Top-Left corner of the sprite is the origin and the sprite is drawn from that position. The [Animated Sprite](HowTo_Animate_Sprite.md) example shows a simple way of offsetting the drawing of a sprite so that its middle is used as its origin instead.
+
+## Moving the sprite
+
+To move the sprite, simply update the `spritePosition` to a new location, a quick and easy way to do this would be to detect when the arrow keys are pressed and change the position, like so:
+
+```csharp
+ protected override void Update(GameTime gameTime)
+ {
+ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
+ Exit();
+
+ // TODO: Add your update logic here
+ KeyboardState state = Keyboard.GetState();
+ if (state.IsKeyDown(Keys.Right))
+ {
+ spritePosition.X += 1;
+ }
+ if (state.IsKeyDown(Keys.Left))
+ {
+ spritePosition.X -= 1;
+ }
+ if (state.IsKeyDown(Keys.Up))
+ {
+ spritePosition.Y -= 1;
+ }
+ if (state.IsKeyDown(Keys.Down))
+ {
+ spritePosition.Y += 1;
+ }
+
+ base.Update(gameTime);
+ }
+```
+
+See [How to detect input](../input/index.md) for more information on working with the various inputs that MonoGame supports.
+
+## See Also
+
+- [How to tint a sprite](HowTo_Tint_Sprite.md)
+- [How to rotate a sprite](HowTo_Rotate_Sprite.md)
+- [How to scale a sprite](HowTo_Scale_Sprite.md)
+- [How to animate a sprite](HowTo_Animate_Sprite.md)
+
+### Concepts
+
+- [What Is a Sprite?](../../whatis/graphics/WhatIs_Sprite.md)
+
+### Reference
+
+- [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch)
+- [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_)
+- [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D)
+
+(Character by `upklyak` from [FreePik](https://www.freepik.com/free-vector/cartoon-alien-character-animation-sprite-sheet_33397951.htm))
diff --git a/articles/getting_to_know/howto/graphics/HowTo_Rotate_Sprite.md b/articles/getting_to_know/howto/graphics/HowTo_Rotate_Sprite.md
new file mode 100644
index 00000000..dc29bdc4
--- /dev/null
+++ b/articles/getting_to_know/howto/graphics/HowTo_Rotate_Sprite.md
@@ -0,0 +1,111 @@
+---
+title: Rotating a Sprite
+description: Demonstrates how to rotate a sprite around its center.
+requireMSLicense: true
+---
+
+## Overview
+
+Rotating images and sprites is easy enough, but the main thing to keep in mind is that the origin (drawing point) of textures is actually the top-left of the image, corresponding with the starting drawing point which is the top-left of the screen (for 2D anyway).
+
+This guide walks you through calculating a new origin for images (the center in this case) and using that to determine to draw and rotate your sprite from.
+
+### End result
+
+
+
+## Drawing a Rotated Sprite
+
+1. Follow the procedures of [Drawing a Sprite](HowTo_Draw_A_Sprite.md).
+
+2. Determine the screen location of the sprite, and the point within the texture that will serve as the origin.
+ By default, the origin of a texture is (0,0), the upper-left corner. When you draw a sprite, the origin point in the texture is placed on the screen coordinate specified by the `spritePosition` parameter (from the top-left hand corner of the screen). In this example, the origin has been calculated as the center of the texture, and the screen position is the center of the screen.
+
+ Add the following properties and update your [Game.LoadContent](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_LoadContent) method as follows:
+
+ ```csharp
+ private Texture2D spriteTexture;
+ private Vector2 spritePosition;
+ private Vector2 spriteOrigin;
+ protected override void LoadContent()
+ {
+ // Create a new SpriteBatch, which can be used to draw textures.
+ spriteBatch = new SpriteBatch(GraphicsDevice);
+ spriteTexture = Content.Load("Character");
+
+ // Get the viewport to determine the drawable space on screen.
+ Viewport viewport = _graphics.GraphicsDevice.Viewport;
+
+ // Set the Texture origin to be the center of the texture.
+ spriteOrigin.X = spriteTexture.Width / 2;
+ spriteOrigin.Y = spriteTexture.Height / 2;
+
+ // Set the position of the texture to be the center of the screen.
+ spritePosition.X = viewport.Width / 2;
+ spritePosition.Y = viewport.Height / 2;
+ }
+ ```
+
+3. In your [Game.Update](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Update_Microsoft_Xna_Framework_GameTime_) method, determine the rotation angle to use for the sprite.
+
+ The angle is specified in radians, and it can be greater than two times `π`, but does not need to be.
+
+ ```csharp
+ // The angle at which to rotate and draw the sprite at
+ private float rotationAngle;
+
+ protected override void Update(GameTime gameTime)
+ {
+ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
+ Exit();
+
+ // The time since Update was called last.
+ float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
+
+ // TODO: Add your game logic here.
+ // Simple roation logic to rotate the sprite in a clockwise direction over time
+ rotationAngle += elapsed;
+ float circle = MathHelper.Pi * 2;
+ rotationAngle %= circle;
+
+ base.Update(gameTime);
+ }
+ ```
+
+4. In your [Game.Draw](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Draw_Microsoft_Xna_Framework_GameTime_) method, call [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_) with the `texture`, `angle`, `screen position`, and `origin` of the texture.
+
+ > We do not need to specify a value for the `sourceRectangle` in this instance, so it is set to `null`. This is used to only draw a section of a texture, to see this in action check the [How to animate a sprite](HowTo_Animate_Sprite.md) guide.
+
+ ```csharp
+ protected override void Draw(GameTime gameTime)
+ {
+ GraphicsDevice.Clear(Color.CornflowerBlue);
+
+ // TODO: Add your drawing code here
+ _spriteBatch.Begin();
+ // Draw call updated to use a different overload with additional parameters, specifically the "Rotation angle" and "Origin".
+ _spriteBatch.Draw(spriteTexture, spritePosition, null, Color.White, rotationAngle,
+ spriteOrigin, 1.0f, SpriteEffects.None, 0f);
+ _spriteBatch.End();
+
+ base.Draw(gameTime);
+ }
+ ```
+
+5. When all the sprites have been drawn, call [SpriteBatch.End](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_End) on your [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object.
+
+ You should now see a rotating image in the center of the screen, rotating around the center of the image. For fun, just try rotating the image WITHOUT using the sprite's origin and see what happens.
+
+## See Also
+
+- [Drawing a Sprite](HowTo_Draw_A_Sprite.md)
+
+### Concepts
+
+- [What Is a Sprite?](../../whatis/graphics/WhatIs_Sprite.md)
+
+### Reference
+
+- [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch)
+- [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_)
+- [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D)
diff --git a/articles/getting_to_know/howto/graphics/HowTo_Rotate_Sprite_Group.md b/articles/getting_to_know/howto/graphics/HowTo_Rotate_Sprite_Group.md
new file mode 100644
index 00000000..49e1ad82
--- /dev/null
+++ b/articles/getting_to_know/howto/graphics/HowTo_Rotate_Sprite_Group.md
@@ -0,0 +1,150 @@
+---
+title: Rotating a Group of Sprites
+description: Demonstrates how to rotate a group of sprites around a single point.
+requireMSLicense: true
+---
+
+## Overview
+
+Sometimes either an individual character is made up of many sprites/textures, or you simply want to arrange a group of sprites in a grid and have them move as one. The process is simple enough and simply an extension of what is covered in [HowTo Rotate a Sprite](HowTo_Rotate_Sprite.md).
+
+## Drawing a Rotated Group of Sprites
+
+1. Follow the steps of [Drawing a Sprite](HowTo_Draw_A_Sprite.md).
+
+2. Create one array of [Vector2](xref:Microsoft.Xna.Framework.Vector2) variables that represent the un-rotated positions of the sprites and another to hold the rotated values.
+
+ ```csharp
+ private Vector2[] myVectors;
+ private Vector2[] drawVectors;
+ protected override void Initialize()
+ {
+ myVectors = new Vector2[9];
+ drawVectors = new Vector2[9];
+
+ base.Initialize();
+ }
+ ```
+
+3. After loading the sprite, calculate the positions of the un-rotated group of sprites based on the sprite's size.
+
+ ```csharp
+ private Texture2D spriteTexture;
+ private Vector2 spriteOrigin;
+ private Vector2 spritePosition;
+ protected override void LoadContent()
+ {
+ // Create a new SpriteBatch, which can be used to draw textures.
+ _spriteBatch = new SpriteBatch(GraphicsDevice);
+
+ spriteTexture = Content.Load("Character");
+ viewport = _graphics.GraphicsDevice.Viewport;
+ spriteOrigin.X = spriteTexture.Width / 2;
+ spriteOrigin.Y = spriteTexture.Height / 2;
+ spritePosition.X = viewport.Width / 2;
+ spritePosition.Y = viewport.Height / 2;
+
+ // Populate the `myVectors` array with a grid of Vector2 positions for the character to draw. These will then be rotated around the center of the screen.
+ int i = 0;
+ while (i < 9)
+ {
+ for (int x = 0; x < 3; x++)
+ {
+ for (int y = 0; y < 3; y++)
+ {
+ myVectors[i] = new Vector2(x * 200, y * 200); // Assign positions
+ i++;
+ }
+ }
+ }
+ }
+ ```
+
+4. In your [Game.Update](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Update_Microsoft_Xna_Framework_GameTime_) method, copy the un-rotated vectors and determine the screen position around which all the sprites will rotate.
+
+ ```csharp
+ private float rotationAngle = 0f;
+ private Matrix rotationMatrix = Matrix.Identity;
+ protected override void Update(GameTime gameTime)
+ {
+ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
+ Exit();
+
+ // The time since Update was called last.
+ float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
+
+ // TODO: Add your game logic here.
+ rotationAngle += elapsed;
+ float circle = MathHelper.Pi * 2;
+ rotationAngle %= circle;
+
+ // Copy and rotate the sprite positions.
+ drawVectors = (Vector2[])myVectors.Clone();
+
+ RotatePoints(ref spritePosition, rotationAngle, ref drawVectors);
+
+ base.Update(gameTime);
+ }
+ ```
+
+ Transform each vector using a rotation matrix created for the rotation angle.
+
+5. To rotate around the origin, transform each vector relative to the origin by subtracting the origin vector.
+
+6. Add the origin vector to the transformed vector to create the final rotated vector.
+
+ ```csharp
+ private static void RotatePoints(ref Vector2 origin, float radians, ref Vector2[] Vectors)
+ {
+ Matrix myRotationMatrix = Matrix.CreateRotationZ(radians);
+
+ for (int i = 0; i < 9; i++)
+ {
+ // Rotate relative to origin.
+ Vector2 rotatedVector =
+ Vector2.Transform(Vectors[i] - origin, myRotationMatrix);
+
+ // Add origin to get final location.
+ Vectors[i] = rotatedVector + origin;
+ }
+ }
+ ```
+
+7. Draw each sprite using the rotated vectors as screen locations.
+
+ ```csharp
+ protected override void Draw(GameTime gameTime)
+ {
+ GraphicsDevice.Clear(Color.CornflowerBlue);
+
+ // TODO: Add your drawing code here
+ _spriteBatch.Begin();
+ for (int i = 0; i < drawVectors.Length; i++)
+ {
+ _spriteBatch.Draw(spriteTexture, drawVectors[i], null,
+ Color.White, rotationAngle, spriteOrigin, 1.0f,
+ SpriteEffects.None, 0f);
+ }
+ _spriteBatch.End();
+
+ base.Draw(gameTime);
+ }
+ ```
+
+8. When all the sprites have been drawn, call [SpriteBatch.End](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_End).
+
+ This results in the Grid of characters that are drawn being rotated `Together` around a position in the center of the screen, instead of each sprite rotating individually.
+
+## See Also
+
+- [Drawing a Sprite](HowTo_Draw_A_Sprite.md)
+
+### Concepts
+
+- [What Is a Sprite?](../../whatis/graphics/WhatIs_Sprite.md)
+
+### Reference
+
+- [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch)
+- [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_)
+- [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D)
diff --git a/articles/getting_to_know/howto/graphics/HowTo_Scale_Sprite.md b/articles/getting_to_know/howto/graphics/HowTo_Scale_Sprite.md
new file mode 100644
index 00000000..ef4be791
--- /dev/null
+++ b/articles/getting_to_know/howto/graphics/HowTo_Scale_Sprite.md
@@ -0,0 +1,188 @@
+---
+title: Scaling a Sprite
+description: Demonstrates how to scale a sprite using a uniform scale.
+requireMSLicense: true
+---
+
+## Overview
+
+There are several implementations to apply scaling to 2D sprites / textures, namely:
+
+- Uniform scale using a single float.
+- NonUniform scale using a Vector 2.
+- By specifying the Rectangle drawing dimensions of the output texture.
+
+The examples below detail each of the three methods.
+
+### End result
+
+
+
+## Drawing a Scaled Sprite with a uniform scale
+
+1. Follow the procedures of [Drawing a Sprite](HowTo_Draw_A_Sprite.md).
+
+2. In your **Update** method, determine how your sprite will be scaled.
+
+ The normal size of the sprite is multiplied by the scale specified. For example, a value of 1.0 draws the sprite full size, where 0.5 will draw it half-sized and 2.0 will draw it at twice its original size.
+
+ ```csharp
+ private Vector2 spritePosition = Vector2.Zero;
+ protected float spriteScale = 0f;
+
+ protected override void Update(GameTime gameTime)
+ {
+ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
+ Exit();
+
+ // The time since Update was called last.
+ float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
+
+ // TODO: Add your game logic here.
+ spriteScale += elapsed;
+ spriteScale %= 6;
+
+ base.Update(gameTime);
+ }
+ ```
+
+3. When drawing the sprite, specify the scale of the sprite as a parameter if the [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_System_Nullable_Microsoft_Xna_Framework_Rectangle__Microsoft_Xna_Framework_Color_System_Single_Microsoft_Xna_Framework_Vector2_System_Single_Microsoft_Xna_Framework_Graphics_SpriteEffects_System_Single_) call to draw with a floating-point scale parameter to scale the sprite evenly in both the x and y directions.
+
+ ```csharp
+ protected override void Draw(GameTime gameTime)
+ {
+ GraphicsDevice.Clear(Color.CornflowerBlue);
+
+ // TODO: Add your drawing code here
+ _spriteBatch.Begin();
+ // Updated draw call using the overload that allows passing the "scale" of a sprite
+ _spriteBatch.Draw(spriteTexture, spritePosition, null,
+ Color.White, 0f, Vector2.Zero, spriteScale, SpriteEffects.None, 0f);
+ _spriteBatch.End();
+
+ base.Draw(gameTime);
+ }
+ ```
+
+4. When the sprite has been drawn, call [SpriteBatch.End](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_End) on your [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object.
+
+ You should now see the sprite scaling in from the top-left hand corner of the screen moving outwards, the same in both the X and Y directions. It will keep looping in case you miss it.
+
+### To draw a scaled sprite using a nonuniform scale
+
+Alternatively, instead of using a flat scaling factor using a float, we can instead supply a [Vector2](xref:Microsoft.Xna.Framework.Vector2) value with different scaling values for the X and Y axis, as follows:
+
+1. Follow the procedures of [Drawing a Sprite](HowTo_Draw_A_Sprite.md).
+2. In your **Update** method, determine how your sprite will be scaled along each axis and store those values in a [Vector2](xref:Microsoft.Xna.Framework.Vector2) object.
+
+ ```csharp
+ protected Vector2 nonUniformScale = Vector2.One;
+ protected override void Update(GameTime gameTime)
+ {
+ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
+ Exit();
+
+ // The time since Update was called last.
+ float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
+
+ // TODO: Add your game logic here.
+ float basescale = nonUniformScale.Y;
+ basescale += elapsed;
+ basescale %= 6;
+ nonUniformScale.Y = basescale;
+ nonUniformScale.X = basescale * .8f;
+
+ base.Update(gameTime);
+ }
+ ```
+
+3. When drawing the sprite, specify the scale of the sprite using the [Vector2](xref:Microsoft.Xna.Framework.Vector2) object that you updated earlier.
+
+ Specifying a [Vector2](xref:Microsoft.Xna.Framework.Vector2) scales the sprite independently in both the x and y directions.
+
+ ```csharp
+ protected override void Draw(GameTime gameTime)
+ {
+ GraphicsDevice.Clear(Color.CornflowerBlue);
+
+ // TODO: Add your drawing code here
+ _spriteBatch.Begin();
+ _spriteBatch.Draw(spriteTexture, spritePosition, null,
+ Color.White, 0f, Vector2.Zero, nonUniformScale, SpriteEffects.None, 0f);
+ _spriteBatch.End();
+
+ base.Draw(gameTime);
+ }
+ ```
+
+4. When the sprite has been drawn, call [SpriteBatch.End](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_End) on your [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object.
+
+ You should now see the sprite scaling in from the top-left hand corner again and still moving outwards, however, the X and Y directions move at different rates. It will keep looping in case you miss it.
+
+### To draw a scaled sprite using a destination rectangle
+
+Finally, you can control the scale of a sprite by overriding the area in which it is drawn and control the scale values for both the X and Y axis independently, as shown below:
+
+1. Follow the procedures of [Drawing a Sprite](HowTo_Draw_A_Sprite.md).
+
+2. In your **LoadContent** method, construct a rectangle that defines where on screen the sprite will be drawn.
+
+ This rectangle does not need to be the same shape or size as the original sprite. Each dimension of the sprite is scaled independently to fit the destination rectangle.
+
+ ```csharp
+ protected float spriteScale = 1.0f;
+ protected Rectangle drawingRectangle;
+ private Viewport viewport;
+ protected override void LoadContent()
+ {
+ // Create a new SpriteBatch, which can be used to draw textures.
+ _spriteBatch = new SpriteBatch(GraphicsDevice);
+
+ spriteTexture = Content.Load("Character");
+
+ // Get the viewport (window) dimensions
+ viewport = _graphics.GraphicsDevice.Viewport;
+
+ // Set the sprite drawing area from the Viewport origin (0,0) to 80% the sprite scale width and 100% of the sprite scale height.
+ drawingRectangle.X = viewport.X;
+ drawingRectangle.Y = viewport.Y;
+ drawingRectangle.Width = (int)spriteScale * 100;
+ drawingRectangle.Height = (int)spriteScale * 80;
+ }
+ ```
+
+3. When drawing the sprite, specify the destination rectangle as a parameter to [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_).
+
+ The sprite will be drawn, filling the destination rectangle.
+
+ ```csharp
+ protected override void Draw(GameTime gameTime)
+ {
+ GraphicsDevice.Clear(Color.CornflowerBlue);
+
+ // TODO: Add your drawing code here
+ _spriteBatch.Begin();
+ _spriteBatch.Draw(spriteTexture, drawingRectangle, Color.White);
+ _spriteBatch.End();
+
+ base.Draw(gameTime);
+ }
+ ```
+
+4. When the sprite has been drawn, call [SpriteBatch.End](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_End) on your [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object.
+
+ You should now see the sprite in the top-left hand corner of the screen in a kind of squished style, feel free to play with the values for the `drawingRectangle` to draw the sprite at different scales.
+
+## See Also
+
+- [Drawing a Sprite](HowTo_Draw_A_Sprite.md)
+
+### Concepts
+
+- [What Is a Sprite?](../../whatis/graphics/WhatIs_Sprite.md)
+
+### Reference
+
+- [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch)
+- [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_)
+- [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D)
diff --git a/articles/getting_to_know/howto/graphics/HowTo_Scale_Sprites_Matrix.md b/articles/getting_to_know/howto/graphics/HowTo_Scale_Sprites_Matrix.md
new file mode 100644
index 00000000..ad38bf2b
--- /dev/null
+++ b/articles/getting_to_know/howto/graphics/HowTo_Scale_Sprites_Matrix.md
@@ -0,0 +1,171 @@
+---
+title: Scaling Sprites Based On Screen Size
+description: Demonstrates how to scale sprites using a matrix that is created based on the viewport width.
+requireMSLicense: true
+---
+
+## Overview
+
+Ensuring that the textures you draw to the screen are always scaled the same regardless of screen resolution is key, especially when targeting so many different devices with varying screen sizes. The key to handling this is to generate a scaling matrix based on your "designed" screen size and then applying that to the `SpriteBatch` calls you make when drawing to the screen. This is crucial for Screen UI / UX for example.
+
+To demonstrate this, we will design a view in a default resolution of `800 x 600` and define a scaling matrix that works on the same ratio.
+
+> [!NOTE]
+> If you intend to work with multiple different scaling resolutions, you will need to define different scaling matrix's appropriately, if you allow the user to redefine what resolution the game runs in.
+
+## Scaling Sprites Based on Screen Size
+
+1. Set the [PreferredBackBufferHeight](xref:Microsoft.Xna.Framework.GraphicsDeviceManager.PreferredBackBufferHeight) and [PreferredBackBufferWidth](xref:Microsoft.Xna.Framework.GraphicsDeviceManager.PreferredBackBufferWidth) properties of [GraphicsDeviceManager](xref:Microsoft.Xna.Framework.GraphicsDeviceManager) in the `Game` constructor to set the default screen size of your game.
+
+ ```csharp
+ public Game1()
+ {
+ _graphics = new GraphicsDeviceManager(this)
+ {
+ PreferredBackBufferHeight = 600,
+ PreferredBackBufferWidth = 800
+ };
+ Content.RootDirectory = "Content";
+ IsMouseVisible = true;
+ }
+ ```
+
+2. Set up some variables to hold the debug textures we will draw, and then in your [Game.LoadContent](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_LoadContent) method, initialize them:
+
+ ```csharp
+ private Viewport viewport;
+ private Vector2[] scalingSpritePositions;
+ private Texture2D squareTexture;
+ private Vector2 spriteOrigin;
+ private Matrix spriteScaleMatrix;
+ protected override void LoadContent()
+ {
+ // Create a new SpriteBatch, which can be used to draw textures.
+ _spriteBatch = new SpriteBatch(GraphicsDevice);
+
+ viewport = _graphics.GraphicsDevice.Viewport;
+ squareTexture = CreateTexture(GraphicsDevice, 50, 50);
+ spriteOrigin = new Vector2(squareTexture.Width / 2, squareTexture.Height / 2);
+
+ scalingSpritePositions = new Vector2[4];
+ scalingSpritePositions[0] = new Vector2(25, 25);
+ scalingSpritePositions[1] = new Vector2(25, viewport.Height - 25);
+ scalingSpritePositions[2] = new Vector2(viewport.Width - 25, 25);
+ scalingSpritePositions[3] = new Vector2(viewport.Width - 25, viewport.Height - 25);
+
+ UpdateScaleMatrix();
+
+ base.LoadContent();
+ }
+ ```
+
+3. To help make the debug texture `squareTexture` easier, we add a little helper function to just generate the texture rather than import it through the Content Pipeline, as follows:
+
+ ```csharp
+ public static Texture2D CreateTexture(GraphicsDevice device, int width, int height)
+ {
+ // Initialize a texture
+ Texture2D texture = new Texture2D(device, width, height);
+
+ // The array holds the color for each pixel in the texture
+ Color[] data = new Color[width * height];
+ for (int pixel = 0; pixel < data.Length; pixel++)
+ {
+ data[pixel] = Color.White;
+ }
+
+ // Set the color
+ texture.SetData(data);
+ return texture;
+ }
+ ```
+
+ > [!NOTE]
+ > This is a really handy reusable function to create simple textures at runtime.
+
+4. Next, we create another method to calculate the Scaling Matrix using [Matrix.CreateScale](xref:Microsoft.Xna.Framework.Matrix#Microsoft_Xna_Framework_Matrix_CreateScale_System_Single_) based on the current Graphics Device's resolution, using our original `800x600` as a reference scale.
+
+ This matrix should be recreated any time the resolution of the [GraphicsDevice](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice) changes.
+
+ > [!NOTE]
+ > Because you are scaling sprites, you should use only the x and y parameters to create the scaling matrix. Scaling the depth of sprites can result in their depth shifting above 1.0. If that happens, they will not render.
+
+ ```csharp
+ private void UpdateScaleMatrix()
+ {
+ // Default resolution is 800x600; scale sprites up or down based on
+ // current viewport
+ float screenScale = _graphics.GraphicsDevice.Viewport.Width / 800f;
+ // Create the scale transform for Draw.
+ // Do not scale the sprite depth (Z=1).
+ spriteScaleMatrix = Matrix.CreateScale(screenScale, screenScale, 1);
+ }
+ ```
+
+5. To allow you to quickly change the current resolution, in your [Game.Update](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Update_Microsoft_Xna_Framework_GameTime_) method add the following.
+
+ This example uses the `A` and `B` keys to switch between two resolutions.
+
+ ```csharp
+ protected override void Update(GameTime gameTime)
+ {
+ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
+ Exit();
+
+ if (Keyboard.GetState().IsKeyDown(Keys.A))
+ {
+ _graphics.PreferredBackBufferHeight = 768;
+ _graphics.PreferredBackBufferWidth = 1024;
+ _graphics.ApplyChanges();
+ UpdateScaleMatrix();
+ }
+ if (Keyboard.GetState().IsKeyDown(Keys.B))
+ {
+ _graphics.PreferredBackBufferHeight = 600;
+ _graphics.PreferredBackBufferWidth = 800;
+ _graphics.ApplyChanges();
+ UpdateScaleMatrix();
+ }
+ base.Update(gameTime);
+ }
+ ```
+
+6. In your [Game.Draw](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Draw_Microsoft_Xna_Framework_GameTime_) method, call [SpriteBatch.Begin](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Begin_Microsoft_Xna_Framework_Graphics_SpriteSortMode_Microsoft_Xna_Framework_Graphics_BlendState_Microsoft_Xna_Framework_Graphics_SamplerState_Microsoft_Xna_Framework_Graphics_DepthStencilState_Microsoft_Xna_Framework_Graphics_RasterizerState_Microsoft_Xna_Framework_Graphics_Effect_System_Nullable_Microsoft_Xna_Framework_Matrix__), passing the scaling matrix created in [Game.LoadContent](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_LoadContent).
+
+7. Finally, draw your scene normally, then call [SpriteBatch.End](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_End).
+
+ All of the sprites you draw will be scaled according to the matrix.
+
+ ```csharp
+ protected override void Draw(GameTime gameTime)
+ {
+ GraphicsDevice.Clear(Color.CornflowerBlue);
+
+ // Initialize the batch with the scaling matrix
+ _spriteBatch.Begin(transformMatrix: spriteScaleMatrix);
+ // Draw a sprite at each corner
+ for (int i = 0; i < scalingSpritePositions.Length; i++)
+ {
+ _spriteBatch.Draw(squareTexture, scalingSpritePositions[i], null, Color.White,
+ 0f, spriteOrigin, 1f, SpriteEffects.None, 0f);
+ }
+ _spriteBatch.End();
+
+ base.Draw(gameTime);
+ }
+ ```
+
+## See Also
+
+- [Drawing a Sprite](HowTo_Draw_A_Sprite.md)
+
+### Concepts
+
+- [What Is a Sprite?](../../whatis/graphics/WhatIs_Sprite.md)
+
+### Reference
+
+- [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch)
+- [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_)
+- [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D)
+- [Matrix.CreateScale](xref:Microsoft.Xna.Framework.Matrix#Microsoft_Xna_Framework_Matrix_CreateScale_System_Single_)
diff --git a/articles/getting_to_know/howto/graphics/HowTo_Tint_Sprite.md b/articles/getting_to_know/howto/graphics/HowTo_Tint_Sprite.md
new file mode 100644
index 00000000..792241fe
--- /dev/null
+++ b/articles/getting_to_know/howto/graphics/HowTo_Tint_Sprite.md
@@ -0,0 +1,75 @@
+---
+title: Tinting a Sprite
+description: Demonstrates how to tint a sprite using a Color value.
+requireMSLicense: true
+---
+
+## Overview
+
+Tinting sprites is an easy way to either animate a sprite (when it takes damage) or even to create different characters of different colors. It is quick and efficient to do and all you need is the color to tine with and a single change to your `SpriteBatch` draw call.
+
+### End result
+
+
+
+## Drawing a Tinted Sprite
+
+1. Follow the procedures of [Drawing a Sprite](HowTo_Draw_A_Sprite.md).
+2. In the [Game.Update](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Update_Microsoft_Xna_Framework_GameTime_) method, determine the color to tint the sprite.
+
+ In this example, the position of the mouse determines the Red, Green, values to apply to the sprite, the blue is fixed for simplicity.
+
+ ```csharp
+ // The color tint to apply to the sprite
+ protected Color tint;
+
+ protected override void Update(GameTime gameTime)
+ {
+ if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
+ Exit();
+
+ // TODO: Add your update logic here
+ MouseState mouse = Mouse.GetState();
+ tint = new Color(mouse.X % 255, mouse.Y % 255, 255);
+
+ base.Update(gameTime);
+ }
+ ```
+
+3. In the [Game.Draw](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Draw_Microsoft_Xna_Framework_GameTime_) method, pass the color value created in [Game.Update](xref:Microsoft.Xna.Framework.Game#Microsoft_Xna_Framework_Game_Update_Microsoft_Xna_Framework_GameTime_) to [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_).
+
+ ```csharp
+ protected override void Draw(GameTime gameTime)
+ {
+ GraphicsDevice.Clear(Color.CornflowerBlue);
+
+ // TODO: Add your drawing code here
+ _spriteBatch.Begin();
+ // Note the final argument in the Draw call is changed from Color.White to the new "tint" property
+ _spriteBatch.Draw(spriteTexture, spritePosition, tint);
+ _spriteBatch.End();
+
+ base.Draw(gameTime);
+ }
+ ```
+
+4. When all of the sprites have been drawn, call [SpriteBatch.End](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_End) on your [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object.
+
+ Moving the mouse around the screen will change the color of the Tint that is applied to the sprite / texture each frame. Alternatively, try switching the input to something else, or for a challenge, animate the tint to make it look like the character is taking damage.
+
+## See Also
+
+- [Drawing a Sprite](HowTo_Draw_A_Sprite.md)
+
+### Concepts
+
+- [What Is a Sprite?](../../whatis/graphics/WhatIs_Sprite.md)
+
+### Reference
+
+- [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch)
+- [SpriteBatch.Draw](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_)
+- [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D)
+- [Color](xref:Microsoft.Xna.Framework.Color)
+
+(Character by `upklyak` from [FreePik](https://www.freepik.com/free-vector/cartoon-alien-character-animation-sprite-sheet_33397951.htm))
diff --git a/articles/getting_to_know/howto/graphics/images/HowTo_AnimateSprite_Final.gif b/articles/getting_to_know/howto/graphics/images/HowTo_AnimateSprite_Final.gif
new file mode 100644
index 00000000..06d680fd
Binary files /dev/null and b/articles/getting_to_know/howto/graphics/images/HowTo_AnimateSprite_Final.gif differ
diff --git a/articles/getting_to_know/howto/graphics/images/HowTo_DrawSprite_Character.png b/articles/getting_to_know/howto/graphics/images/HowTo_DrawSprite_Character.png
new file mode 100644
index 00000000..f74a5cb4
Binary files /dev/null and b/articles/getting_to_know/howto/graphics/images/HowTo_DrawSprite_Character.png differ
diff --git a/articles/getting_to_know/howto/graphics/images/HowTo_DrawSprite_Final.png b/articles/getting_to_know/howto/graphics/images/HowTo_DrawSprite_Final.png
new file mode 100644
index 00000000..8b1137b8
Binary files /dev/null and b/articles/getting_to_know/howto/graphics/images/HowTo_DrawSprite_Final.png differ
diff --git a/articles/getting_to_know/howto/graphics/images/HowTo_RotateSprite_Final.gif b/articles/getting_to_know/howto/graphics/images/HowTo_RotateSprite_Final.gif
new file mode 100644
index 00000000..85a9e9c3
Binary files /dev/null and b/articles/getting_to_know/howto/graphics/images/HowTo_RotateSprite_Final.gif differ
diff --git a/articles/getting_to_know/howto/graphics/images/HowTo_ScaleSprite_Final.gif b/articles/getting_to_know/howto/graphics/images/HowTo_ScaleSprite_Final.gif
new file mode 100644
index 00000000..e0f181a6
Binary files /dev/null and b/articles/getting_to_know/howto/graphics/images/HowTo_ScaleSprite_Final.gif differ
diff --git a/articles/getting_to_know/howto/graphics/images/HowTo_SpriteAnimate_Spritesheet.PNG b/articles/getting_to_know/howto/graphics/images/HowTo_SpriteAnimate_Spritesheet.PNG
new file mode 100644
index 00000000..899c76d8
Binary files /dev/null and b/articles/getting_to_know/howto/graphics/images/HowTo_SpriteAnimate_Spritesheet.PNG differ
diff --git a/articles/getting_to_know/howto/graphics/images/HowTo_TintSprite_Final.png b/articles/getting_to_know/howto/graphics/images/HowTo_TintSprite_Final.png
new file mode 100644
index 00000000..80e75c5e
Binary files /dev/null and b/articles/getting_to_know/howto/graphics/images/HowTo_TintSprite_Final.png differ
diff --git a/articles/getting_to_know/whatis/graphics/WhatIs_Sprite.md b/articles/getting_to_know/whatis/graphics/WhatIs_Sprite.md
new file mode 100644
index 00000000..7b167061
--- /dev/null
+++ b/articles/getting_to_know/whatis/graphics/WhatIs_Sprite.md
@@ -0,0 +1,100 @@
+---
+title: What Is a Sprite?
+description: The definition for Sprites in MonoGame!
+requireMSLicense: true
+---
+
+Sprites are 2D bitmaps that are drawn directly to a render target without using the pipeline for transformations, lighting or effects. Sprites are commonly used to display information such as health bars, number of lives, or text such as scores. Some games, especially older games, are composed entirely of sprites.
+
+* [Overview](#overview)
+* [Sprite Origin](#sprite-origin)
+* [Sprite Depth](#sprite-depth)
+* [Sampling Textures](#sampling-textures)
+* [Sprite Scaling](#sprite-scaling)
+* [Sprite Transformation Matrices](#sprite-transformation-matrices)
+* [Sprite Fonts](#sprite-fonts)
+* [Sprite Batching](#sprite-batching)
+
+## Overview
+
+Sprites are positioned on the screen by coordinates. The width and height of the screen is the same as the back buffer. The x-axis represents the screen width and the y-axis represents the screen height. The y-axis is measured from the top of the screen and increases as you move **down** the screen, and the x-axis is measured from left to right. For example, when the graphics back buffer is 800×600, 0,0 is the upper left of the screen, and 800,600 is the lower right of the screen.
+
+To draw a sprite, create a [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object, initialize it by calling [Begin](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Begin_Microsoft_Xna_Framework_Graphics_SpriteSortMode_Microsoft_Xna_Framework_Graphics_BlendState_Microsoft_Xna_Framework_Graphics_SamplerState_Microsoft_Xna_Framework_Graphics_DepthStencilState_Microsoft_Xna_Framework_Graphics_RasterizerState_Microsoft_Xna_Framework_Graphics_Effect_System_Nullable_Microsoft_Xna_Framework_Matrix__), and then call [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) for each sprite. The bitmap data for a sprite is taken from a [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D) object. The texture may contain alpha channel information to make part of the texture transparent or semi-transparent. You can tint, rotate, or scale sprites by using [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_). This method also gives you the option of drawing only part of the texture on the screen. After you draw a sprite, call [End](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_End) before calling [Present](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice.Present).
+
+## Sprite Origin
+
+When you draw a sprite, the sprite `origin` is an important concept. The origin is a specific point on the sprite, which is by default the upper-left corner of the sprite, or **(0,0)**. [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) draws the origin of the sprite at the screen location you specify. For example, if you draw a 50×50 pixel sprite at location (400,200) without specifying an origin, the upper left of the sprite will be on pixel (400,200). If you use the center of the 50×50 sprite as the origin (25,25), to draw the sprite in the same position you must add the origin coordinates to the position. In this case, the position is (425,225) and the origin is (25,25).
+
+When rotating a sprite, the method uses the origin as the center of the rotation. In these cases, it is common to use the center of the sprite as the origin when calculating where to draw the sprite on the screen.
+
+> [!NOTE]
+> Meaning that by default, a sprite will rotate around the "top-left" hand corner of the image when you rotate it. See [HowTo Rotate a Sprite](../../howto/graphics/HowTo_Rotate_Sprite.md) for details on how to compensate for this and rotate by an images center.
+
+## Sprite Depth
+
+Sprites also have a concept of `depth` which is a floating-point number between **0** and **1**. Sprites drawn at a depth of 0 are drawn in front of sprites which have a depth of greater than 0; sprites drawn at a depth of 1 are covered by sprites drawn at a depth less than 1.
+
+## Sampling Textures
+
+A sprite is based on a [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D) object—in other words, a bitmap. Use [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) to draw the entire texture or a portion of the texture. To draw a portion of the texture, use the **sourceRectangle** parameter to specify which `texels_, or texture pixel, to draw. A 32×32 texture has 1024 texels, specified as x and y values similar to how screen coordinates are specified. Specifying a **sourceRectangle** of (0, 0, 16, 16) would select the upper-left quadrant of a 32×32 texture.
+
+## Sprite Scaling
+
+[Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) provides three options for scaling a sprite: using a uniform scaling parameter, a nonuniform scaling parameter, or a source and destination rectangle. The uniform scaling parameter is a floating-point number that multiplies the sprite size through both the x- and y-axes. This will shrink or expand the sprite along each axis equally, maintaining the original ratio between the sprite width and height.
+
+To scale the x- and y-axes independently, [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) accepts a [Vector2](xref:Microsoft.Xna.Framework.Vector2) value as a scalar. This [Vector2](xref:Microsoft.Xna.Framework.Vector2) specifies nonuniform scaling: x- and y-axes are scaled independently according to the ```X``` and ```Y``` fields of the [Vector2](xref:Microsoft.Xna.Framework.Vector2).
+
+[Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) also accepts a source and destination rectangle. The destination rectangle is specified in screen coordinates, while the source rectangle is specified in texels. [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) takes the pixels on the texture specified in **sourceRectangle** and scales them independently along the x- and y-axes until they fit the screen coordinates specified by **destinationRectangle**.
+
+## Sprite Transformation Matrices
+
+You can also specify a transformation matrix that the batch can apply to each sprite before drawing. The transformation matrix can be any combination of translation, rotation, or scaling matrices multiplied together into a single matrix. This matrix is combined with the sprite position, rotation, scaling, and depth parameters supplied to [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_). Because the matrix also applies to depth, any z-coordinate transformation that makes the sprite depth greater than 1.0 or less than 0.0 will cause the sprite to disappear.
+
+See [Rotating a Group of Sprites](../../howto/graphics/HowTo_Rotate_Sprite_Group.md) for an example of matrix rotation and [Scaling Sprites Based On Screen Size](../../howto/graphics/HowTo_Scale_Sprites_Matrix.md) for an example of matrix scaling.
+
+## Sprite Fonts
+
+Use a [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) to draw text. The [DrawString](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_DrawString_Microsoft_Xna_Framework_Graphics_SpriteFont_System_String_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_) method will draw text on screen with position, color, rotation, origin, and scaling. [DrawString](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_DrawString_Microsoft_Xna_Framework_Graphics_SpriteFont_System_String_Microsoft_Xna_Framework_Vector2_Microsoft_Xna_Framework_Color_) also requires a special type of texture encapsulated by the [SpriteFont](xref:Microsoft.Xna.Framework.Graphics.SpriteFont) class. A [SpriteFont](xref:Microsoft.Xna.Framework.Graphics.SpriteFont) is created by the content pipeline when you add a Sprite Font file to your project. The sprite font file has information such as the name and point size of the font, and which Unicode characters to include in the [SpriteFont](xref:Microsoft.Xna.Framework.Graphics.SpriteFont) texture. At run time, a [SpriteFont](xref:Microsoft.Xna.Framework.Graphics.SpriteFont) is loaded with [ContentManager.Load](/api/Microsoft.Xna.Framework.Content.ContentManager.html#Microsoft_Xna_Framework_Content_ContentManager_Load__1_System_String_) just like a [Texture2D](xref:Microsoft.Xna.Framework.Graphics.Texture2D) object.
+
+See [Sprite Font XML Schema Reference](../content_pipeline/CP_SpriteFontSchema.md) for a list of Sprite Font tags. You can use the content pipeline to determine your character regions automatically. For more information, see [How to: Extend the Font Description Processor to Support Additional Characters](../../howto/content_pipeline/HowTo_Extend_Processor.md).
+
+The following redistributable fonts are installed by XNA Game Studio. For information about redistribution rights, see the text in the end user license agreement.
+
+* Andyb.ttf
+* JingJing.ttf
+* Kooten.ttf
+* Linds.ttf
+* Miramo.ttf
+* Miramob.ttf
+* Moire-Bold.ttf
+* Moire-ExtraBold.ttf
+* Moire-Light.ttf
+* Moire-Regular.ttf
+* MotorwerkOblique.ttf
+* NGO_____.ttf
+* NGOB____.ttf
+* OcraExt.ttf
+* Peric.ttf
+* Pericl.ttf
+* Pesca.ttf
+* Pescab.ttf
+* QuartMS.ttf
+* SegoeKeycaps.ttf
+* Segoepr.ttf
+* Segoeprb.ttf
+* SegoeUIMono-Bold.ttf
+* SegoeUIMono-Regular.ttf
+* Wscsnbd.ttf
+* Wscsnbdit.ttf
+* Wscsnit.ttf
+* Wscsnrg.ttf
+
+## Sprite Batching
+
+In normal drawing, the [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) object does not change any render states or draw any sprites until you call [End](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_End). This is known as `Deferred` mode. In Deferred mode, [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) saves the information from each [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) call until you call [End](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_End).
+
+If you call [Begin](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Begin_Microsoft_Xna_Framework_Graphics_SpriteSortMode_Microsoft_Xna_Framework_Graphics_BlendState_Microsoft_Xna_Framework_Graphics_SamplerState_Microsoft_Xna_Framework_Graphics_DepthStencilState_Microsoft_Xna_Framework_Graphics_RasterizerState_Microsoft_Xna_Framework_Graphics_Effect_System_Nullable_Microsoft_Xna_Framework_Matrix__), specifying ```SpriteSortMode.Immediate```, it triggers `Immediate` mode. In Immediate mode, the [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) immediately changes the graphics device render states to begin drawing sprites. Thereafter, each call to [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) immediately draws the sprite using the current device settings.
+
+In Immediate mode, once you call [Begin](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Begin_Microsoft_Xna_Framework_Graphics_SpriteSortMode_Microsoft_Xna_Framework_Graphics_BlendState_Microsoft_Xna_Framework_Graphics_SamplerState_Microsoft_Xna_Framework_Graphics_DepthStencilState_Microsoft_Xna_Framework_Graphics_RasterizerState_Microsoft_Xna_Framework_Graphics_Effect_System_Nullable_Microsoft_Xna_Framework_Matrix__) on one [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) instance, do not call it on any other [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) instance until you call [End](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_End) for the first [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch).
+
+Deferred mode is slower than Immediate mode, but it allows multiple instances of [SpriteBatch](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch) to accept [Begin](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Begin_Microsoft_Xna_Framework_Graphics_SpriteSortMode_Microsoft_Xna_Framework_Graphics_BlendState_Microsoft_Xna_Framework_Graphics_SamplerState_Microsoft_Xna_Framework_Graphics_DepthStencilState_Microsoft_Xna_Framework_Graphics_RasterizerState_Microsoft_Xna_Framework_Graphics_Effect_System_Nullable_Microsoft_Xna_Framework_Matrix__) and [Draw](/api/Microsoft.Xna.Framework.Graphics.SpriteBatch.html#Microsoft_Xna_Framework_Graphics_SpriteBatch_Draw_Microsoft_Xna_Framework_Graphics_Texture2D_Microsoft_Xna_Framework_Rectangle_Microsoft_Xna_Framework_Color_) calls without interfering with each other.
diff --git a/articles/getting_to_know/whatis/graphics/index.md b/articles/getting_to_know/whatis/graphics/index.md
index d931c64e..d526f079 100644
--- a/articles/getting_to_know/whatis/graphics/index.md
+++ b/articles/getting_to_know/whatis/graphics/index.md
@@ -4,4 +4,22 @@ description: The basics of the graphics architecture for MonoGame!
requireMSLicense: true
---
-## Coming soon
\ No newline at end of file
+## Graphical basics 101
+
+The topics in this section describe the graphical conventions used by MonoGame in rendering and managing content on a screen.
+
+### 2D concetps
+
+* [What Is Sprite?](WhatIs_Sprite.md)
+
+ Sprites are 2D bitmaps that are drawn directly to a render target without using the pipeline for transformations, lighting or effects. Sprites are commonly used to display information such as health bars, number of lives, or text such as scores. Some games, especially older games, are composed entirely of sprites.
+
+> More Coming soon
+
+### 3D concepts
+
+> Coming soon
+
+### Other Graphical concepts
+
+> Coming soon
\ No newline at end of file