update CV & add rorschach
All checks were successful
Deploy valere.dev / deploy (push) Successful in 25s

This commit is contained in:
valere
2026-02-25 11:44:52 +01:00
parent 56e621c6e2
commit 10e3c47dd3
7 changed files with 504 additions and 21 deletions

View File

@@ -0,0 +1,220 @@
<template>
<div>
<svg class="svg" viewBox="0 0 256 256">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="color-matrix-blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -12"
result="color-matrix-filter"></feColorMatrix>
<feComposite in="SourceGraphic" in2="filter" operator="atop"></feComposite>
</filter>
</defs>
<g class="circles" filter="url(#goo)">
<circle r="15.9" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="37.28s" begin="-27.40s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.91s" begin="-19.95s" repeatCount="indefinite">
</animate>
</circle>
<circle r="15.9" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="37.28s" begin="-27.40s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.91s" begin="-19.95s" repeatCount="indefinite">
</animate>
</circle>
<circle r="13.7" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="35.05s" begin="-19.99s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.28s" begin="-11.95s" repeatCount="indefinite">
</animate>
</circle>
<circle r="13.7" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="35.05s" begin="-19.99s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.28s" begin="-11.95s" repeatCount="indefinite">
</animate>
</circle>
<circle r="17.4" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="38.39s" begin="-16.00s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.62s" begin="-2.31s" repeatCount="indefinite">
</animate>
</circle>
<circle r="17.4" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="38.39s" begin="-16.00s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.62s" begin="-2.31s" repeatCount="indefinite">
</animate>
</circle>
<circle r="24.6" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="39.18s" begin="-21.97s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="33.08s" begin="-24.79s" repeatCount="indefinite">
</animate>
</circle>
<circle r="24.6" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="39.18s" begin="-21.97s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="33.08s" begin="-24.79s" repeatCount="indefinite">
</animate>
</circle>
<circle r="15.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="31.12s" begin="-23.90s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.65s" begin="-0.13s" repeatCount="indefinite">
</animate>
</circle>
<circle r="15.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="31.12s" begin="-23.90s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.65s" begin="-0.13s" repeatCount="indefinite">
</animate>
</circle>
<circle r="27.4" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="36.82s" begin="-8.29s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="36.85s" begin="-31.42s" repeatCount="indefinite">
</animate>
</circle>
<circle r="27.4" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="36.82s" begin="-8.29s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="36.85s" begin="-31.42s" repeatCount="indefinite">
</animate>
</circle>
<circle r="28.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="30.67s" begin="-27.92s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.89s" begin="-28.43s" repeatCount="indefinite">
</animate>
</circle>
<circle r="28.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="30.67s" begin="-27.92s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.89s" begin="-28.43s" repeatCount="indefinite">
</animate>
</circle>
<circle r="14.1" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="32.35s" begin="-39.58s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="31.30s" begin="-23.02s" repeatCount="indefinite">
</animate>
</circle>
<circle r="14.1" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="32.35s" begin="-39.58s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="31.30s" begin="-23.02s" repeatCount="indefinite">
</animate>
</circle>
<circle r="20.6" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="33.72s" begin="-37.19s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.97s" begin="-10.86s" repeatCount="indefinite">
</animate>
</circle>
<circle r="20.6" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="33.72s" begin="-37.19s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.97s" begin="-10.86s" repeatCount="indefinite">
</animate>
</circle>
<circle r="27.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="38.13s" begin="-39.04s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-0.29s" repeatCount="indefinite">
</animate>
</circle>
<circle r="27.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="38.13s" begin="-39.04s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-0.29s" repeatCount="indefinite">
</animate>
</circle>
<circle r="23.9" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="31.01s" begin="-12.49s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.39s" begin="-3.84s" repeatCount="indefinite">
</animate>
</circle>
<circle r="23.9" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="31.01s" begin="-12.49s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.39s" begin="-3.84s" repeatCount="indefinite">
</animate>
</circle>
<circle r="28.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="39.58s" begin="-13.72s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.43s" begin="-8.86s" repeatCount="indefinite">
</animate>
</circle>
<circle r="28.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="39.58s" begin="-13.72s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.43s" begin="-8.86s" repeatCount="indefinite">
</animate>
</circle>
<circle r="17.3" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="36.54s" begin="-33.78s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.92s" begin="-23.75s" repeatCount="indefinite">
</animate>
</circle>
<circle r="17.3" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="36.54s" begin="-33.78s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.92s" begin="-23.75s" repeatCount="indefinite">
</animate>
</circle>
<circle r="18.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="37.45s" begin="-2.97s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.93s" begin="-32.91s" repeatCount="indefinite">
</animate>
</circle>
<circle r="18.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="37.45s" begin="-2.97s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.93s" begin="-32.91s" repeatCount="indefinite">
</animate>
</circle>
<circle r="13.2" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="31.81s" begin="-0.53s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.34s" begin="-7.25s" repeatCount="indefinite">
</animate>
</circle>
<circle r="13.2" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="31.81s" begin="-0.53s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.34s" begin="-7.25s" repeatCount="indefinite">
</animate>
</circle>
<circle r="24.2" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="38.03s" begin="-3.89s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-17.16s" repeatCount="indefinite">
</animate>
</circle>
<circle r="24.2" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="38.03s" begin="-3.89s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-17.16s" repeatCount="indefinite">
</animate>
</circle>
<circle r="16.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="35.96s" begin="-38.86s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.79s" begin="-34.64s" repeatCount="indefinite">
</animate>
</circle>
<circle r="16.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="35.96s" begin="-38.86s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.79s" begin="-34.64s" repeatCount="indefinite">
</animate>
</circle>
</g>
</svg>
</div>
</template>

