🧠 How to Read Gradient Pattern DSL

Gradient Pattern DSL may look complex at first, but it follows a small set of consistent rules. This section teaches you how to read any pattern step by step.

📌 Start from the boundaries

Every pattern always has:

^ ... .

Read it as:

Start of pattern
...
End of pattern

🧠 Example: Basic repeating pattern

Pattern

^[color-stop,~color-stop].

📌 Step 1 - boundaries

^ - Begin pattern  
. - End of pattern

So we know:

everything between ^ and . is the rule we need to read

📌 Step 2 - look inside

[color-stop,~color-stop]

This is a sequence ([]), which means:

do this, then this

📌 Step 3 - first element

color-stop

This means:

the pattern must start with a color-stop

📌 Step 4 - second element

~color-stop

The ~ operator means:

repeat zero or more times

So:

~color-stop

means:

zero or more additional color-stops

📌 Step 5 - combine everything

Now combine both parts:

[color-stop,~color-stop]

Becomes:

one color-stop
then any number of additional color-stops

📌 Final explanation

Start of pattern

Expect:
  one color-stop

Then:
  zero or more additional color-stops

End of pattern

💡 Intuition

You can read this pattern as:

“at least one color-stop, then as many as you want”

🔗 Try it

Open the playground and test:

color-stop
color-stop, color-stop
color-stop, color-stop, color-stop

All of them should be valid.

📌 Understand sequence []

[a,b]

Means:

a then b

So:

[color-stop,~color-stop]

Becomes:

color-stop, then repeat color-stop N-times

📌 Understand repetition ~

~color-stop

Means:

zero or more color-stop

So the full meaning:

at least one color-stop
then any number of additional color-stops

📌 Final result

^[color-stop,~color-stop].

`^` - Start of pattern

Expect:
  at least one `color-stop`

Then:
  zero or more additional color-stops

`.` - End of pattern

📌 Reading OR conditions

Now a more complex pattern:

(config|color-stop)

This means:

either config
or color-stop

📌 Combining sequence and OR

([config,color-stop]|color-stop)

Read it as:

Either:
  config followed by color-stop
Or:
  color-stop

📌 Reading nested patterns

Example:

^[([config,color-stop]|color-stop),~color-stop].

Step-by-step:

Start of pattern

Then:
  Either:
    config followed by color-stop
  Or:
    color-stop

Then:
  repeat color-stop

End of pattern

📌 Color hints

[color-hint,color-stop]

Means:

a color-hint must always be followed by a color-stop

🧠 Mental model

Think of DSL as a set of instructions:

Read input from left to right
Match expected tokens
Branch when needed
Repeat when allowed

🔗 Try it interactively

Reading patterns becomes much easier when you see them visually.

👉 Open the playground to explore patterns interactively:

Open DSL Playground →

🚀 Summary

• ^ → BEGIN
• . → END
• [] → SEQUENCE
• () → GROUPPING
• | → OR
• ~ → REPETITION (Array)
• config → CONFIG (angle, dimension, position)
• color-stop → COLOR STOP (red, gren 10% 20%, blue 50%, rgb(1,2,3))
• color-hint → COLOR HINT (10%, 20%, 50%) - offset of the gradient intersection point

Once you understand these, you can read any pattern.

💡 Tip

Start simple:

^color-stop.

Then gradually add:

[]
()
|
~