Hi everyone! As a beginner, I’m excited to share another SVG template I’ve developed with the help of Gemini AI. This time, I’ve created an Animated Profile Template packed with dynamic visual effects.
Key features included in this template:
-
Rotating Gradients: Smooth, continuous color transitions.
-
Stroke Animation: Dynamic outlines that draw themselves.
-
Color-Shift Effects: Interactive or timed palette transitions.
-
Shape Morphing: Fluid transitions between different geometric forms.
-
Glassmorphism Effect: That trendy, frosted-glass aesthetic.
-
feMorphology Animation: Unique outline/contour effects generated directly on the photo.
-
Text Pattern Animation: Creative animated fills for your typography.
I hope you find this useful for your projects! I’d love to hear your thoughts.
Mobile app link
3 Likes
How to Use the Profile Template
To get started, you need to create several Virtual Columns with the following configurations. Make sure to use the LongText type for text and image data to ensure the app stays stable and avoids any rendering errors.
1. Text Content Columns
Create six Virtual Columns for your text data. Set the type to LongText and use these formulas:
-
[Isi_teks] Formula: TEXT([your data1])
-
[Isi_teks_2] Formula: TEXT([your data2])
-
[Isi_teks_3]. Formula: TEXT([your data3])
-
[Isi_teks_4] Formula: TEXT([your data4])
-
[Isi_teks_5]. Formula: TEXT([your data5])
-
[Isi_teks_6] Formula: TEXT([your data6])
2. Photo Configuration
For the photo, create a Virtual Column named [Photo 1] with the type LongText.
Important: Before using the photo, convert it to a Base64 string. Use a small image size (e.g., 180 x 180 pixels) to keep the code compact and prevent performance issues.
Formula:
CONCATENATE (
'<image href="image_base64" x="155" y="45" width="160" height="160" preserveAspectRatio="xMidYMid slice" />')
Adjust the x and y positions to the size of your photo.
……according to template
[Photo_4] with the type LongText.
Formula :
CONCATENATE (
'<image href="image_base64" x="0" y="0" width="480" height="480" preserveAspectRatio="xMidYMid slice" />')
Adjust the X and Y positions to the size of your photo.
Link base 64 : https://www.base64-image.de/
3. Final Output
Create a Virtual Column named [Salin_kode] with the type Image. This is where you will paste the full SVG code template that references the columns above.
1 Like
How to Use the Profile Template
To get started, you need to create several Virtual Columns with the following configurations. Make sure to use the LongText type for text and image data to ensure the app stays stable and avoids any rendering errors.
1. Text Content Columns
Create six Virtual Columns for your text data. Set the type to LongText and use these formulas:
-
[Isi_teks] Formula: TEXT([your data1])
-
[Isi_teks_2] Formula: TEXT([your data2])
-
[Isi_teks_3]. Formula: TEXT([your data3])
-
[Isi_teks_4] Formula: TEXT([your data4])
-
[Isi_teks_5]. Formula: TEXT([your data5])
-
[Isi_teks_6] Formula: TEXT([your data6])
2. Photo Configuration
For the photo, create a Virtual Column named [Photo 1] with the type LongText.
Important: Before using the photo, convert it to a Base64 string. Use a small image size (e.g., 180 x 180 pixels) to keep the code compact and prevent performance issues.
Formula:
CONCATENATE (
'<image href="image_base64" x="155" y="45" width="160" height="160" preserveAspectRatio="xMidYMid slice" />')
Adjust the x and y positions to the size of your photo.
……according to template
[Photo_4] with the type LongText.
Formula :
CONCATENATE (
'<image href="image_base64" x="0" y="0" width="480" height="480" preserveAspectRatio="xMidYMid slice" />')
Adjust the X and Y positions to the size of your photo.
Link base 64 : https://www.base64-image.de/
3. Final Output
Create a Virtual Column named [Salin_kode] with the type Image. This is where you will paste the full SVG code template that references the columns above.
1 Like
