# Customize Connection Line

The main connection line class is `ConnectionLine`. This class supports all of Skill Web's connection features, such as working with shaders (highlighting and setting active state), and it controls the line renderer to properly connect the **first and last** line points to the appropriate skills.

When customizing the connection line, it's recommended to create a class that inherits from it. There's already an example of this used by the [#runes](https://stylishesper.gitbook.io/skill-web/general/running-the-demos#runes "mention") demo, called `CurvedConnectionLine`.

## Curved Connection Line (Customization Example)

Here were the steps used to create the `CurvedConnectionLine` class:

1. Create a new class and inherit from `ConnectionLine`.
2. Add custom variables. One for the control point (Vector3) and another for the number of line points (int).
3. Override the `UpdateLine` method and add custom curve logic.

Below is the `CurvedConnectionLine` class for reference.

```csharp
using UnityEngine;

/// <summary>
/// A connection line with support to curve like an arc.
/// </summary>
public class CurvedConnectionLine : ConnectionLine
{
    /// <summary>
    /// The curve control point.
    /// </summary>
    public Vector3 controlPoint = Vector3.zero;

    /// <summary>
    /// The number of points on the line. The more there are, the more smooth the line will look.
    /// </summary>
    [Min(2)]
    public int points = 2;

    public override void UpdateLine()
    {
        // Do nothing if there are no line points
        if (points <= 0)
        {
            return;
        }

        // Set the number of points
        lineRenderer.positionCount = points;

        // Get the first and final positions
        Vector3 p0;
        Vector3 p2;

        if (connection != null)
        {
            p0 = Input.rectTransform.anchoredPosition;
            p2 = Output.rectTransform.anchoredPosition;
        }
        else
        {
            p0 = startPosition;
            p2 = Output.rectTransform.anchoredPosition;
        }

        // Midpoint between start and end
        Vector3 mid = (p0 + p2) / 2;

        Vector3 p1 = mid + controlPoint;

        // Loop for number of points
        for (int i = 0; i < points; i++)
        {
            float t = i / (float)(points - 1);

            // Set each point with a curve formula (Quadratic Bézier formula)
            Vector3 point = Mathf.Pow(1 - t, 2) * p0 + 2 * (1 - t) * t * p1 + Mathf.Pow(t, 2) * p2;
            lineRenderer.SetPosition(i, point);
        }
    }
}
```
