Add plot controls (#2)

Clarify plot control + ALT texts

docs/webapp/webapp_exp_track_visual.md

@@ -5,7 +5,7 @@ title: Tracking Experiments and Visualizing Results
 While an experiment is running, and any time after it finishes, track it and visualize the results in the **ClearML Web UI**,
 including:
 
-* [Execution details](#execution-details) - Code, the base Docker image used for **ClearML Agent**, output destination for artifacts, and the logging level.
+* [Execution details](#execution-details) - Code, the base Docker image used for **[ClearML Agent](../clearml_agent.md)**, output destination for artifacts, and the logging level.
 * [Configuration](#configuration) - Hyperparameters, user properties, and configuration objects.
 * [Artifacts](#artifacts) - Input model, output model, model snapshot locations, other artifacts.
 * [General information](#general-information) - Information about the experiment, for example: the experiment start, create, and last update times and dates, user creating the experiment, and its description.
@@ -22,7 +22,7 @@ The **ClearML Web UI** provides two viewing modes for experiment details:
 
 * Full screen details mode.
 
-Both modes contain all experiment details. When either view is open, switch to the other mode by clicking <img src="/docs/latest/icons/ico-info-min.svg" className="icon size-md space-sm" />
+Both modes contain all experiment details. When either view is open, switch to the other mode by clicking <img src="/docs/latest/icons/ico-info-min.svg" alt="Table/Full screen view" className="icon size-md space-sm" />
 (**View in experiments table / full screen**), or clicking <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Bars menu" className="icon size-sm space-sm" /> (**menu**) > **View in experiments
 table / full screen**.
 
@@ -36,7 +36,7 @@ can be performed from the table (as well as the menu in the info panel).
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_40.png)
+![Info panel](../img/webapp_tracking_40.png)
 
 </div>
 </details>
@@ -50,7 +50,7 @@ table is not visible when the full screen details view is open. Perform experime
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_33.png)
+![Full screen view](../img/webapp_tracking_33.png)
 
 </div>
 </details>
@@ -88,7 +88,7 @@ The output details include:
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_18.png)
+![Execution details section](../img/webapp_tracking_18.png)
 
 </div>
 </details>
@@ -100,7 +100,7 @@ The output details include:
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_19.png)
+![Uncomitted changes section](../img/webapp_tracking_19.png)
 
 </div>
 </details>
@@ -111,7 +111,7 @@ The output details include:
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_20.png)
+![Installed packages section](../img/webapp_tracking_20.png)
 
 </div>
 </details>
@@ -137,7 +137,7 @@ The **Args** section shows automatically logged `argparse` arguments, and all ol
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_22.png)
+![Command line arguments configuration section](../img/webapp_tracking_22.png)
 
 </div>
 </details>
@@ -151,7 +151,7 @@ If the `CLEARML_LOG_ENVIRONMENT` variable was set, the **Environment** section w
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_23.png)
+![Environment variables configuration section](../img/webapp_tracking_23.png)
 
 </div>
 </details>
@@ -166,7 +166,7 @@ with a `name` argument provided.
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_25.png)
+![Custom parameters section](../img/webapp_tracking_25.png)
 
 </div>
 </details>
@@ -179,7 +179,7 @@ The **TF_DEFINE** sections shows automatic TensorFlow logging.
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_26.png)
+![TF_DEFINE parameter section](../img/webapp_tracking_26.png)
 
 </div>
 </details>
@@ -195,7 +195,7 @@ except experiments whose status is *Published* (read-only).
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_21.png)
+![User properties section](../img/webapp_tracking_21.png)
 
 </div>
 </details>
@@ -216,7 +216,7 @@ In older versions of **ClearML Server**, the Task model configuration appeared i
 <summary className="cml-expansion-panel-summary">View a screenshot - Configuration objects </summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_24.png)
+![Configuration objects](../img/webapp_tracking_24.png)
 
 </div>
 </details>
@@ -226,14 +226,11 @@ In older versions of **ClearML Server**, the Task model configuration appeared i
 <summary className="cml-expansion-panel-summary">View a screenshot - Custom configuration object</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_28.png)
+![Custom configuration objects](../img/webapp_tracking_28.png)
 
 </div>
 </details>
 
-
-
-
 ## Artifacts
 
 Artifacts tracked in an experiment appear in the **ARTIFACTS** tab, and include models and other artifacts.
