戻る
Design an SVG infographic titled: “CNN Recognition Journey — Dragon Ball Edition” It must show 7 steps laid out left → right (or top → bottom if needed for mobile), each step represented by a Dragon Ball with stars 1 through 7, and each step corresponds to a CNN stage: ⭐1 Input Image ⭐2 Preprocessing (resize, normalize) ⭐3 Convolution (filters) ⭐4 ReLU Activation ⭐5 Pooling ⭐6 Flatten + Dense ⭐7 Softmax Output (final class probabilities) Input Image (embedded) Embed the user’s image INSIDE the SVG using base64 data URI. The image must be shown in Step ⭐1 in a rounded rectangle frame. Use data:image/png;base64, Add a subtle “scan” animation line moving across the image to imply recognition. I will provide the base64 data URI string. Insert it into the SVG exactly. Dragon Ball visuals For each step: Draw a Dragon Ball: orange/yellow gradient sphere + highlight + outline. Place star(s) inside: Step 1 has 1 star, Step 2 has 2 stars, … Step 7 has 7 stars. Stars should be red, stylized (5-point star polygons). Add a label under each ball (step name) and a small caption describing what happens. CNN feature visualization Between steps, show CNN “transformation” artifacts: After Convolution: show several small feature maps (tiny grids) as rectangles. After ReLU: feature maps look “activated” (more bright cells). After Pooling: fewer/larger blocks (downsampled). After Flatten: show a vector bar chart. After Dense: show a smaller vector / logits. After Softmax: show 3–6 labeled probability bars (e.g., “Shenron”, “Dragon”, “Other”, etc.). Make these artifacts simple and stylized, not mathematically perfect. Flow + animation Connect steps with glowing arrows (Dragon Ball energy style). Animate the arrows with a moving dash offset. Optional: make the Dragon Balls pulse slightly (scale/opacity) one by one with a looped animation. SVG requirements Output a complete SVG (no HTML wrapper). Works in GitHub README rendering (avoid scripts; use SVG + SMIL animations only). Use viewBox and responsive layout. Keep the SVG under ~2000 lines (reasonable size). Use IDs and groups for each step: step1, step2, … step7. Provide accessible text: title, desc, and aria-label. IMPORTANT Do NOT link to external images, fonts, or CSS files. Do NOT include JavaScript. The image must be embedded with the base64 URI. Make the style clean and modern, with Dragon Ball theme colors (orange/gold/red/blue accents). Base64 Data URI (insert below) REPLACE_THIS_WITH_DATA_URI Return only the SVG code.
SVGDragon Balldata URICNN stagesinfographic