​
Description

The Background component is configurable via props and can be passed to the Svelvet component as a child.

App.svelte
<script>
	import { Background, Node, Svelvet } from 'svelvet';
    import CustomEdge from './CustomEdge.svelte'
</script>

<Svelvet controls minimap>
    <Node />
    <Background dotColor="red" bgColor="black" gridWidth={40} dotSize={3} slot="background" />
</Svelvet>
When passing the Background component to Svelvet, you must specify slot=“background”

​
Props

​
gridWidth
number
default:"22"

Pixel value representing space between dots at default scale.

​
dotSize
number
default:"1.4"

Pixel value representing the size of each grid point at default scale.

​
bgColor
CSS Color String
default:"theme dependent"

Primary background color.

​
dotColor
CSS Color String
default:"theme dependent"

Primary dot color.

​
Description

The Background component is configurable via props and can be passed to the Svelvet component as a child.

App.svelte
<script>
	import { Background, Node, Svelvet } from 'svelvet';
    import CustomEdge from './CustomEdge.svelte'
</script>

<Svelvet controls minimap>
    <Node />
    <Background dotColor="red" bgColor="black" gridWidth={40} dotSize={3} slot="background" />
</Svelvet>
When passing the Background component to Svelvet, you must specify slot=“background”

​
Props

​
gridWidth
number
default:"22"

Pixel value representing space between dots at default scale.

​
dotSize
number
default:"1.4"

Pixel value representing the size of each grid point at default scale.

​
bgColor
CSS Color String
default:"theme dependent"

Primary background color.

​
dotColor
CSS Color String
default:"theme dependent"

Primary dot color.