diff --git a/packages/core/src/pattern.js b/packages/core/src/pattern.js
index 203d1414ea2..60f3836e703 100644
--- a/packages/core/src/pattern.js
+++ b/packages/core/src/pattern.js
@@ -182,7 +182,9 @@ Pattern.prototype.sampleRun = function (parts, anchors, run, runs, extraClass =
     for (let j in this.parts[i].paths) {
       parts[i].paths[j + '_' + run] = this.parts[i].paths[j]
         .clone()
-        .attr('style', sampleStyle(run, runs))
+        .attr('style', sampleStyle(run, runs, this.settings.sample.styles))
+        .attr('data-sample-run', run)
+        .attr('data-sample-runs', runs)
       if (this.parts[i].points.anchor)
         parts[i].paths[j + '_' + run] = parts[i].paths[j + '_' + run].translate(dx, dy)
       if (extraClass !== false) parts[i].paths[j + '_' + run].attributes.add('class', extraClass)
diff --git a/packages/core/src/utils.js b/packages/core/src/utils.js
index 3da2d554247..f62da21e95d 100644
--- a/packages/core/src/utils.js
+++ b/packages/core/src/utils.js
@@ -319,10 +319,10 @@ export function round(value) {
   return Math.round(value * 1e2) / 1e2
 }
 
-export function sampleStyle(run, runs) {
-  let hue = (run - 1) * (330 / runs)
-
-  return `stroke: hsl(${hue}, 100%, 35%);`
+export function sampleStyle(run, runs, styles = false) {
+  return styles && Array.isArray(styles) && styles.length > 0
+    ? styles[run % styles.length]
+    : `stroke: hsl(${(run - 1) * (330 / runs)}, 100%, 35%);`
 }
 
 export function deg2rad(degrees) {