diff --git a/packages/visx-demo/src/sandboxes/visx-curve/Example.tsx b/packages/visx-demo/src/sandboxes/visx-curve/Example.tsx
index 9a01ed0ed..59cf88193 100644
--- a/packages/visx-demo/src/sandboxes/visx-curve/Example.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-curve/Example.tsx
@@ -4,7 +4,7 @@ import * as allCurves from '@visx/curve';
import { Group } from '@visx/group';
import { LinePath } from '@visx/shape';
import { scaleTime, scaleLinear } from '@visx/scale';
-import { MarkerArrow, MarkerCross, MarkerX, MarkerCircle, MarkerLine } from '@visx/marker';
+import { MarkerArrow, MarkerCross, MarkerX, MarkerCircle2, MarkerLine } from '@visx/marker';
import generateDateValue, { DateValue } from '@visx/mock-data/lib/generators/genDateValue';
type CurveType = keyof typeof allCurves;
@@ -89,7 +89,7 @@ export default function Example({ width, height, showControls = true }: CurvePro
strokeOpacity={0.6}
markerUnits="userSpaceOnUse"
/>
-
+
diff --git a/packages/visx-marker/src/index.ts b/packages/visx-marker/src/index.ts
index 852be0ce8..37b7ada43 100644
--- a/packages/visx-marker/src/index.ts
+++ b/packages/visx-marker/src/index.ts
@@ -3,4 +3,5 @@ export { default as MarkerArrow } from './markers/Arrow';
export { default as MarkerCross } from './markers/Cross';
export { default as MarkerX } from './markers/X';
export { default as MarkerCircle } from './markers/Circle';
+export { default as MarkerCircle2 } from './markers/Circle2';
export { default as MarkerLine } from './markers/Line';
diff --git a/packages/visx-marker/src/markers/Circle2.tsx b/packages/visx-marker/src/markers/Circle2.tsx
new file mode 100644
index 000000000..6cdcaf4f9
--- /dev/null
+++ b/packages/visx-marker/src/markers/Circle2.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Marker, { MarkerComponentProps } from './Marker';
+
+export default function MarkerCircle2({
+ id,
+ size = 9,
+ strokeWidth = 1,
+ ...restProps
+}: MarkerComponentProps) {
+ const diameter = size * 2;
+ const bounds = diameter + strokeWidth;
+ const mid = bounds / 2;
+ return (
+
+
+
+ );
+}
diff --git a/packages/visx-marker/test/Circle2.test.tsx b/packages/visx-marker/test/Circle2.test.tsx
new file mode 100644
index 000000000..6b9be44d2
--- /dev/null
+++ b/packages/visx-marker/test/Circle2.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { MarkerCircle2, Marker } from '../src';
+
+const Wrapper = (restProps = {}) =>
+ shallow();
+
+describe('', () => {
+ test('it should be defined', () => {
+ expect(MarkerCircle2).toBeDefined();
+ });
+
+ test('it should render a containing a ', () => {
+ const marker = Wrapper().find(Marker);
+ const circle = marker.dive().find('circle');
+ expect(marker).toHaveLength(1);
+ expect(circle).toHaveLength(1);
+ });
+
+ test('it should size correctly', () => {
+ const size = 8;
+ const strokeWidth = 1;
+ const marker = Wrapper({ size, strokeWidth }).find(Marker);
+ const circle = marker.dive().find('circle');
+ const diameter = size * 2;
+ const bounds = diameter + strokeWidth;
+ const mid = bounds / 2;
+ expect(marker.prop('markerWidth')).toEqual(bounds);
+ expect(marker.prop('markerHeight')).toEqual(bounds);
+ expect(marker.prop('refX')).toEqual(mid);
+ expect(marker.prop('refY')).toEqual(mid);
+ expect(circle.prop('r')).toEqual(size);
+ expect(circle.prop('cx')).toEqual(mid);
+ expect(circle.prop('cy')).toEqual(mid);
+ });
+});