diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
index e3215e2df..31a9fe1a7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
@@ -57,6 +57,10 @@ export function filledCircle<T extends SVGGraphicsElement>(
 
   filledCircle.selectAll('path').attr('style', `fill: ${nodeBorder} !important;`);
 
+  if (node.look !== 'handDrawn') {
+    filledCircle.attr('class', 'outer-path');
+  }
+
   if (cssStyles && cssStyles.length > 0 && node.look !== 'handDrawn') {
     filledCircle.selectAll('path').attr('style', cssStyles);
   }
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
index 7accda7c1..1a7477c95 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -68,6 +68,10 @@ export function stateEnd<T extends SVGGraphicsElement>(
   const circle = shapeSvg.insert(() => roughNode, ':first-child');
   circle.insert(() => roughInnerNode);
 
+  if (node.look !== 'handDrawn') {
+    circle.attr('class', 'outer-path');
+  }
+
   if (cssStyles) {
     circle.selectAll('path').attr('style', cssStyles);
   }