# Ellipse ## Ellipse The **Ellipse** in **Incari** provides similar functionality as its equivalent in *Figma*. ![Ellipse.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-04e1df6982f90977cf92bb05f7e62151ce2944c3%2Fellipse2d20241.png?alt=media) There are several **Attributes** which allow the user heightened customizability and control. * [**Object**](#object) * [**Transformation**](#transformation) * [**Fill**](#fill) * [**Stroke**](#stroke) * [**Effects**](#effects) * [**Ellipse**](#ellipse) * [**Mask**](#mask) * [**Tag**](#tag) ## Attributes ### Object ![Blend Mode.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-dcbb66f1288195078227dc2b05a814fac629ebf4%2Fobjectattsscene2dblendmode.png?alt=media) Besides `Name`, `Type`, and `Opacity`, which appear for every **Object** in **Incari**, the `Object` **Attributes** include `Blend Mode`. This **Attribute** lets the user set a `Blend Mode` as a base property of the **Ellipse**. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). An **Object's** `Blend Mode` can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). ### Transformation ![Transformation Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-2c61d9a83c0cb34306d8df159bfa7da93c0f0bd8%2Fbuttonattstransformation.png?alt=media) The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](https://docs.incari.com/incari-studio/2024.1/objects-and-types/attributes/common-attributes/transformation). ### Fill The `Fill` **Attributes** consist of different items called `Elements`. Each `Element` contains a `Type`. This can be either `Solid`, `Gradient`, `Image`, or `Video` and changes some of the available **Attributes** under this category. If there is more than one `Fill Element`, the most recent one will take precedent over the others (unless some `Blend Mode` is applied). #### Solid ![Fill Attributes with Type Solid.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-50708bd3bff5b5fea6140772a60d9a86f8f3fd1a%2Fbooleanoperationfill20232.png?alt=media) When `Solid` is selected, `Color` is visible. * `Color` is a color selector that lets the user pick the `Fill's` color. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. Please note that when a new `Fill` is added, it is added to the top of the *fill* list and the **Object** will be updated to display this `Fill`. #### Gradient ![Fill Attributes with Type Gradient.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-8670cea436f587eb6f0913181e2ada4763315a28%2Ffillattributesgradient.png?alt=media) When `Gradient` is selected, `Gradient` is visible. * `Gradient` decides the style of gradient, which can be either `Linear`, `Radial`, `Angular`, or `Diamond`. * The `Gradient` color selector has a row of squares going left to right as well as a column going top to bottom. These correspond 1:1 with each other, so in the image above the mustard yellow squares are the same color. The user can drag the squares in the row to change the order of the gradient's colors. Clicking anywhere in the bar will add a square in both the row and column of colors. The user can change the color of a square by clicking it, which opens the color picker. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. #### Image ![Fill Attributes with Type Image.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-740546c12bdb08d58c7df56323b76bab3260f679%2Ffigmafillimageatts.png?alt=media) When `Image` is selected, `Image` and `Fit Mode` are visible. * `Image` is the desired **Texture** file. * `Fit Mode` determines how the **Texture** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. #### Video ![Fill Attributes with Type Video.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-7fa381c4988c0bfa73b71420d0a51abd20bf3d67%2Ffillattributesvideo.png?alt=media) When `Video` is selected, `Video` and `Fit Mode` are visible. * `Video` is the desired **Video** file. * `Fit Mode` determines how the **Video** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Below `Fit Mode` are three options: `Play`, `Pause`, and `Stop`. `Play` starts the video in the **Scene2D**, `Pause` halts it at the frame it is currently on, and `Stop` halts it and resets it to the beginning. * `Loop` is a *Bool* that when toggled on, makes the video repeat itself once it finishes. This is continous. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. When `Video` is selected, a new **Attibute** appears in a new **Attribute** section called `Video`. ![Video Preload Attribute.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-cf9c0c8a153ae90740d40e636c31878614f34d4f%2Fvideopreloadatt20241.png?alt=media) This is `Preload`, which is a **Bool**. When enabled, memory is used on **Project** initializaton and there will be no delay on first play. When disabled, less memory will be used and there will be a small delay on first play. #### Lottie ![Fill Attributes with Type Lottie.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-51f5911d4769620dd17d2e81e3c6b9aa89d0da88%2Flottiefillfigma.png?alt=media) When `Lottie` is selected, `Lottie` and `Fit Mode` are visible. * `Lottie` is the desired **Lottie** file. * `Fit Mode` determines how the **Lottie** file is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Below `Fit Mode` are three options: `Play`, `Pause`, and `Stop`. `Play` starts the **Lottie** in the **Scene2D**, `Pause` halts it at the frame it is currently on, and `Stop` halts it and resets it to the beginning. * `Loop` is a *Bool* that when toggled on, makes the **Lottie** repeat itself once it finishes. This is continous. * Similar to the base property described previously, `Blend Mode` here affects the `Fill Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. ### Stroke The `Stroke` **Attributes** consist of different items called `Elements`. Each `Element` contains a `Type`. This can be either `Solid` or `Image` and changes some of the available **Attributes** under this category. There are also two fixed **Attributes** outside of the `Elements`. These are: * `Width`, which is how wide (in pixels) each `Stroke` will appear. This applies to each `Stroke Element`. * `Position`, which determines what part of the outline identifies the outside of the **Object**. For example, if `Inner` is selected, then the outside of the `Stroke` is the outside of the **Object**. If `Center` is selected, then the `Stroke's` center is the outside of the **Object**. If `Outer` is selected, then the inside of the `Stroke` is the outside of the **Object**. #### Solid ![Stroke Attributes with Type Solid.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-07da3627c47128c9249c2895730d086764b4c07e%2Fbooleanoperationstroke20232.png?alt=media) When `Solid` is selected, `Color` is visible. * `Color` is a color selector that lets the user pick the `Stroke's` color. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Stroke` appears. This is represented by an integer between 0 and 1. #### Gradient ![Stroke Attributes with Type Gradient.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-c64f039f70291326b8ff87fdbfcbdaa1e60398dd%2Fstrokeattributegradient.png?alt=media) When `Gradient` is selected, `Gradient` is visible. * `Gradient` decides the style of gradient, which can be either `Linear`, `Radial`, `Angular`, or `Diamond`. * The `Gradient` color selector has a row of squares going left to right as well as a column going top to bottom. These correspond 1:1 with each other, so in the image above the mustard yellow squares are the same color. The user can drag the squares in the row to change the order of the gradient's colors. Clicking anywhere in the bar will add a square in both the row and column of colors. The user can change the color of a square by clicking it, which opens the color picker. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Stroke` appears. This is represented by an integer between 0 and 1. #### Image ![Stroke Attributes with Type Image.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-be82531f390672f345f57298dc20515cc48acfea%2Ffigmastrokeimage.png?alt=media) When `Image` is selected, `Image` and `Fit Mode` are visible. * `Image` is the desired **Texture** file. * `Fit Mode` determines how the **Texture** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Fill` appears. This is represented by an integer between 0 and 1. #### Video ![Stroke Attributes with Type Video.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-4b81098aa6ee5460652fea17d61663b5571f2dd9%2Fstrokeattributesvideo.png?alt=media) When `Video` is selected, `Video` and `Fit Mode` are visible. * `Video` is the desired **Video** file. * `Fit Mode` determines how the **Video** is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Below `Fit Mode` are three options: `Play`, `Pause`, and `Stop`. `Play` starts the video in the **Scene2D**, `Pause` halts it at the frame it is currently on, and `Stop` halts it and resets it to the beginning. * `Loop` is a *Bool* that when toggled on, makes the video repeat itself once it finishes. This is continous. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Stroke` appears. This is represented by an integer between 0 and 1. When `Video` is selected, a new **Attibute** appears in a new **Attribute** section called `Video`. ![Video Preload Attribute.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-cf9c0c8a153ae90740d40e636c31878614f34d4f%2Fvideopreloadatt20241.png?alt=media) This is `Preload`, which is a **Bool**. When enabled, memory is used on **Project** initializaton and there will be no delay on first play. When disabled, less memory will be used and there will be a small delay on first play. #### Lottie ![Stroke Attributes with Type Lottie.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-b9eeaccb1cb2153cdfbdf12928cbf86eefbdfbf2%2Fstrokelottiefigma.png?alt=media) When `Lottie` is selected, `Lottie` and `Fit Mode` are visible. * `Lottie` is the desired **Lottie** file. * `Fit Mode` determines how the **Lottie** file is displayed. These can be `Fill`, `Fit`, `Crop`, and `Tile`. `Tile` has the additional **Attribute** of `Scale Factor`, which augments the tesselation. * Below `Fit Mode` are three options: `Play`, `Pause`, and `Stop`. `Play` starts the **Lottie** in the **Scene2D**, `Pause` halts it at the frame it is currently on, and `Stop` halts it and resets it to the beginning. * `Loop` is a *Bool* that when toggled on, makes the **Lottie** repeat itself once it finishes. This is continous. * Similar to the base property described previously, `Blend Mode` here affects the `Stroke Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). * `Opacity` refers to how opaque or transparent the `Stroke` appears. This is represented by an integer between 0 and 1. ### Effects The `Effects` **Attribute** consists of different items called `Elements`. Each `Element` contains a `Type`. These are `Drop Shadow`, `Inner Shadow`, `Layer Blur`, and `Background Blur`. The available **Attributes** are described below: #### Drop Shadow and Inner Shadow ![Effect Attributes with Drop Shadow Selected.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-40a8ec7c3c0f1bb8dd716ded87384047c7584f74%2Ffigmaeffectsatts.png?alt=media) There are two *shadow* `Types`. `Drop Shadow` adds a *shadow* behind the **Object**. `Inner Shadow` adds a *shadow* within the **Object**. ![Ellipse with a Drop Shadow.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-47c163bb2a9658ace95b77485da00c9326735a65%2Fellipsedropshadow.png?alt=media) ![Ellipse with an Inner Shadow.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-d165dbbadbfa0cce1f5ec0f9757c71271a71e0fc%2Fellipseinnershadow.png?alt=media) * `Offset` sets the location of the *shadow* in relation to the **Object**. * `Blur` modifies the softness of the shadow. When there is no blur, the shadow appears completely solid with rigid lines. When blur is applied, the shadow becomes transfused. * `Spread` inflates or deflates the shadowshape on which the blur is applied. * `Color` changes the color of the shadow. * `Blend Mode` affects the `Effects Elements` only. These are established on common formulas, examples of each can be accessed [here](http://www.simplefilter.de/en/basics/mixmods.html). It can also be set with the [**Set Blend Mode Node**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d/setblendmode). #### Layer Blur and Background Blur ![Effects Attributes with Layer Blur Selected.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-0395090f9737865dead92700fa3f2c6aeefd6a5e%2Ffigmaeffectsattsblur.png?alt=media) There are two *blur* `Types`. `Layer Blur` blurs the **Object** itself and `Background Blur` applies a blur to whatever is directly behind the **Object**. This latter blur type is better seen when the **Object's** opacity or `Fill` opacity has been reduced. ![Ellipse with a Layer Blur.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-a3cb645f845818dea0e16653b836c626ff9ca02e%2Fellipselayerblur.png?alt=media) ![Ellipse with a Background Blur.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-cec72582066ec47b0b2936964cdca1f01147e0b6%2Fellipsebackgroundblur.png?alt=media) * `Blur` increases the severity of the blur effect. ### Ellipse ![Ellipse Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-d76508d98d679d277755f27f94cdbeff25e8637e%2Fellipsenewellipseaats20241.png?alt=media) These **Attributes** give the foundation properties of the **Ellipse Object**. * `Arc Sector` determines the amount of the **Ellipse** visible in degrees, from -360 to 360. For example, if it is set to 360, the entire **Ellipse** shows and if it is set to 180, only half shows. Furthermore, when set to -360, the entire **Ellipse** shows, but in the reverse direction (think counterclockwise). * `Inner Radius` ranges from 0 to 100. If it is set to 0, there is no white space in the center of the **Ellipse** at all. If set to 100, the entire **Ellipse** is replaced by white space. If set to 50, part of the center is white space, creating a 'donut-like' shape. * `Start Angle` ranges from 0 to 360 and determines at which angle the start of the **Ellipse** begins. If `Arc Sector` is set to 100, this will have not have any visual impact. ### Mask A **Mask** is an **Object** that shows a certain area of another **Object** while concealing the rest. Any **Object** (e.g., an **Ellipse**, **Rectangle**, **Frame**, **Group**, or **Text**) can be used as a **Mask**. For easier visualization, think of the **Mask** as a cookie cutter while the masked **Object** is the dough: the cookie cutter shows only a part and discards the rest. ![Mask Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-3522d2bf131b5d03d6f9dff4d1c31b27f52c646f%2Ffigmamaskattsreal.png?alt=media) The `Type` **Attribute** has three options: * `None` - nothing is applied. * `Alpha` - the **Mask** has an opacity level (alpha channel) determining with which level of opacity (or transparency) the masked **Object** is revealed: 0% opacity reveals nothing, 100% opacity is equivalent to a **Mask** with `Vector` type. * `Vector` - only modifies the shape outline of the masked **Object** * `Luminance` - allows the user to utilize brightness to determine the effect of the **Mask**; the brighter the area of a **Mask**, the more that is revealed and the darker the area, the less that is revealed. `Object` allows the user to select what should be the masked **Object**. `Apply Mask` is a toggle that applies the **Mask** when set to on, and disables the **Mask** when set to off. ### Tag ![Tag Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-dc4f375e34ce9bdd2bebc3e93ff34c8680ab55bb%2Fbuttonattstag.png?alt=media) This **Attribute** manages the *tags* for the **Button**. See more on *tags* [here.](https://docs.incari.com/incari-studio/2024.1/objects-and-types/attributes/common-attributes/tag)