@@ -259,7 +256,7 @@ including design, label enumeration, and general information, go to the **MODELS
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_exp_artifacts_01.png)
+![Models in Artifacts tab](../img/webapp_exp_artifacts_01.png)
 
 </div>
 </details>
@@ -284,7 +281,7 @@ Artifacts which are uploaded and dynamically tracked by **ClearML** appear in th
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_29.png)
+![Data audit section](../img/webapp_tracking_29.png)
 
 </div>
 </details>
@@ -297,7 +294,7 @@ Other artifacts, which are uploaded but not dynamically tracked after the upload
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_30.png)
+![Other artifacts section](../img/webapp_tracking_30.png)
 
 </div>
 </details>
@@ -319,7 +316,7 @@ General experiment details appear in the **INFO** tab. This includes information
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_31.png)
+![Info tab](../img/webapp_tracking_31.png)
 
 </div>
 </details>
@@ -341,7 +338,7 @@ is downloadable. To view the end of the log, click **Jump to end**.
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_32.png)
+![Console tab](../img/webapp_tracking_32.png)
 
 </div>
 </details>
@@ -363,18 +360,19 @@ are on the left side of the window. The tools include:
     <summary className="cml-expansion-panel-summary">View a screenshot</summary>
     <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_33.png)
+    ![Plots grouped by metric](../img/webapp_tracking_33.png)
 
     </div>
     </details>
+    <br/>
       
-* **None** - Group by metric-variant combination (individual metric-variant plots).
+  * **None** - Group by metric and variant (individual metric-variant plots).
 
     <details className="cml-expansion-panel screenshot">
     <summary className="cml-expansion-panel-summary">View a screenshot</summary>
     <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_34.png)
+    ![Plots groups my metric and variant](../img/webapp_tracking_34.png)
 
     </div>
     </details>
@@ -387,50 +385,53 @@ are on the left side of the window. The tools include:
   * **WALL** - local clock time
 * Curve smoothing (scalars, only) - In **Smoothing** **>** Move the slider or type a smoothing factor between **0** and **0.999**.
 
+See additional [plot controls](#plot-controls) below.
 
-#### Plot controls
+### Plots
-
+Non-time-series plots appear in **RESULTS** **>** **PLOTS**. These include data reported by libraries, visualization 
-Each plot supports plot controls allowing you better analyze the results. The table below lists the plot controls which may be available for any plot. Hover over a plot, and the controls appear.
+tools, and **ClearML** explicit reporting. These may include 2D and 3D plots, tables (Pandas and CSV files), and Plotly plots. 
-
-|Icon|Description|
-|---|---|
-| <img src="/docs/latest/icons/ico-download-png.svg" className="icon size-md space-sm" /> | Download plots as PNG files. |
-| <img src="/docs/latest/icons/ico-pan.svg" className="icon size-md space-sm" /> | Pan around plot. Click <img src="/docs/latest/icons/ico-pan.svg" className="icon size-md space-sm" />, click the plot, and then drag. |
-| <img src="/docs/latest/icons/ico-dotted-box.svg" className="icon size-md space-sm" /> | To examine an area, draw a dotted box around it. Click <img src="/docs/latest/icons/ico-dotted-box.svg" className="icon size-md space-sm" /> and then drag. |
-| <img src="/docs/latest/icons/ico-dotted-lasso.svg" className="icon size-md space-sm" /> | To examine an area, draw a dotted lasso around it. Click <img src="/docs/latest/icons/ico-dotted-lasso.svg" className="icon size-md space-sm" /> and then drag. |
-| <img src="/docs/latest/icons/ico-zoom.svg" className="icon size-md space-sm" /> | Zoom into a section of a plot. Zoom in - Click <img src="/docs/latest/icons/ico-zoom.svg" className="icon size-md space-sm" /> and drag over a section of the plot. Reset to original scale - Click <img src="/docs/latest/icons/ico-reset-autoscale.svg" className="icon size-md space-sm" /> . |
-| <img src="/docs/latest/icons/ico-zoom-in-square.svg" className="icon size-md space-sm" /> | Zoom in. |
-| <img src="/docs/latest/icons/ico-zoom-out-square.svg" className="icon size-md space-sm" /> | Zoom out. |
-| <img src="/docs/latest/icons/ico-reset-autoscale.svg" className="icon size-md space-sm" /> | Reset to autoscale after zooming ( <img src="/docs/latest/icons/ico-zoom.svg" className="icon size-md space-sm" />, <img src="/docs/latest/icons/ico-zoom-in-square.svg" className="icon size-md space-sm" />, or <img src="/docs/latest/icons/ico-zoom-out-square.svg" className="icon size-md space-sm" />). |
-| <img src="/docs/latest/icons/ico-reset-axes.svg" className="icon size-md space-sm" /> | Reset axes after a zoom. |
-| <img src="/docs/latest/icons/ico-spike-lines.svg" className="icon size-md space-sm" /> | Show / hide spike lines. |
-| <img src="/docs/latest/icons/ico-show-closest.svg" className="icon size-md space-sm" /> | Show the closest data point on hover, including horizontal and vertical axes values. Click <img src="/docs/latest/icons/ico-show-closest.svg" className="icon size-md space-sm" /> and then hover over a series on the plot. |
-| <img src="/docs/latest/icons/ico-compare-data.svg" className="icon size-md space-sm" /> | Compare data on hover. Click <img src="/docs/latest/icons/ico-compare-data.svg" className="icon size-md space-sm" /> and then hover over the plot. |
-| <img src="/docs/latest/icons/ico-logarithmic-view.svg" className="icon size-md space-sm" /> | Switch to logarithmic view. |
-| <img src="/docs/latest/icons/ico-ico-graph-legend.svg" className="icon size-md space-sm" /> | Hide / show the legend. |
-| <img src="/docs/latest/icons/ico-download-json.svg" className="icon size-md space-sm" /> | To get metric data for further analysis, download plot data to JSON file. |
-
-
-### Other plots
-
-Other plots include data reported by libraries, visualization tools, and **ClearML** explicit reporting. These may include
-2D and 3D plots, tables (Pandas and CSV files), and Plotly plots. Other plots appear in **RESULTS** **>** **PLOTS**.
 Individual plots can be shown / hidden or filtered by title.
 
 <details className="cml-expansion-panel screenshot">
 <summary className="cml-expansion-panel-summary">View a screenshot</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_35.png)
