These examples are meant to be used directly in your code. You can copy and paste them in your
project and they will work out of the box. The colors had been chosen following the [tailwind
color palette](https://tailwindcss.com/docs/customizing-colors). Each example is shown in light and
dark mode.

All these examples are set with these 3 variables:

``` elixir
# Data source
data = [4, 4, 6, 3, 2, 1, 3, 5, 7, 7, 7, 6, 9, 11, 11, 5, 7, 6, 9, 19, 19, 20, 21, 20, 17, 20, 19, 17]

# Arbitrary marker and marker area
marker = 25
marker_area = {10, 15}
```

## Cyan theme

<!-- tabs-open -->

### Light theme
``` elixir
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(6, 182, 212, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(6, 182, 212, 0.2)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(236, 72, 153, 0.8)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(236, 72, 153, 0.4)", stroke_width: 0.4, fill_color: "rgba(236, 72, 153, 0.2)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #ffffff;">
  <svg width="100%" height="100%" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6V50H0.0Z" fill="rgba(6, 182, 212, 0.2)" stroke="none" /><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6" fill="none" stroke="rgba(6, 182, 212, 0.5)" stroke-width="0.4" /><path d="M185.185,0.0V50" fill="none" stroke="rgba(236, 72, 153, 0.8)" stroke-width="0.4" /><rect x="74.074" y="-0.4" width="37.037" height="50.8" fill="rgba(236, 72, 153, 0.2)" stroke="rgba(236, 72, 153, 0.4)" stroke-width="0.4" /></svg>
</div>

### Dark theme
``` elixir
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(22, 197, 245)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(22, 197, 245, 0.4)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(255, 68, 166, 0.6)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(255, 68, 166, 0.4)", stroke_width: 0.4, fill_color: "rgba(255, 68, 166, 0.3)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #030812;">
  <svg width="100%" height="100%" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6V50H0.0Z" fill="rgba(22, 197, 245, 0.4)" stroke="none" /><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6" fill="none" stroke="rgb(22, 197, 245)" stroke-width="0.4" /><path d="M185.185,0.0V50" fill="none" stroke="rgba(255, 68, 166, 0.6)" stroke-width="0.4" /><rect x="74.074" y="-0.4" width="37.037" height="50.8" fill="rgba(255, 68, 166, 0.3)" stroke="rgba(255, 68, 166, 0.4)" stroke-width="0.4" /></svg>
</div>

<!-- tabs-close -->

## Teal theme

<!-- tabs-open -->

### Light theme
``` elixir
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(13, 148, 136, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(13, 148, 136, 0.2)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(236, 72, 153, 0.8)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(236, 72, 153, 0.4)", stroke_width: 0.4, fill_color: "rgba(236, 72, 153, 0.2)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #ffffff;">
  <svg width="100%" height="100%" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6V50H0.0Z" fill="rgba(13, 148, 136, 0.2)" stroke="none" /><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6" fill="none" stroke="rgba(13, 148, 136, 0.5)" stroke-width="0.4" /><path d="M185.185,0.0V50" fill="none" stroke="rgba(236, 72, 153, 0.8)" stroke-width="0.4" /><rect x="74.074" y="-0.4" width="37.037" height="50.8" fill="rgba(236, 72, 153, 0.2)" stroke="rgba(236, 72, 153, 0.4)" stroke-width="0.4" /></svg>
</div>

### Dark theme
``` elixir
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(23, 227, 209)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(23, 227, 209, 0.4)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(255, 68, 166, 0.6)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(255, 68, 166, 0.4)", stroke_width: 0.4, fill_color: "rgba(255, 68, 166, 0.3)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #030812;">
  <svg width="100%" height="100%" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6V50H0.0Z" fill="rgba(23, 227, 209, 0.4)" stroke="none" /><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6" fill="none" stroke="rgb(23, 227, 209)" stroke-width="0.4" /><path d="M185.185,0.0V50" fill="none" stroke="rgba(255, 68, 166, 0.6)" stroke-width="0.4" /><rect x="74.074" y="-0.4" width="37.037" height="50.8" fill="rgba(255, 68, 166, 0.3)" stroke="rgba(255, 68, 166, 0.4)" stroke-width="0.4" /></svg>
</div>

<!-- tabs-close -->

## Indigo theme

<!-- tabs-open -->

### Light theme
``` elixir
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(67, 56, 202, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(67, 56, 202, 0.2)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(236, 72, 153, 0.8)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(236, 72, 153, 0.4)", stroke_width: 0.4, fill_color: "rgba(236, 72, 153, 0.2)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #ffffff;">
  <svg width="100%" height="100%" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6V50H0.0Z" fill="rgba(67, 56, 202, 0.2)" stroke="none" /><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6" fill="none" stroke="rgba(67, 56, 202, 0.5)" stroke-width="0.4" /><path d="M185.185,0.0V50" fill="none" stroke="rgba(236, 72, 153, 0.8)" stroke-width="0.4" /><rect x="74.074" y="-0.4" width="37.037" height="50.8" fill="rgba(236, 72, 153, 0.2)" stroke="rgba(236, 72, 153, 0.4)" stroke-width="0.4" /></svg>
</div>

### Dark theme
``` elixir
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(102, 89, 255)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(102, 89, 255, 0.4)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(255, 68, 166, 0.6)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(255, 68, 166, 0.4)", stroke_width: 0.4, fill_color: "rgba(255, 68, 166, 0.3)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #030812;">
  <svg width="100%" height="100%" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6V50H0.0Z" fill="rgba(102, 89, 255, 0.4)" stroke="none" /><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6" fill="none" stroke="rgb(102, 89, 255)" stroke-width="0.4" /><path d="M185.185,0.0V50" fill="none" stroke="rgba(255, 68, 166, 0.6)" stroke-width="0.4" /><rect x="74.074" y="-0.4" width="37.037" height="50.8" fill="rgba(255, 68, 166, 0.3)" stroke="rgba(255, 68, 166, 0.4)" stroke-width="0.4" /></svg>
</div>

<!-- tabs-close -->

## Black & white theme

<!-- tabs-open -->

### Light theme
``` elixir
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(0, 0, 0)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(0, 0, 0, 0.9)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgb(243, 244, 246", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(243, 244, 246, 0.8)", stroke_width: 0.4, fill_color: "rgba(243, 244, 246, 0.1)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #ffffff;">
  <svg width="100%" height="100%" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6V50H0.0Z" fill="rgba(0, 0, 0, 0.9)" stroke="none" /><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6" fill="none" stroke="rgb(0, 0, 0)" stroke-width="0.4" /><rect x="74.074" y="-0.4" width="37.037" height="50.8" fill="rgba(243, 244, 246, 0.1)" stroke="rgba(243, 244, 246, 0.8)" stroke-width="0.4" /></svg>
</div>

### Dark theme
``` elixir
data
|> SparklineSvg.new(smoothing: 0.05, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgb(240, 240, 240)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(240, 240, 240, 0.9)")
|> SparklineSvg.add_marker(marker, stroke_color: "rgba(40, 40, 40, 0.9)", stroke_width: 0.4)
|> SparklineSvg.add_marker(marker_area, stroke_color: "rgba(40, 40, 40, 0.8)", stroke_width: 0.4, fill_color: "rgba(40, 40, 40, 0.3)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #030812;">
  <svg width="100%" height="100%" viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6V50H0.0Z" fill="rgba(240, 240, 240, 0.9)" stroke="none" /><path d="M0.0,41.55C0.37,41.55 6.667,41.765 7.407,41.55C8.148,41.335 14.074,37.142 14.815,37.25C15.556,37.358 21.481,43.27 22.222,43.7C22.963,44.13 28.889,45.635 29.63,45.85C30.37,46.065 36.296,48.108 37.037,48.0C37.778,47.892 43.704,44.13 44.444,43.7C45.185,43.27 51.111,39.83 51.852,39.4C52.593,38.97 58.519,35.315 59.259,35.1C60.0,34.885 65.926,35.1 66.667,35.1C67.407,35.1 73.333,34.992 74.074,35.1C74.815,35.208 80.741,37.465 81.481,37.25C82.222,37.035 88.148,31.337 88.889,30.8C89.63,30.262 95.556,26.715 96.296,26.5C97.037,26.285 102.963,25.855 103.704,26.5C104.444,27.145 110.37,38.97 111.111,39.4C111.852,39.83 117.778,35.208 118.519,35.1C119.259,34.992 125.185,37.465 125.926,37.25C126.667,37.035 132.593,32.197 133.333,30.8C134.074,29.402 140.0,10.375 140.741,9.3C141.481,8.225 147.407,9.407 148.148,9.3C148.889,9.192 154.815,7.365 155.556,7.15C156.296,6.935 162.222,5.0 162.963,5.0C163.704,5.0 169.63,6.72 170.37,7.15C171.111,7.58 177.037,13.6 177.778,13.6C178.519,13.6 184.444,7.365 185.185,7.15C185.926,6.935 191.852,8.977 192.593,9.3C193.333,9.622 199.63,13.385 200.0,13.6" fill="none" stroke="rgb(240, 240, 240)" stroke-width="0.4" /><rect x="74.074" y="-0.4" width="37.037" height="50.8" fill="rgba(40, 40, 40, 0.3)" stroke="rgba(40, 40, 40, 0.8)" stroke-width="0.4" /></svg>
</div>

<!-- tabs-close -->

## Simple amber theme

<!-- tabs-open -->

### Light theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(245, 158, 11, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(245, 158, 11, 0.2)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #ffffff;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(245, 158, 11, 0.2)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(245, 158, 11, 0.5)" stroke-width="0.4" /></svg>
</div>

### Dark theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(255, 165, 22, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(255, 165, 22, 0.4)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #030812;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(255, 165, 22, 0.4)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(255, 165, 22, 0.8)" stroke-width="0.4" /></svg>
</div>

<!-- tabs-close -->

## Simple green theme

<!-- tabs-open -->

### Light theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(34, 197, 94, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(34, 197, 94, 0.2)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #ffffff;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(34, 197, 94, 0.2)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(34, 197, 94, 0.5)" stroke-width="0.4" /></svg>
</div>

### Dark theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(40, 255, 118, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(40, 255, 118, 0.4)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #030812;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(40, 255, 118, 0.4)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(40, 255, 118, 0.8)" stroke-width="0.4" /></svg>
</div>

<!-- tabs-close -->

## Simple sky theme

<!-- tabs-open -->

### Light theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(14, 165, 233, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(14, 165, 233, 0.2)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #ffffff;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(14, 165, 233, 0.2)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(14, 165, 233, 0.5)" stroke-width="0.4" /></svg>
</div>

### Dark theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(18, 181, 255, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(18, 181, 255, 0.4)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #030812;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(18, 181, 255, 0.4)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(18, 181, 255, 0.8)" stroke-width="0.4" /></svg>
</div>

<!-- tabs-close -->

## Simple purple theme

<!-- tabs-open -->

### Light theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(168, 85, 247, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(168, 85, 247, 0.2)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #ffffff;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(168, 85, 247, 0.2)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(168, 85, 247, 0.5)" stroke-width="0.4" /></svg>
</div>

### Dark theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(173, 98, 255, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(173, 98, 255, 0.4)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #030812;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(173, 98, 255, 0.4)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(173, 98, 255, 0.8)" stroke-width="0.4" /></svg>
</div>

<!-- tabs-close -->

## Simple rose theme

<!-- tabs-open -->

### Light theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(244, 63, 94, 0.5)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(244, 63, 94, 0.2)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #ffffff;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(244, 63, 94, 0.2)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(244, 63, 94, 0.5)" stroke-width="0.4" /></svg>
</div>

### Dark theme
``` elixir
data
|> SparklineSvg.new(width: 200, height: 30, smoothing: 0, padding: [top: 5, left: 0, right: 0])
|> SparklineSvg.show_line(color: "rgba(255, 83, 112, 0.8)", width: 0.4)
|> SparklineSvg.show_area(color: "rgba(255, 83, 112, 0.4)")
|> SparklineSvg.to_svg!()
```

<div style="margin-bottom: 25px; overflow: hidden; border-radius: 10px; background: #030812;">
  <svg width="100%" height="100%" viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" style="display: block"><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6V30H0.0Z" fill="rgba(255, 83, 112, 0.4)" stroke="none" /><path d="M0.0,24.55C0.0,24.55 7.407,24.55 7.407,24.55C7.407,24.55 14.815,22.25 14.815,22.25C14.815,22.25 22.222,25.7 22.222,25.7C22.222,25.7 29.63,26.85 29.63,26.85C29.63,26.85 37.037,28.0 37.037,28.0C37.037,28.0 44.444,25.7 44.444,25.7C44.444,25.7 51.852,23.4 51.852,23.4C51.852,23.4 59.259,21.1 59.259,21.1C59.259,21.1 66.667,21.1 66.667,21.1C66.667,21.1 74.074,21.1 74.074,21.1C74.074,21.1 81.481,22.25 81.481,22.25C81.481,22.25 88.889,18.8 88.889,18.8C88.889,18.8 96.296,16.5 96.296,16.5C96.296,16.5 103.704,16.5 103.704,16.5C103.704,16.5 111.111,23.4 111.111,23.4C111.111,23.4 118.519,21.1 118.519,21.1C118.519,21.1 125.926,22.25 125.926,22.25C125.926,22.25 133.333,18.8 133.333,18.8C133.333,18.8 140.741,7.3 140.741,7.3C140.741,7.3 148.148,7.3 148.148,7.3C148.148,7.3 155.556,6.15 155.556,6.15C155.556,6.15 162.963,5.0 162.963,5.0C162.963,5.0 170.37,6.15 170.37,6.15C170.37,6.15 177.778,9.6 177.778,9.6C177.778,9.6 185.185,6.15 185.185,6.15C185.185,6.15 192.593,7.3 192.593,7.3C192.593,7.3 200.0,9.6 200.0,9.6" fill="none" stroke="rgba(255, 83, 112, 0.8)" stroke-width="0.4" /></svg>
</div>

<!-- tabs-close -->