SVG Frame Designer
9-Slice Border Frame System — Guru Brief
50 minimum. + would be better Designs.
Project Overview
I need a set of decorative border frames designed as SVG files using a 9-slice (9-piece) system. These will be used as overlays on vertical video content and images. The frames sit on top of images/video as a decorative border — similar to how photo frames or Instagram filter borders work.
What is a 9-Slice Frame?
Each frame consists of up to 9 SVG pieces:
- 4 corners (Top Left, Top Right, Bottom Left, Bottom Right)
- 4 edges (Top, Bottom, Left, Right)
- 1 optional centre overlay (semi-transparent texture or pattern)
The corner pieces are fixed size. The edge pieces tile/repeat seamlessly to fill the space between corners. This means one frame design works at any image size — portrait, square, or landscape.
You do NOT need to deliver all 9 pieces. Only deliver the pieces that are part of your design. See the Deliverables section for details.
Technical Requirements
- All files must be valid SVG with xmlns="http://www.w3.org/2000/svg" attribute
- Corner pieces: square dimensions recommended (32×32, 64×64, or 128×128px)
- Edge pieces: must tile seamlessly — left/right edges tile vertically, top/bottom tile horizontally
- Transparent backgrounds where appropriate (PNG-style alpha transparency in SVG)
- No external image references (no <image href="..."> tags)
- No JavaScript inside SVG files
- CSS animations are welcome — sparkle, pulse, shimmer, float effects all supported
- File size: under 50KB per piece
- Symmetric corner designs preferred — ideally the Top Left corner rotated 90°/180°/270° gives usable Top Right/Bottom Right/Bottom Left. Individual corner designs are also acceptable.
Primary Format
Frames are to be designed for portrait, Landscape and Square. (vertical video/image — think smartphone screen, TikTok, Instagram Stories).
Deliverables Per Frame
Deliver only the pieces that are part of your design. Each piece should be a separate SVG file named as follows:
Border Pieces (deliver any combination)
- corner-top-left.svg
- corner-top-right.svg (or note if same as TL rotated 90°)
- corner-bottom-left.svg (or note if same as TL rotated 270°)
- corner-bottom-right.svg (or note if same as TL rotated 180°)
- edge-top.svg
- edge-bottom.svg (or note if same as top rotated 180°)
- edge-left.svg
- edge-right.svg (or note if same as top rotated 90°)
Optional Additional Pieces
- overlay.svg — centre texture or watermark pattern (tiling across the image area)
- feature-tl.svg — large decorative element at top-left (non-tiling, positioned over image)
- feature-tr.svg — large decorative element at top-right
- feature-bl.svg — large decorative element at bottom-left
- feature-br.svg — large decorative element at bottom-right
Valid Minimal Frame Examples
These are all valid deliverables — you do not need all 9 pieces:
- 4 corners only (no edges) — floating corner accents
- 2 corners only (diagonal) — top-left + bottom-right accent style
- Edges only, no corners — simple clean border lines
- Top and bottom bars only — cinema/letterbox style
- Single bold side edge — column accent
- Centre overlay only — watermark or texture pattern
- Feature elements only — large decorative corner pieces with no border
- Any combination of the above
Please note in your delivery which pieces are included and which are intentionally omitted.
Required Preview Image
Include a preview image (PNG or JPG) showing the frame applied to a sample portrait image (9:16 ratio, any placeholder photo or gradient). This helps confirm the frame looks correct before I integrate it.
Frame Styles Needed
Please propose YOUR OWN creative designs within these themes. I am open to your interpretation — the themes are starting points not strict briefs
. Surprise me. , BELOW ARE GUIDE IDEAS ONLY.
- Film / Cinema
- Film strip sprocket holes on left and right edges
- Classic cinema corner registration marks
- Dark/black aesthetic
- Botanical
- Delicate illustrated leaves, vines, or flowers at corners
- Thin stem or branch edges
- Elegant, editorial feel
- Geometric Minimal
- Clean lines, subtle corner shapes
- Very thin edges, restrained design
- Could be single-colour or two-tone
- Grunge / Urban
- Rough edges, torn paper or spray paint aesthetic
- Texture-heavy, expressive
- Sparkle / Celebration
- Stars, sparkles, festive feel
- CSS animations encouraged — twinkling, pulsing
- Could suit birthdays, launches, announcements
- Handmade / Sketch
- Hand-drawn sketch style, irregular lines
- Pencil or ink texture feel
- Organic, personal, creative
What NOT to Include
- No copyrighted characters, brand logos, or recognisable IP
- No photographs — SVG vector only
- No raster images embedded within the SVG
- No Fonts and/or added via @import — use system fonts or convert text to paths
- No JavaScript
Questions Welcome
If you have examples of 9-slice SVG work in your portfolio please include them — this is a specialist requirement and prior experience is a strong plus.
...
Show more