+![Plots tab](../img/webapp_tracking_35.png)
 
 </div>
 </details>
 
 
+#### Plot controls
 
+The table below lists the plot controls which may be available for any plot (in the **SCALARS** and **PLOTS** tabs). 
+These controls allow you to better analyze the results. Hover over a plot, and the controls appear.
 
+|Icon|Description|
+|---|---|
+| <img src="/docs/latest/icons/ico-download-png.svg" alt="Download PNG icon" className="icon size-sm space-sm" /> | Download plots as PNG files. |
+| <img src="/docs/latest/icons/ico-pan.svg" alt="Pan icon" className="icon size-sm space-sm" /> | Pan around plot. Click <img src="/docs/latest/icons/ico-pan.svg" alt="Pan icon" className="icon size-sm space-sm" />, click the plot, and then drag. |
+| <img src="/docs/latest/icons/ico-dotted-box.svg" alt="Dotted box icon" className="icon size-sm space-sm" /> | To examine an area, draw a dotted box around it. Click <img src="/docs/latest/icons/ico-dotted-box.svg" alt="Dotted box icon" className="icon size-sm space-sm" /> and then drag. |
+| <img src="/docs/latest/icons/ico-dotted-lasso.svg" alt="Dotted lasso icon" className="icon size-sm space-sm" /> | To examine an area, draw a dotted lasso around it. Click <img src="/docs/latest/icons/ico-dotted-lasso.svg" alt="Dotted lasso icon" className="icon size-sm space-sm" /> and then drag. |
+| <img src="/docs/latest/icons/ico-zoom.svg" alt="Zoom icon" className="icon size-sm space-sm" /> | Zoom into a section of a plot. Zoom in - Click <img src="/docs/latest/icons/ico-zoom.svg" alt="Zoom icon" className="icon size-sm space-sm" /> and drag over a section of the plot. Reset to original scale - Click <img src="/docs/latest/icons/ico-reset-autoscale.svg" alt="Reset autoscale icon" className="icon size-sm space-sm" /> . |
+| <img src="/docs/latest/icons/ico-zoom-in-square.svg" alt="Zoom-in icon" className="icon size-sm space-sm" /> | Zoom in. |
+| <img src="/docs/latest/icons/ico-zoom-out-square.svg" alt="Zoom-out icon" className="icon size-sm space-sm" /> | Zoom out. |
+| <img src="/docs/latest/icons/ico-reset-autoscale.svg" alt="Reset autoscale icon" className="icon size-sm space-sm" /> | Reset to autoscale after zooming ( <img src="/docs/latest/icons/ico-zoom.svg" alt="Zoom icon" className="icon size-sm space-sm" />, <img src="/docs/latest/icons/ico-zoom-in-square.svg" alt="Zoom-in icon" className="icon size-sm space-sm" />, or <img src="/docs/latest/icons/ico-zoom-out-square.svg" alt="Zoom-out icon" className="icon size-sm space-sm" />). |
+| <img src="/docs/latest/icons/ico-reset-axes.svg" alt="Reset axes icon" className="icon size-sm space-sm" /> | Reset axes after a zoom. |
+| <img src="/docs/latest/icons/ico-spike-lines.svg" alt="Spike lines icon" className="icon size-sm space-sm" /> | Show / hide spike lines. |
+| <img src="/docs/latest/icons/ico-show-closest.svg" alt="Show closest icon" className="icon size-sm space-sm" /> | Show the closest data point on hover, including horizontal and vertical axes values. Click <img src="/docs/latest/icons/ico-show-closest.svg" alt="Show closest icon" className="icon size-sm space-sm" /> and then hover over a series on the plot. |
+| <img src="/docs/latest/icons/ico-compare-data.svg" alt="Compare data icon" className="icon size-sm space-sm" /> | Compare data on hover. Click <img src="/docs/latest/icons/ico-compare-data.svg" alt="Compare data icon" className="icon size-sm space-sm" /> and then hover over the plot. |
+| <img src="/docs/latest/icons/ico-logarithmic-view.svg" alt="Logarithmic view icon" className="icon size-sm space-sm" /> | Switch to logarithmic view. |
+| <img src="/docs/latest/icons/ico-ico-graph-legend.svg" alt="Graph legend icon" className="icon size-sm space-sm" /> | Hide / show the legend. |
+| <img src="/docs/latest/icons/ico-download-json.svg" alt="Download JSON icon" className="icon size-sm space-sm" /> | To get metric data for further analysis, download plot data to JSON file. |
+| <img src="/docs/latest/icons/ico-maximize.svg" alt="Maximize plot icon" className="icon size-sm space-sm" /> | Expand plot to entire window. |
 
