WordPress.org
Get WordPress

Plugin Directory

Changeset 3768064


Ignore:
Timestamp:
10/27/2026 08:53:41 AM (2 days ago)
Author:
qrsvp
Message:

Listing: the icon runs the header's loop

File:
1 edited

Legend:

Unmodified
Added
Removed

  • qrsvp/assets/icon.svg

    r3767870 r3768064  
    1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="QRSVP"><style>.check{stroke-dasharray:1.02 1.02;animation:check 5s cubic-bezier(.65,0,.35,1) infinite}@keyframes check{0%,6%{stroke-dashoffset:1.02;opacity:1}20%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}@media (prefers-reduced-motion:reduce){.check{animation:none}}</style><rect width="512" height="512" rx="104" fill="#0e1621"/><g fill="#f2f5f8"><path d="M96 96h128v128H96zm25.5 25.5v77h77v-77z"/><path d="M144 144h32v32h-32z"/><path d="M288 96h128v128H288zm25.5 25.5v77h77v-77z"/><path d="M336 144h32v32h-32z"/><path d="M96 288h128v128H96zm25.5 25.5v77h77v-77z"/><path d="M144 336h32v32h-32z"/></g><clipPath id="c"><path d="M314.1 325.9 343.1 354.8 406.6 273 419.8 321.3 346.9 415.2 285.9 354.1z"/></clipPath><path class="check" d="M297.2 337.2 345 385 426.1 280.6" pathLength="1" fill="none" stroke="#34c47a" stroke-width="66" stroke-linejoin="round" clip-path="url(#c)"/></svg>
     1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-labelledby="qrsvp-logo-title">
     2<title id="qrsvp-logo-title">QRSVP</title>
     3<style>
     4.qs-scan{opacity:0;animation:qs-scan 6s linear infinite}
     5.qs-dot{transform-box:fill-box;transform-origin:center}
     6.qs-dot-top{animation:qs-dot-top 6s infinite}
     7.qs-dot-bottom{animation:qs-dot-bottom 6s infinite}
     8.qs-check{stroke-dasharray:1;stroke-dashoffset:0;animation:qs-check 6s infinite}
     9.qs-pop{transform-box:view-box;transform-origin:353px 344px;animation:qs-pop 6s infinite}
     10.qs-ripple{opacity:0;transform-box:view-box;transform-origin:353px 344px;animation:qs-ripple 6s infinite}
     11@keyframes qs-check{0%,4.2%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.5,0,.75,0)}10.8%{stroke-dashoffset:-1}33.3%{stroke-dashoffset:-1;animation-timing-function:cubic-bezier(.25,.6,.3,1)}43.3%,100%{stroke-dashoffset:-2}}
     12@keyframes qs-scan{0%,10%{opacity:0;transform:translateY(70px)}12.5%,30.8%{opacity:1}33.3%,100%{opacity:0;transform:translateY(444px)}}
     13@keyframes qs-dot-top{0%,13.3%{transform:scale(1);fill:#f2f5f8;animation-timing-function:cubic-bezier(.3,0,.2,1)}15.6%{transform:scale(1.28);fill:#f7961c;animation-timing-function:cubic-bezier(.4,0,.2,1)}20.8%,100%{transform:scale(1);fill:#f2f5f8}}
     14@keyframes qs-dot-bottom{0%,25.3%{transform:scale(1);fill:#f2f5f8;animation-timing-function:cubic-bezier(.3,0,.2,1)}27.6%{transform:scale(1.28);fill:#f7961c;animation-timing-function:cubic-bezier(.4,0,.2,1)}33%,100%{transform:scale(1);fill:#f2f5f8}}
     15@keyframes qs-pop{0%,40.8%{transform:scale(1);animation-timing-function:cubic-bezier(.3,0,.3,1)}45%{transform:scale(1.08);animation-timing-function:cubic-bezier(.4,0,.4,1)}50.8%,100%{transform:scale(1)}}
     16@keyframes qs-ripple{0%,41.7%{opacity:0;transform:scale(1.1);animation-timing-function:cubic-bezier(.2,.6,.3,1)}43.3%{opacity:.5}63.3%,100%{opacity:0;transform:scale(1.7)}}
     17@media (prefers-reduced-motion:reduce){.qs-scan,.qs-dot-top,.qs-dot-bottom,.qs-check,.qs-pop,.qs-ripple{animation:none}}
     18</style>
     19<defs>
     20<clipPath id="qs-tile"><rect width="512" height="512" rx="104"/></clipPath>
     21<clipPath id="qs-check-clip"><path d="M314.1 325.9 343.1 354.8 406.6 273 419.8 321.3 346.9 415.2 285.9 354.1z"/></clipPath>
     22<linearGradient id="qs-trail" x1="0" y1="-96" x2="0" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7961c" stop-opacity="0"/><stop offset="1" stop-color="#f7961c" stop-opacity=".34"/></linearGradient>
     23</defs>
     24<rect width="512" height="512" rx="104" fill="#0e1621"/>
     25<g fill="#f2f5f8">
     26<path d="M96 96h128v128H96zm25.5 25.5v77h77v-77z"/>
     27<path class="qs-dot qs-dot-top" d="M144 144h32v32h-32z"/>
     28<path d="M288 96h128v128H288zm25.5 25.5v77h77v-77z"/>
     29<path class="qs-dot qs-dot-top" d="M336 144h32v32h-32z"/>
     30<path d="M96 288h128v128H96zm25.5 25.5v77h77v-77z"/>
     31<path class="qs-dot qs-dot-bottom" d="M144 336h32v32h-32z"/>
     32</g>
     33<g clip-path="url(#qs-tile)">
     34<circle class="qs-ripple" cx="353" cy="344" r="60" fill="none" stroke="#34c47a" stroke-width="5"/>
     35<g class="qs-scan"><rect x="56" y="-96" width="400" height="96" fill="url(#qs-trail)"/><rect x="56" y="-3" width="400" height="6" rx="3" fill="#f7961c"/></g>
     36</g>
     37<g class="qs-pop"><path class="qs-check" d="M297.2 337.2 345 385 426.1 280.6" pathLength="1" fill="none" stroke="#34c47a" stroke-width="66" stroke-linejoin="round" clip-path="url(#qs-check-clip)"/></g>
     38</svg>
Note: See TracChangeset for help on using the changeset viewer.