123 lines
3.4 KiB
JavaScript
123 lines
3.4 KiB
JavaScript
|
import { logoPath } from 'shared/components/logos/freesewing.mjs'
|
||
|
|
import { useTranslation } from 'next-i18next'
|
||
|
|
|
||
|
|
export const ns = ['commom']
|
||
|
|
|
||
|
|
export const FreeSewingAnimation = ({ className = 'w-full', stroke = 0.3 }) => {
|
||
|
|
const { t } = useTranslation(ns)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 25 25"
|
||
|
|
strokeWidth={stroke}
|
||
|
|
stroke="currentColor"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
className={className + ' icon'}
|
||
|
|
stroke="currentColor"
|
||
|
|
>
|
||
|
|
<animat
|
||
|
|
attributeName="viewBox"
|
||
|
|
from="0 0 25 25"
|
||
|
|
to="0 10 25 7"
|
||
|
|
begin="1.8s"
|
||
|
|
dur="0.3s"
|
||
|
|
fill="freeze"
|
||
|
|
/>
|
||
|
|
<clipPath id="logo">
|
||
|
|
<path d={logoPath} stroke="none" fill="none" transform="translate(-0.5,0)" />
|
||
|
|
</clipPath>
|
||
|
|
<g>
|
||
|
|
<g>
|
||
|
|
<path
|
||
|
|
d="M 20 0 l -10,1 l 10 1 l -11 1 l 13 1 l -15 1 l 16 1 l -16 1 l 15 1 l -15 1 l 16 1 l -16 1 l 17 1 l-16 1 l15 1 l -18 1.3 l 19 0.2 l -15 1 l 6 0.5 l -5 0.5 l 5 0 l 9 -0.5 l -3 1.2 l 2 1 l -3 0 l 2 2 l -3 -0.5 l 1 2 l -3 -1 l1 2 l-3 -1 l -1.5 1.5 l-2 -1.5 l-3 1 l-5 -7 l 2 -2 l-3 -1 l 2 -2"
|
||
|
|
clipPath="url(#logo)"
|
||
|
|
strokeOpacity="1"
|
||
|
|
strokeDasharray="330 400"
|
||
|
|
>
|
||
|
|
<animate attributeName="stroke-dashoffset" from="330" to="0" dur="0.6s" fill="freeze" />
|
||
|
|
<animate
|
||
|
|
attributeName="stroke-width"
|
||
|
|
begin="0.5s"
|
||
|
|
from="0.3"
|
||
|
|
to="3"
|
||
|
|
dur="0.4s"
|
||
|
|
fill="freeze"
|
||
|
|
/>
|
||
|
|
<animateTransform
|
||
|
|
attributeName="transform"
|
||
|
|
attributeType="XLM"
|
||
|
|
type="scale"
|
||
|
|
begin="0.5s"
|
||
|
|
from="1"
|
||
|
|
to="0.3"
|
||
|
|
dur="0.2s"
|
||
|
|
fill="freeze"
|
||
|
|
/>
|
||
|
|
</path>
|
||
|
|
<animateTransform
|
||
|
|
attributeName="transform"
|
||
|
|
attributeType="XLM"
|
||
|
|
type="translate"
|
||
|
|
begin="0.5s"
|
||
|
|
from="0,0"
|
||
|
|
to="8.5,2"
|
||
|
|
dur="0.2s"
|
||
|
|
fill="freeze"
|
||
|
|
/>
|
||
|
|
</g>
|
||
|
|
<text
|
||
|
|
x="12.5"
|
||
|
|
y="14"
|
||
|
|
stroke="none"
|
||
|
|
fill="currentColor"
|
||
|
|
textAnchor="middle"
|
||
|
|
opacity="0"
|
||
|
|
style={{
|
||
|
|
fontSize: 4.2,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
letterSpacing: '-0.007rem',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
FreeSewing
|
||
|
|
<animate attributeName="opacity" begin="0.7s" from="0" to="1" dur="0.3s" fill="freeze" />
|
||
|
|
</text>
|
||
|
|
<text
|
||
|
|
x="10.5"
|
||
|
|
y="15.25"
|
||
|
|
stroke="none"
|
||
|
|
fill="currentColor"
|
||
|
|
textAnchor="middle"
|
||
|
|
opacity="0"
|
||
|
|
style={{
|
||
|
|
fontSize: 1.4,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
letterSpacing: '-0.005rem',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t('common:slogan1')}
|
||
|
|
<animate attributeName="opacity" begin="0.9s" from="0" to="1" dur="0.3s" fill="freeze" />
|
||
|
|
</text>
|
||
|
|
<text
|
||
|
|
x="14.5"
|
||
|
|
y="16.5"
|
||
|
|
stroke="none"
|
||
|
|
fill="currentColor"
|
||
|
|
textAnchor="middle"
|
||
|
|
opacity="0"
|
||
|
|
style={{
|
||
|
|
fontSize: 1.4,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
letterSpacing: '-0.005rem',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t('common:slogan2')}
|
||
|
|
<animate attributeName="opacity" begin="1.2s" from="0" to="1" dur="0.2s" fill="freeze" />
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
)
|
||
|
|
}
|