-
+#### 3D plot controls 
+|Icon|Description|
+|---|---|
+| <img src="/docs/latest/icons/ico-orbital-rotation.svg" alt="Orbital rotation mode icon" className="icon size-sm" />| Switch to orbital rotation mode - rotate the plot around its middle point. |
+| <img src="/docs/latest/icons/ico-turntable-rotation.svg" alt="Turntable rotation mode icon" className="icon size-sm" />| Switch to turntable rotation mode - rotate the plot around its middle point while constraining one axis |
+| <img src="/docs/latest/icons/ico-homepage.svg" alt="reset axes icon" className="icon size-sm" />| Reset axes to default position. |
 
 
 ### Debug samples
@@ -448,7 +449,7 @@ View debug samples by metric at any iteration. The most recent iteration appears
 <summary className="cml-expansion-panel-summary">View a screenshot - Debug samples</summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_43.png)
+![Debug Samples tab](../img/webapp_tracking_43.png)
 
 </div>
 </details>
@@ -459,7 +460,7 @@ View debug samples by metric at any iteration. The most recent iteration appears
 <summary className="cml-expansion-panel-summary">View a screenshot - Viewer </summary>
 <div className="cml-expansion-panel-content">
 
-![image](../img/webapp_tracking_44.png)
+![Debug Samples image viewer](../img/webapp_tracking_44.png)
 
 </div>
 </details>
@@ -485,8 +486,6 @@ View debug samples by metric at any iteration. The most recent iteration appears
     * For images, locate a position on the sample - Hover over the sample and the X, Y coordinates appear in the legend below the sample.
 
 
-
-
 ## Tagging experiments
 
 Tags are user-defined, color-coded labels that can be added to experiments (and models), allowing to easily identify and

