diff --git a/packages/vstory/demo/src/App.tsx b/packages/vstory/demo/src/App.tsx
index c8395953..8371ca03 100644
--- a/packages/vstory/demo/src/App.tsx
+++ b/packages/vstory/demo/src/App.tsx
@@ -43,6 +43,7 @@ import { BarWorkingInSameIndustry } from './demos/infographic/bar-work-in-same-i
 import { ProjectGoal } from './demos/infographic/project-goal';
 import { BigDataWordCloud } from './demos/infographic/big-data-wordcloud';
 import { AreaChart } from './demos/infographic/source-of-new-contacts-area-chart';
+import { MarketingWordcloud } from './demos/infographic/marking-wordcloud';
 
 type MenusType = (
   | {
@@ -254,6 +255,10 @@ const App = () => {
         {
           name: 'Source of New Contacts Area Chart',
           component: AreaChart
+        },
+        {
+          name: 'Marketing WordCloud',
+          component: MarketingWordcloud
         }
       ]
     },
diff --git a/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx
new file mode 100644
index 00000000..2ffd1e34
--- /dev/null
+++ b/packages/vstory/demo/src/demos/infographic/marking-wordcloud.tsx
@@ -0,0 +1,368 @@
+import React, { createRef, useEffect } from 'react';
+import { Player, Story } from '../../../../../vstory-core/src';
+import { registerAll } from '../../../../../vstory/src';
+
+registerAll();
+export const MarketingWordcloud = () => {
+  const id = 'MarketingWordcloud';
+  useEffect(() => {
+    const container = document.getElementById(id);
+    const canvas = document.createElement('canvas');
+    container?.appendChild(canvas);
+
+    const chartPath =
+      'M948.6 627c1.2-2 2.6-4 3.8-5.8 8-12.4 15.2-25.4 21.4-39 6.2-13.6 11.4-27.4 15.6-41.8 4.2-14.4 7.4-28.8 9.6-43.6 2.2-14.8 3.2-29.6 3.2-44.6 0.6-172.6-140.2-312.6-314.2-312.6-151.8 0-278.4 106.8-308.2 248.8-4.4 21-6.8 42.4-6.8 64 0 172.8 135.4 316.6 309.4 316.6 27.6 0 65-8.6 85.4-14.4 20.4-5.8 40.8-13.4 46-15.6 5.2-2 13.4-4.2 20-2.2l130 39c1.2 0.4 2.4 0.4 3.6 0 1.2-0.4 2.2-0.8 3-1.8 0.8-0.8 1.4-2 1.8-3.2 0.4-1.2 0.4-2.4 0-3.6L942.6 650c-2-8.8-2.4-10.4 6-23zM721 806c-13 2.2-26 3.4-39 3.6-71.2 0-138.6-19.4-193.2-56-17.4-11-33.8-23.8-48.8-38.2-15-14.4-28.6-30.2-40.4-47.4-43.8-60-67.8-136.4-67.8-216.4 0-5.4 0.2-10.6 0.4-16 0-0.8 0-1.6-0.2-2.2-0.2-0.8-0.4-1.4-0.8-2.2-0.4-0.6-0.8-1.2-1.4-1.8l-1.8-1.2c-0.6-0.2-1.4-0.4-2.2-0.6-0.8 0-1.4 0-2.2 0.2-0.8 0.2-1.4 0.4-2 0.8-0.6 0.4-1.2 0.8-1.8 1.4-2.4 2.8-5 5.6-7.4 8.6-2.4 3-4.6 5.8-7 9-2.2 3-4.4 6-6.6 9.2-2.2 3.2-4.2 6.2-6.2 9.4s-4 6.4-5.8 9.8c-1.8 3.2-3.6 6.6-5.4 10-1.8 3.4-3.4 6.8-5 10.2-1.6 3.4-3.2 7-4.6 10.4-1.4 3.6-2.8 7-4.2 10.6-1.4 3.6-2.6 7.2-3.8 10.8-1.2 3.6-2.2 7.2-3.4 11-1 3.6-2 7.4-2.8 11-0.8 3.8-1.6 7.4-2.4 11.2-0.8 3.8-1.4 7.6-2 11.2-0.6 3.8-1 7.6-1.6 11.4-0.4 3.8-0.8 7.6-1 11.4l-0.6 11.4c-0.2 3.8-0.2 7.6-0.2 11.4 0 3.8 0.2 7.6 0.4 11.4 0.2 3.8 0.4 7.6 0.8 11.4l1.2 11.4c0.4 3.8 1 7.6 1.6 11.4 0.6 3.8 1.4 7.6 2.2 11.2 0.8 3.8 1.6 7.4 2.6 11.2 1 3.6 2 7.4 3 11 1 3.6 2.2 7.2 3.4 10.8 1.2 3.6 2.6 7.2 4 10.8 1.4 3.6 2.8 7 4.4 10.6 1.6 3.4 3 7 4.8 10.4 1.6 3.4 3.4 6.8 5.2 10.2 1.8 3.4 3.6 6.6 5.6 10l6 9.6c4.2 6.6 6.6 11.6 5.8 15L277.2 910c0 0.2 0 0.6-0.2 0.8v1c0 0.4 0 0.6 0.2 0.8 0 0.2 0.2 0.6 0.2 0.8 0 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.2 0.6 0.4 0.8 0.2 0.2 0.4 0.4 0.6 0.8l0.6 0.6 0.6 0.6c0.2 0.2 0.4 0.4 0.8 0.4 0.2 0.2 0.6 0.2 0.8 0.4 0.2 0 0.6 0.2 0.8 0.2 0.2 0 0.6 0 0.8 0.2h0.8c0.2 0 0.6 0 0.8-0.2 0.2 0 0.6-0.2 0.8-0.2l114.2-42.2c3.4-1.4 7.2-2.2 10.8-2 3.8 0 7.4 0.8 10.8 2.4 34.2 14 72 22.4 109.8 22.4 9 0 18-0.4 27-1.2 9-0.8 17.8-2.2 26.6-3.8 8.8-1.8 17.6-3.8 26.2-6.4 8.6-2.6 17.2-5.6 25.6-9a274.252 274.252 0 0 0 48-25.2c7.6-5 15-10.4 22-16 7.2-5.8 14-11.8 20.4-18.2 0.6-0.6 1-1.2 1.4-1.8 0.4-0.8 0.6-1.4 0.8-2.2 0.2-0.8 0.2-1.6 0-2.4-0.2-0.8-0.4-1.6-0.6-2.2-0.4-0.8-0.8-1.4-1.4-2-0.6-0.6-1.2-1-1.8-1.4-0.6-0.4-1.4-0.6-2.2-0.8-0.8 0.2-1.4 0.2-2.2 0.2z';
+
+    const dsl = {
+      acts: [
+        {
+          id: 'defaultAct',
+          scenes: [
+            {
+              id: 'defaultScene',
+              actions: [
+                {
+                  characterId: [
+                    'background-1',
+                    'background-2',
+                    'title',
+                    'chart',
+                    'list-1-icon',
+                    'list-1-text',
+                    'list-2-icon',
+                    'list-2-text',
+                    'list-3-icon',
+                    'list-3-text',
+                    'list-4-icon',
+                    'list-4-text'
+                  ],
+                  characterActions: [
+                    {
+                      action: 'appear'
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      characters: [
+        {
+          id: 'background-1',
+          type: 'Rect',
+          zIndex: 0,
+          position: {
+            x: -150,
+            y: 610,
+            width: 400,
+            height: 400,
+
+            angle: Math.PI / 4 - 0.2
+          },
+          options: {
+            graphic: {
+              fill: 'rgb(242,242,242)'
+            }
+          }
+        },
+        {
+          id: 'background-2',
+          type: 'Rect',
+          zIndex: 0,
+          position: {
+            x: -150,
+            y: 600,
+            width: 300,
+            height: 300,
+            angle: Math.PI / 4
+          },
+          options: {
+            graphic: {
+              fill: 'rgb(217,217,217)'
+            }
+          }
+        },
+        {
+          id: 'title',
+          type: 'Text',
+          zIndex: 0,
+          position: {
+            x: 420,
+            y: 50,
+            width: 600,
+            height: 200
+          },
+          options: {
+            graphic: {
+              text: 'Marketing Wordcloud',
+              textAlign: 'left',
+              fontSize: 40,
+              fontWeight: 'bold',
+              fill: '#000'
+            }
+          }
+        },
+        {
+          id: 'chart',
+          type: 'VChart',
+          zIndex: 0,
+          position: {
+            x: 120,
+            y: 140,
+            width: 600,
+            height: 450
+          },
+          options: {
+            spec: {
+              type: 'wordCloud',
+              maskShape:
+                '<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1084"><path d="M39.68 467.382857C39.68 248.502857 251.117714 71.04 512 71.04c260.845714 0 472.32 177.444571 472.32 396.306286 0 218.898286-211.474286 396.361143-472.32 396.361143-28.324571 0-56.009143-2.102857-82.962286-6.089143l-0.164571-0.036572c-63.798857-15.213714-90.806857 55.734857-236.196572 92.525715-29.860571 7.570286-33.462857 0.036571-10.587428-24.228572 41.398857-43.812571 81.298286-115.236571 39.826286-145.773714-1.28-0.731429-17.261714-11.776-23.350858-16.237714-97.462857-72.594286-158.884571-178.596571-158.884571-296.521143z" p-id="1085"></path></svg>',
+              nameField: 'name',
+              valueField: 'value',
+              seriesField: 'name',
+              seriesStyle: [
+                {
+                  name: 'MARKETING',
+                  word: {
+                    style: {
+                      fill: 'rgb(51,133,105)'
+                    }
+                  }
+                }
+              ],
+              colorList: ['#000'],
+              wordCloudShapeConfig: {
+                fillingColorList: ['#000']
+              },
+              data: [
+                {
+                  name: 'data',
+                  values: [
+                    { name: 'MARKETING', value: 1000 },
+                    { name: 'SALES', value: 500 },
+                    { name: 'INTERNET', value: 500 },
+                    { name: 'ACCOUNT', value: 500 },
+                    { name: 'DEVELOP', value: 200 },
+                    { name: 'ORGANIZATION', value: 200 },
+                    { name: 'CUSTOMERS', value: 200 },
+                    { name: 'BUDGET', value: 200 },
+                    { name: 'RESEARCH', value: 100 },
+                    { name: 'SOCIAL', value: 10 },
+                    { name: 'AGGRESSIVE', value: 10 },
+                    { name: 'PLANNING', value: 10 },
+                    { name: 'MEDIA', value: 10 },
+                    { name: 'TARGET', value: 10 },
+                    { name: 'ADVANCE', value: 10 },
+                    { name: 'INNOVATE', value: 10 },
+                    { name: 'IDEA', value: 10 },
+                    { name: 'TEAM', value: 10 },
+                    { name: 'PROMOTION', value: 10 },
+                    { name: 'ACCOMPLISHMENT', value: 10 },
+                    { name: 'BELIEF', value: 10 },
+                    { name: 'NEWS', value: 10 },
+                    { name: 'SUCCESS', value: 10 },
+                    { name: 'GROWING', value: 10 },
+                    { name: 'SEGMENT', value: 10 },
+                    { name: 'DIVISION', value: 10 },
+                    { name: 'STRATEGY', value: 10 },
+                    { name: 'REFRESH', value: 10 },
+                    { name: 'DESIGN', value: 10 },
+                    { name: 'CONTEST', value: 10 },
+                    { name: 'ARCHITECTURE', value: 10 },
+                    { name: 'CREATIVE', value: 10 },
+                    { name: 'COMPANY', value: 10 },
+                    { name: 'INQUIRY', value: 10 },
+                    { name: 'DESTINATION', value: 10 },
+                    { name: 'MATCH', value: 10 },
+                    { name: 'ADMIT', value: 10 },
+                    { name: 'AMOUNT', value: 10 },
+                    { name: 'FORWARD', value: 10 },
+                    { name: 'ACCEPT', value: 10 },
+                    { name: 'COOL', value: 10 },
+                    { name: 'VIRAL', value: 10 },
+                    { name: 'MASS', value: 10 },
+                    { name: 'CONSTRUCTION', value: 10 },
+                    { name: 'INNOVATION', value: 10 }
+                  ]
+                }
+              ],
+              color: {
+                type: 'ordinal',
+                // domain: ['a', 'b'],
+                // range: ['#000', '#000'],
+                specified: {
+                  MARKETING: 'green',
+                  d: 'red'
+                }
+              }
+            }
+          }
+        },
+        {
+          id: 'list-1-icon',
+          type: 'Shape',
+          zIndex: 0,
+          position: {
+            x: 700,
+            y: 155,
+            width: 30,
+            height: 30
+          },
+          options: {
+            graphic: {
+              symbolType: chartPath,
+              fill: '#ddd'
+            }
+          }
+        },
+        {
+          id: 'list-1-text',
+          type: 'Text',
+          zIndex: 0,
+          position: {
+            x: 780,
+            y: 163,
+            width: 450,
+            height: 200
+          },
+          options: {
+            graphic: {
+              text: 'MARKETING strategies require continuous INNOVATION and CREATIVE approaches to effectively engage CUSTOMERS.',
+              textAlign: 'left',
+              fontSize: 18,
+              fontWeight: 'bold',
+              fill: '#aaa',
+              wordBreak: 'break-word'
+            }
+          }
+        },
+        {
+          id: 'list-2-icon',
+          type: 'Shape',
+          zIndex: 0,
+          position: {
+            x: 700,
+            y: 255,
+            width: 30,
+            height: 30
+          },
+          options: {
+            graphic: {
+              symbolType: chartPath,
+              fill: '#ddd'
+            }
+          }
+        },
+        {
+          id: 'list-2-text',
+          type: 'Text',
+          zIndex: 0,
+          position: {
+            x: 780,
+            y: 260,
+            width: 450,
+            height: 200
+          },
+          options: {
+            graphic: {
+              text: 'Successful SALES not only depend on the BUDGET but also on thorough RESEARCH and market INQUIRY.',
+              textAlign: 'left',
+              fontSize: 18,
+              fontWeight: 'bold',
+              fill: '#aaa',
+              wordBreak: 'break-word'
+            }
+          }
+        },
+        {
+          id: 'list-3-icon',
+          type: 'Shape',
+          zIndex: 0,
+          position: {
+            x: 700,
+            y: 355,
+            width: 30,
+            height: 30
+          },
+          options: {
+            graphic: {
+              symbolType: chartPath,
+              fill: '#ddd'
+            }
+          }
+        },
+        {
+          id: 'list-3-text',
+          type: 'Text',
+          zIndex: 0,
+          position: {
+            x: 780,
+            y: 360,
+            width: 450,
+            height: 200
+          },
+          options: {
+            graphic: {
+              text: 'In the INTERNET age, SOCIAL media plays a crucial role in PROMOTION and reaching the TARGET audience.',
+              textAlign: 'left',
+              fontSize: 18,
+              fontWeight: 'bold',
+              fill: '#aaa',
+              wordBreak: 'break-word'
+            }
+          }
+        },
+        {
+          id: 'list-4-icon',
+          type: 'Shape',
+          zIndex: 0,
+          position: {
+            x: 700,
+            y: 455,
+            width: 30,
+            height: 30
+          },
+          options: {
+            graphic: {
+              symbolType: chartPath,
+              fill: '#ddd'
+            }
+          }
+        },
+        {
+          id: 'list-4-text',
+          type: 'Text',
+          zIndex: 0,
+          position: {
+            x: 780,
+            y: 460,
+            width: 450,
+            height: 200
+          },
+          options: {
+            graphic: {
+              text: 'A strong ORGANIZATION focuses on PLANNING and DEVELOP to achieve SUCCESS and ACCOMPLISHMENT in their goals.',
+              textAlign: 'left',
+              fontSize: 18,
+              fontWeight: 'bold',
+              fill: '#aaa',
+              wordBreak: 'break-word'
+            }
+          }
+        }
+      ]
+    };
+
+    const story = new Story(dsl, { canvas, width: 1280, height: 720, background: '#FFF' });
+    const player = new Player(story);
+    story.init(player);
+    player.play(-1);
+
+    return () => {
+      story.release();
+    };
+  }, []);
+
+  return <div style={{ width: '100%', height: '100%' }} id={id}></div>;
+};
diff --git a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx
index 47851ca9..ce400d8e 100644
--- a/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx
+++ b/packages/vstory/demo/src/demos/infographic/source-of-new-contacts-area-chart.tsx
@@ -217,7 +217,7 @@ export const AreaChart = () => {
           },
           options: {
             graphic: {
-              shape: 'circle',
+              symbolType: 'circle',
               fill: 'rgb(244,211,94)'
             }
           }
@@ -254,7 +254,7 @@ export const AreaChart = () => {
           },
           options: {
             graphic: {
-              shape: 'circle',
+              symbolType: 'circle',
               fill: 'rgb(249,87,56)'
             }
           }
@@ -291,7 +291,7 @@ export const AreaChart = () => {
           },
           options: {
             graphic: {
-              shape: 'circle',
+              symbolType: 'circle',
               fill: 'rgb(91,192,235)'
             }
           }
@@ -328,7 +328,7 @@ export const AreaChart = () => {
           },
           options: {
             graphic: {
-              shape: 'circle',
+              symbolType: 'circle',
               fill: 'rgb(155,197,61)'
             }
           }