How to Create Custom Animated SVGs for the Stencils Tool
Want to transform your static Squarespace designs into captivating animated experiences? In this comprehensive tutorial, you'll discover two powerful methods for creating custom animated SVGs that work seamlessly with SquareKicker's Stencils tool. Whether you prefer hands-on design control or want to leverage AI technology, you'll have everything you need to bring your creative vision to life. Add your designs to image, video, button, and map blocks, and section backgrounds.
What You'll Learn
Two different methods: Xyris design software and AI-generated animations
How to create breathing effects, floating particles, and animated text transitions
Step-by-step instructions for designing, exporting, and implementing your animations
Pro tips for optimizing animated stencils for different use cases
How to apply your creations to images, videos, buttons, maps, and section backgrounds
Why Animated Stencils Matter
Static websites are quickly becoming a thing of the past. Today's web users expect dynamic, interactive experiences that capture their attention and encourage exploration. Animations allow you to create these engaging visual effects while maintaining fast loading times and professional aesthetics.
With SquareKicker's Stencils tool, you can apply custom clipping masks to virtually any element on your Squarespace site. When you add animation to these masks, you create movement that draws the eye and enhances your storytelling without overwhelming your content. Even subtle animations can enhance your website, and in fact sometimes a subtle animation is more powerful as it adds movement without overwhelming site visitors as they explore the content.
How to Transform Video and Images with Creative Shape Effects Using Stencils
Two Powerful Creation Methods
Method 1: Xyris Design Software
Xyris (xyris.app) provides precise control over your animations with an intuitive interface similar to Canva but specifically built for creating dynamic graphics. You'll learn how to layer multiple effects, control timing and easing, and create complex sequences that loop seamlessly. SquareKicker isn’t affiliated with or sponsored by Xyris, but we had great success using their tool to create some of the SVGs you’ll find in the Stencils library.
For full step-by-step instructions on how to use Xyris, check out their tutorials here. Or watch the Pro Tip (above) to see Nick’s demo.
Method 2: ChatGPT
Our custom ChatGPT prompt takes the guesswork out of SVG animation code. Simply describe your desired effect, and the AI generates ready-to-use animated SVGs that you can immediately upload to your SquareKicker Stencils collection.
Copy and paste the below prompt (or download for your own copy) into your favorite AI tool (such as ChatGPT). Update the — MY SVG Description — section to reflect how you want your SVG to appear.
Download Resources
Ready to start creating? Get your copy of our custom AI prompt and download all the animated SVGs featured in this tutorial. These resources will jumpstart your animation journey and provide inspiration for your own unique designs.
Animated SVG Prompt Template
You are an expert SVG generator. Create a single, self-contained SVG that matches these requirements:
Goal
- {SVG_DESCRIPTION}
- Pure inline <svg>…</svg>, no external CSS/JS/images/fonts.
- Transparent background unless explicitly specified.
- Loop forever if animated. Use CSS @keyframes, not SMIL.
- Fill color should default to **black (rgba(0,0,0,α))** for visibility in preview.
- Numeric precision ≤ 3 decimals.
Canvas and Sizing
1) Ratio W:H = {RATIO_W}:{RATIO_H}. Default 1:1.
2) Base width = {BASE_WIDTH}. Default 800.
3) Compute CANVAS_W = BASE_WIDTH.
4) Compute CANVAS_H = round(BASE_WIDTH × RATIO_H ÷ RATIO_W).
5) Set width=CANVAS_W, height=CANVAS_H.
6) Set viewBox="0 0 CANVAS_W CANVAS_H".
Shapes / Artwork
- {SHAPE_DESCRIPTION} (circles, squares, paths, custom input).
- Count per size: Large {LARGE_COUNT}, Medium {MED_COUNT}, Small {SMALL_COUNT}.
- Size ranges: Large {LARGE_SIZE_MIN}-{LARGE_SIZE_MAX}, Medium {MED_SIZE_MIN}-{MED_SIZE_MAX}, Small {SMALL_SIZE_MIN}-{SMALL_SIZE_MAX}.
- Opacity ranges per size: Large α {LARGE_A_MIN}-{LARGE_A_MAX}, Medium α {MED_A_MIN}-{MED_A_MAX}, Small α {SMALL_A_MIN}-{SMALL_A_MAX}.
- Position randomized within canvas, constrained to fit fully inside.
Animation
- Keyframes name = {ANIM_NAME}.
- Animation type: {ANIMATION_DESCRIPTION}.
- Each element uses: animation: {ANIM_NAME} linear infinite.
- Duration ranges (seconds): Large {LARGE_DUR_MIN}-{LARGE_DUR_MAX}, Medium {MED_DUR_MIN}-{MED_DUR_MAX}, Small {SMALL_DUR_MIN}-{SMALL_DUR_MAX}.
- Negative delay = random in [−duration, 0] for seamless population at t=0.
- Transform origin=center, transform-box=fill-box for consistent scaling/rotation.
Accessibility
- Include <title> and <desc> with human-readable description.
Output
- Return a short summary (1–2 lines).
- Provide inline <svg>…</svg>.
- Provide a downloadable file named {FILENAME}.svg, byte-identical to inline.
Validation Checklist
- Inline only, no external assets.
- CSS @keyframes (not SMIL).
- Background stays transparent unless requested.
- Each element has animation-duration and negative animation-delay (if animated).
- Ratio, width/height, and viewBox computed correctly.
- Numeric precision ≤ 3 decimals.
— MY SVG Description —
SVG Description
Floating bubbles for a mask
Pulsing dots for a loader
Rotating squares for a spinner
Drifting particles like dust
Expanding ripples for water effect
Animation Description
floatUp → rise upward
driftLeft → move sideways left
driftRight → move sideways right
scalePulse → grow/shrink in place
rotateSlow → slow spin
wobble → oscillate side-to-side
ripple → expand outward and fade
Speed / Duration
Slow: 18–25s
Medium: 10–15s
Fast: 5–8s
Ease / Motion
linear (constant motion)
ease-in-out (smooth start and stop)
ease-in (slow start, fast finish)
ease-out (fast start, slow finish)
Take Your Designs Further
Animated Stencils are just one way SquareKicker empowers you to push beyond Squarespace's native limitations. With over 100 design and animation tools, you can create truly custom websites that reflect your unique vision and keep visitors engaged.
Ready to transform your Squarespace site with animated stencils and powerful design tools? Start your free trial today and discover what's possible when you have complete creative control.