static/icons/ico-homepage.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M19.14985,13.22216v5.93751a.79052.79052,0,0,1-.24462.57818.69122.69122,0,0,1-.55595.22238h-4.7589v-4.7589h-3.18v4.7589H5.65146a.7543.7543,0,0,1-.556-.22238.86245.86245,0,0,1-.24461-.57818V13.1332l7.13835-5.87079,7.13836,5.87079A.12883.12883,0,0,1,19.14985,13.22216Zm2.75749-.86728-.75609.91175a.45993.45993,0,0,1-.26685.13343h-.04448a.50936.50936,0,0,1-.26685-.06671l-8.58382-7.1606-8.58382,7.1606a.58921.58921,0,0,1-.28909.089.60612.60612,0,0,1-.26685-.15567l-.77833-.91175a.37075.37075,0,0,1-.06671-.28909.38632.38632,0,0,1,.13342-.26686l8.91739-7.42745a1.4147,1.4147,0,0,1,.934-.33356,1.50255,1.50255,0,0,1,.95623.33356L15.96983,6.9066V4.48267a.38132.38132,0,0,1,.40028-.40028h2.37945a.38132.38132,0,0,1,.40029.40028v5.048l2.713,2.26826a.46.46,0,0,1,.13342.26686A.35765.35765,0,0,1,21.90734,12.35488Z" fill="#8f9dc9" />
+  <path d="M24,24H0V0H24Z" fill="none"/>
+</svg>

static/icons/ico-maximize.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M22,2v8.48524L18.46452,6.94976,13.41429,12,12,10.58571l5.05024-5.05023L13.51476,2ZM12,13.41429,10.58571,12,5.53548,17.05024,2,13.51476V22h8.48524L6.94976,18.46452Z" fill="#8f9dc9" />
+  <path d="M24,24H0V0H24Z" fill="none"/>
+</svg>

static/icons/ico-orbital-rotation.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M20.95323,5.179c-.106-.0848-.1908-.1484-.2968-.2332-7.611-5.57573-12.29628.65721-12.29628.65721L6.1977,5.00944l1.22962,8.48019c0-.0212.0212-.0212.0424-.0424a61.09835,61.09835,0,0,1,7.44137-5.27892s-1.31443-.57241-2.12-.89042c1.86564-1.75964,4.7065-3.87969,7.35656-2.58646a6.85726,6.85726,0,0,1,.93283.57241A.4434.4434,0,0,1,20.95323,5.179Zm.76322,6.975s1.35683-4.85491-1.86564-6.27534a4.33668,4.33668,0,0,0-3.71009.2332,11.07832,11.07832,0,0,1,5.27892,5.63933,5.03565,5.03565,0,0,1,.23321.65722,7.044,7.044,0,0,0,.2332-.67842C21.78005,12.0056,21.71645,12.154,21.71645,12.154ZM5.28608,17.22092a5.86982,5.86982,0,0,0,4.19769.67841c-2.56526-1.696-4.2189-7.33537-4.2189-7.33537l-2.03524.318L2,11.13638S3.166,15.92769,5.28608,17.22092ZM18.07,14.40125l-6.72056,2.94687a3.13168,3.13168,0,0,0,.40281.29681c.14841.106.50881.318.50881.318a6.7763,6.7763,0,0,1-8.247-.0848,8.90288,8.90288,0,0,0,11.36346,2.37446l.65721.46641,2.12-6.339Zm-6.31775,3.24368q.19081.1272.50881.318S11.90063,17.75093,11.75222,17.64493Z" fill="#8f9dc9" />
+  <path d="M24,24H0V0H24Z" fill="none"/>
+</svg>

static/icons/ico-turntable-rotation.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M18.572,17.0368v-.86225l-2.734,1.367,2.734,1.388v-.82019c0,.021.7571.29443.82019.52576.08412.31546-.12618.46267-.33649.63092a3.05278,3.05278,0,0,1-1.17771.42061,24.95753,24.95753,0,0,1-5.8675.4837c-5.489,0-7.1714-.715-7.42377-1.2408.06309-1.26183,4.795-2.31336,4.795-2.31336C6.43743,16.78444,2,17.35226,2,19.05573c0,2.52366,6.16193,2.98633,9.96845,2.98633C15.22818,22.04206,22,21.57939,22,19.05573c0-1.05152-1.55626-1.66141-3.428-2.01893m-7.50789.29443c-1.21977.10515-2.082.44164-2.082.84122,0,.50473,1.367.90431,3.0284.90431s3.00736-.39958,3.00736-.90431c0-.39958-.88328-.715-2.061-.84122V12.78864h1.82965l-2.776-2.83911L9.21346,12.78864h1.85068Zm3.5121-10.8307H11.71609v-.021c.33649-.33649.65194-.715.9674-1.09359l1.76656-2.29232V1.95794H9.613V3.4511h2.60778v.021c-.33649.35752-.58885.673-.92534,1.07256L9.42376,6.94217V8.01472h5.15248Z" fill="#8f9dc9" />
+  <path d="M24,24H0V0H24Z" fill="none"/>
+</svg>