View File

@@ -1,3 +1,6 @@
<template> <template>
<div>Home</div> <div>
<rorschach class="w-1/2 h-1/2" />
</div>
</template> </template>

View File

@@ -41,6 +41,7 @@ dlcover() {
if [ -n "$manual_url" ]; then if [ -n "$manual_url" ]; then
curl -s "$manual_url" -o "${base}.jpg" curl -s "$manual_url" -o "${base}.jpg"
convert "${base}.jpg" -resize 200x "$(dirname "${base}")/200/$(basename "${base}").jpg"
echo "${base}.jpg saved from manual URL (fichier: $file)" echo "${base}.jpg saved from manual URL (fichier: $file)"
return return
fi fi
@@ -56,6 +57,7 @@ dlcover() {
if [ -n "$art" ] && [ "$art" != "null" ]; then if [ -n "$art" ] && [ "$art" != "null" ]; then
art_hi=$(echo "$art" | sed 's/100x100bb/1000x1000bb/') art_hi=$(echo "$art" | sed 's/100x100bb/1000x1000bb/')
curl -s "$art_hi" -o "${base}.jpg" curl -s "$art_hi" -o "${base}.jpg"
convert "${base}.jpg" -resize 200x "$(dirname "${base}")/200/$(basename "${base}").jpg"
echo "${base}.jpg saved from iTunes (fichier: $file)" echo "${base}.jpg saved from iTunes (fichier: $file)"
return return
fi fi
@@ -66,6 +68,7 @@ dlcover() {
if [ -n "$url" ] && [ "$url" != "null" ]; then if [ -n "$url" ] && [ "$url" != "null" ]; then
curl -s "$url" -o "${base}.jpg" curl -s "$url" -o "${base}.jpg"
convert "${base}.jpg" -resize 200x "$(dirname "${base}")/200/$(basename "${base}").jpg"
echo "${base}.jpg saved from Google Images (fichier: $file)" echo "${base}.jpg saved from Google Images (fichier: $file)"
else else
echo "❌ No cover found for $artist - $title (fichier: $file)" echo "❌ No cover found for $artist - $title (fichier: $file)"
@@ -100,7 +103,16 @@ searchinside() {
grep -rwl "$1" ./ grep -rwl "$1" ./
} }
alias evilsync='rsync -avz --delete -e ssh $MUSIC_PATH_LOCAL root@erudi.fr:$MUSIC_PATH' evilsync() {
alias evildiff='rsync -avzn --delete -e ssh $MUSIC_PATH_LOCAL root@erudi.fr:$MUSIC_PATH' rsync -avz --delete -e ssh $MUSIC_PATH_LOCAL root@erudi.fr:$MUSIC_PATH
}
evildiff() {
rsync -avzn --delete -e ssh $MUSIC_PATH_LOCAL root@erudi.fr:$MUSIC_PATH
}
adminer() {
docker run --rm -p 8080:8080 --network dockerweb adminer
}
# end .linux-env # end .linux-env

3
public/cv/3CVs.md Normal file
View File

@@ -0,0 +1,3 @@
cv-v.md VUE
cv-r.md REACT
cv-f.md FULLSTACK

View File

@@ -70,20 +70,45 @@ J'ai développé le client et le serveur d'un outil de collecte et d'analyse de
- Tracker client et API GraphQL & TypeScript - Tracker client et API GraphQL & TypeScript
- CI/CD et modélisation Prisma - CI/CD et modélisation Prisma
### 2020 Studiolab | Développeur React.js ### 2019 - Euronews | Développeur Vue.js
- Développement de composants avec React & Ant Design
### 2019 Euronews | Développeur Vue.js
- Intégration SCSS normalisée (ITCSS) pour la v3 du site - Intégration SCSS normalisée (ITCSS) pour la v3 du site
- Mise en place de grid css sur les gabarits fondamentaux du site
- Refactorisation du code existant et création de stores Vue 3
### 2018 Tyredating | Développeur Vue.js ### 2018 - Tyredating | Développeur Vue.js
- Développement de composants Vue pour CMS from scratch - Développement de composants Vue pour CMS from scratch
- Intégration responsive - Intégration responsive
- Mise en place de tests E2E
_(… autres expériences antérieures disponibles sur demande)_ ### 2017 - Michelin | Développeur front end / Intégrateur
- intégration de la nouvelle version de bike.michelin.com
- Apostrophe cms (http://apostrophecms.org)
- Reactjs
### 2016 - Euronews | Développeur Vue.js
- intégrateur pour euronews.com v2
- intégration SCSS normalisé avec Bootstrap
### 2015 - Africanews | Intégrateur
- intégration de la 1er version du site africanews.com
### 2014 - Agence Interactive | Intégrateur
- intégration des nouvelles maquettes pour jeanlain.com
- Intégration des composants avec la méthode BEM
### BIM DATA
### Gotta Joga
### Apps panel
###
--- ---

View File

@@ -23,7 +23,7 @@ Développeur front Vue/Nuxt, jaide les équipes à livrer des interfaces robu
## 🏢 Expériences ## 🏢 Expériences
### 2025 Groupama | Développeur Vue.js ### 2025 - Groupama | Développeur Vue.js
Lors de cette mission pour Groupama, j'ai eu l'occasion de travailler au sein d'une équipe composée de Lors de cette mission pour Groupama, j'ai eu l'occasion de travailler au sein d'une équipe composée de
5 développeurs front, 2 lead dev et un facilitateur Scrum, en interaction avec une équipe métier sur site et à distance. 5 développeurs front, 2 lead dev et un facilitateur Scrum, en interaction avec une équipe métier sur site et à distance.
@@ -37,7 +37,7 @@ L'accent a été mis en particulier sur les règles métiers et les tests foncti
- Sécurisation des applications et suivi des bonnes pratiques - Sécurisation des applications et suivi des bonnes pratiques
- Mob et pair programming, présentation du backlog et des priorités à léquipe - Mob et pair programming, présentation du backlog et des priorités à léquipe
### 2024 Fitarena | Développeur Vue.js ### 2024 - Fitarena | Développeur Vue.js
Pour Fitarena, j'ai eu l'occasion de travailler avec l'architecte back-end pour développer un agenda interactif en Vue 3 et Pinia. Pour Fitarena, j'ai eu l'occasion de travailler avec l'architecte back-end pour développer un agenda interactif en Vue 3 et Pinia.
@@ -45,7 +45,7 @@ Pour Fitarena, j'ai eu l'occasion de travailler avec l'architecte back-end pour
- Refactorisation du code existant et création de stores et services API - Refactorisation du code existant et création de stores et services API
- Développement de composants UI spécifiques - Développement de composants UI spécifiques
### 20212023 Potager City | Développeur Vue.js ### 2021-2023 - Potager City | Développeur Vue.js
Pour Potager City, j'ai travaillé sur le développement d'une application Vue 2 avec un accent particulier sur l'accessibilité et les performances. Pour Potager City, j'ai travaillé sur le développement d'une application Vue 2 avec un accent particulier sur l'accessibilité et les performances.
Dans ce cadre, j'ai mis en place des tests de bout en bout (E2E) afin d'éviter les régressions CSS. Dans ce cadre, j'ai mis en place des tests de bout en bout (E2E) afin d'éviter les régressions CSS.
@@ -55,7 +55,7 @@ J'ai aussi mis en place le système de rendu des campagnes emailing avec un micr
- Coordination avec les équipes produit pour améliorer lexpérience utilisateur - Coordination avec les équipes produit pour améliorer lexpérience utilisateur
- Mise en place de tests techniques et contrôle qualité du code - Mise en place de tests techniques et contrôle qualité du code
### 20202021 MassiveMusic | Développeur Vue/TypeScript/Node/Prisma ### 2020-2021 - MassiveMusic | Développeur Vue/TypeScript/Node/Prisma
MassiveMusic est un projet personnel fullstack qui m'a permis de consolider mes connaissances en Vue, Node.js, DevOps et web design en développant seul un réseau social avec lecture de musique en streaming de bout en bout. MassiveMusic est un projet personnel fullstack qui m'a permis de consolider mes connaissances en Vue, Node.js, DevOps et web design en développant seul un réseau social avec lecture de musique en streaming de bout en bout.
@@ -64,34 +64,58 @@ MassiveMusic est un projet personnel fullstack qui m'a permis de consolider mes
- API GraphQL & TypeScript et modélisation Prisma - API GraphQL & TypeScript et modélisation Prisma
- CI/CD via GitLab et Docker Compose - CI/CD via GitLab et Docker Compose
### 20202021 Analytics | Développeur Node.js ### 2020-2021 - Analytics | Développeur Node.js
J'ai développé le client et le serveur d'un outil de collecte et d'analyse de données navigateur en Node.js. J'ai développé le client et le serveur d'un outil de collecte et d'analyse de données navigateur en Node.js.
- Tracker client et API GraphQL & TypeScript - Tracker client et API GraphQL & TypeScript
- CI/CD et modélisation Prisma - CI/CD et modélisation Prisma
### 2020 Studiolab | Développeur React.js ### 2020 - Studiolab | Développeur React.js
- Développement de composants avec React & Ant Design - Développement de composants avec React & Ant Design
### 2019 Euronews | Développeur Vue.js ### 2019 - Euronews | Développeur Vue.js
- Intégration SCSS normalisée (ITCSS) pour la v3 du site - Intégration SCSS normalisée (ITCSS) pour la v3 du site
- Mise en place de grid css sur les gabarits fondamentaux du site
- Refactorisation du code existant et création de stores Vue 3
### 2018 Tyredating | Développeur Vue.js ### 2018 - Tyredating | Développeur Vue.js
- Développement de composants Vue pour CMS from scratch - Développement de composants Vue pour CMS from scratch
- Intégration responsive - Intégration responsive
- Mise en place de tests E2E
_(… autres expériences antérieures disponibles sur demande)_ ### 2017 - Michelin | Développeur front end / Intégrateur
- intégration de la nouvelle version de bike.michelin.com
- Apostrophe cms (http://apostrophecms.org)
- Reactjs
### 2016 - Euronews | Développeur Vue.js
- intégrateur pour euronews.com v2
- intégration SCSS normalisé avec Bootstrap
### 2015 - Africanews | Intégrateur
- intégration de la 1er version du site africanews.com
### 2014 - Agence Interactive | Intégrateur
- intégration des nouvelles maquettes pour jeanlain.com
- Intégration des composants avec la méthode BEM
### BIM DATA
###
--- ---
## 🎓 Diplômes ## 🎓 Diplômes
- 2011 Licence Ingénierie de lInternet - 2011 - Licence Ingénierie de lInternet
- 2010 BTS Communication et Industries Graphiques - 2010 - BTS Communication et Industries Graphiques
--- ---

196
public/rorschach.svg Normal file
View File

@@ -0,0 +1,196 @@
<svg class="svg" viewBox="0 0 256 256">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="color-matrix-blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -12"
result="color-matrix-filter"></feColorMatrix>
<feComposite in="SourceGraphic" in2="filter" operator="atop"></feComposite>
</filter>
</defs>
<g class="circles" filter="url(#goo)">
<circle r="15.9" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="37.28s" begin="-27.40s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.91s" begin="-19.95s" repeatCount="indefinite">
</animate>
</circle>
<circle r="15.9" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="37.28s" begin="-27.40s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.91s" begin="-19.95s" repeatCount="indefinite">
</animate>
</circle>
<circle r="13.7" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="35.05s" begin="-19.99s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.28s" begin="-11.95s" repeatCount="indefinite">
</animate>
</circle>
<circle r="13.7" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="35.05s" begin="-19.99s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.28s" begin="-11.95s" repeatCount="indefinite">
</animate>
</circle>
<circle r="17.4" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="38.39s" begin="-16.00s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.62s" begin="-2.31s" repeatCount="indefinite"></animate>
</circle>
<circle r="17.4" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="38.39s" begin="-16.00s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.62s" begin="-2.31s" repeatCount="indefinite"></animate>
</circle>
<circle r="24.6" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="39.18s" begin="-21.97s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="33.08s" begin="-24.79s" repeatCount="indefinite">
</animate>
</circle>
<circle r="24.6" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="39.18s" begin="-21.97s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="33.08s" begin="-24.79s" repeatCount="indefinite">
</animate>
</circle>
<circle r="15.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="31.12s" begin="-23.90s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.65s" begin="-0.13s" repeatCount="indefinite"></animate>
</circle>
<circle r="15.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="31.12s" begin="-23.90s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.65s" begin="-0.13s" repeatCount="indefinite"></animate>
</circle>
<circle r="27.4" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="36.82s" begin="-8.29s" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="36.85s" begin="-31.42s" repeatCount="indefinite">
</animate>
</circle>
<circle r="27.4" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="36.82s" begin="-8.29s" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="36.85s" begin="-31.42s" repeatCount="indefinite">
</animate>
</circle>
<circle r="28.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="30.67s" begin="-27.92s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.89s" begin="-28.43s" repeatCount="indefinite">
</animate>
</circle>
<circle r="28.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="30.67s" begin="-27.92s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="38.89s" begin="-28.43s" repeatCount="indefinite">
</animate>
</circle>
<circle r="14.1" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="32.35s" begin="-39.58s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="31.30s" begin="-23.02s" repeatCount="indefinite">
</animate>
</circle>
<circle r="14.1" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="32.35s" begin="-39.58s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="31.30s" begin="-23.02s" repeatCount="indefinite">
</animate>
</circle>
<circle r="20.6" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="33.72s" begin="-37.19s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.97s" begin="-10.86s" repeatCount="indefinite">
</animate>
</circle>
<circle r="20.6" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="33.72s" begin="-37.19s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="37.97s" begin="-10.86s" repeatCount="indefinite">
</animate>
</circle>
<circle r="27.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="38.13s" begin="-39.04s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-0.29s" repeatCount="indefinite"></animate>
</circle>
<circle r="27.0" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="38.13s" begin="-39.04s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-0.29s" repeatCount="indefinite"></animate>
</circle>
<circle r="23.9" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="31.01s" begin="-12.49s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.39s" begin="-3.84s" repeatCount="indefinite"></animate>
</circle>
<circle r="23.9" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="31.01s" begin="-12.49s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="39.39s" begin="-3.84s" repeatCount="indefinite"></animate>
</circle>
<circle r="28.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="39.58s" begin="-13.72s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.43s" begin="-8.86s" repeatCount="indefinite"></animate>
</circle>
<circle r="28.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="39.58s" begin="-13.72s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.43s" begin="-8.86s" repeatCount="indefinite"></animate>
</circle>
<circle r="17.3" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="36.54s" begin="-33.78s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.92s" begin="-23.75s" repeatCount="indefinite">
</animate>
</circle>
<circle r="17.3" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="36.54s" begin="-33.78s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.92s" begin="-23.75s" repeatCount="indefinite">
</animate>
</circle>
<circle r="18.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="37.45s" begin="-2.97s" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.93s" begin="-32.91s" repeatCount="indefinite">
</animate>
</circle>
<circle r="18.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="37.45s" begin="-2.97s" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="30.93s" begin="-32.91s" repeatCount="indefinite">
</animate>
</circle>
<circle r="13.2" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="31.81s" begin="-0.53s" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.34s" begin="-7.25s" repeatCount="indefinite"></animate>
</circle>
<circle r="13.2" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="31.81s" begin="-0.53s" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.34s" begin="-7.25s" repeatCount="indefinite"></animate>
</circle>
<circle r="24.2" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="38.03s" begin="-3.89s" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-17.16s" repeatCount="indefinite">
</animate>
</circle>
<circle r="24.2" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="38.03s" begin="-3.89s" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="34.63s" begin="-17.16s" repeatCount="indefinite">
</animate>
</circle>
<circle r="16.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="10%; 90%; 10%" dur="35.96s" begin="-38.86s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.79s" begin="-34.64s" repeatCount="indefinite">
</animate>
</circle>
<circle r="16.5" class="circle" fill="rgba(0,0,0,0.7)">
<animate attributeName="cx" values="90%; 10%; 90%" dur="35.96s" begin="-38.86s" repeatCount="indefinite">
</animate>
<animate attributeName="cy" values="10%; 90%; 10%" dur="35.79s" begin="-34.64s" repeatCount="indefinite">
</animate>
</circle>
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB