WeChat Official Account SVG/CSS Interactive Effects#

All interactivity must be pure SVG + inline CSS. WeChat bans JavaScript entirely.

Core Constraints#

• SVG events: begin="mousedown", begin="click", begin="touchstart"
• SVG animation: <animate>, <animatetransform>, <animateMotion>
• CSS: inline style="" only (no <style> blocks, no external sheets)
• <foreignObject> to embed HTML inside SVG
• Text in SVG: <text> + <tspan leaf=""> ( leaf attr is WeChat-specific)
• Append <p style="display:none;"><mp-style-type data-value="10000"/></p> at end to enable WeChat special rendering
• viewBox width: 750 (mobile-optimized)

Four Architecture Patterns#

PatternUse CaseComplexityA. HTML + SVG accentsVisual enhancement, animated decorations★☆☆B. Pure SVG state machineClick games, step-by-step reveals★★☆C. SVG + HTML hybridInteractive header + long-form body★★☆D. CSS Grid + multi-SVGInteractive courseware, multi-card reveals★★★

For detailed architecture patterns, examples, and animation templates, read references/patterns.md.

Quick Start: Click-to-Reveal Template#

Single-layer cover that disappears on click:

xml

<g>
  <!-- 1. Fade out on click -->
  <animate attributeName="opacity" values="1;0"
           dur="0.01s" fill="freeze"
           begin="mousedown" restart="never"/>
  <!-- 2. Move off-screen after delay -->
  <animatetransform attributeName="transform" type="translate"
                    values="0 0;2000 0" dur="0.01s" fill="freeze"
                    begin="click+0.02s" restart="never"/>
  <!-- Background + content -->
  <rect width="750" height="2400" fill="#0d1117"/>
  <text x="375" y="500" fill="#c9d1d9" font-size="24" text-anchor="middle">
    <tspan leaf="">👆 Click to reveal</tspan>
  </text>
</g>

ParamFast (game)Slow (ceremony)click delayclick+0.02sclick+0.3s

Multi-Layer Reveal#

Stack layers bottom-to-top in SVG (later elements render on top). Each layer has its own mousedown/ click triggers with restart="never":

xml

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 600"
     style="display:block;width:100%;">
  <!-- Bottom: final reveal -->
  <rect width="750" height="600" fill="#0d1117"/>
  <text x="375" y="300" fill="#7ee787" font-size="36" text-anchor="middle">
    <tspan leaf="">🎉 Unlocked!</tspan>
  </text>
  <!-- Layer 2 -->
  <g>
    <animate attributeName="opacity" values="1;0"
             dur="0.01s" fill="freeze" begin="mousedown" restart="never"/>
    <animatetransform attributeName="transform" type="translate"
                      values="0 0;2000 0" dur="0.01s" fill="freeze"
                      begin="click+0.05s" restart="never"/>
    <rect width="750" height="600" fill="#161b22"/>
    <text x="375" y="300" fill="#FF8B2C" font-size="28" text-anchor="middle">
      <tspan leaf="">Level 2 → Tap again</tspan>
    </text>
  </g>
  <!-- Layer 1 (top, visible first) -->
  <g>
    <animate attributeName="opacity" values="1;0"
             dur="0.01s" fill="freeze" begin="mousedown" restart="never"/>
    <animatetransform attributeName="transform" type="translate"
                      values="0 0;2000 0" dur="0.01s" fill="freeze"
                      begin="click+0.05s" restart="never"/>
    <rect width="750" height="600" fill="#21262d"/>
    <text x="375" y="280" fill="#c9d1d9" font-size="28" text-anchor="middle">
      <tspan leaf="">👆 Tap to start</tspan>
    </text>
  </g>
</svg>
<p style="display:none;"><mp-style-type data-value="10000"/></p>

Bounce Feedback#

Add tactile bounce on every tap ( restart="always"):

xml

<g>
  <animatetransform attributeName="transform" type="translate"
                    values="0 0;0 22;0 0" dur="0.5s"
                    begin="mousedown" restart="always"/>
  <rect width="750" height="1000" fill="#161b22" opacity="0.01"/>
</g>

Terminal UI Color Palette (GitHub Dark)#

RoleHexBackground#0d1117Panel#161b22Border#30363dRed#ff5f56Yellow#ffbd2eGreen#27c93fBody text#c9d1d9Comment#6e7681Highlight#FF8B2CSuccess#7ee787

Workflow#

1. Choose architecture pattern (A–D) based on complexity
2. Read references/patterns.md for the chosen pattern's detailed template
3. Build SVG with proper layer ordering (bottom = final reveal, top = first visible)
4. Test all restart="never" vs restart="always" logic
5. Append <mp-style-type data-value="10000"/> at the end
6. Validate: no <script>, no <style> blocks, no external CSS, all styles inline