glance.animation

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/glance.animation/s.svg

|M0)みたいtakker.icon

ﾀﾁｬﾊﾞﾗｻﾝ...cFQ2f7LRuLYP.icon

code:s.svg

<style>

@keyframes skewAnimation {

0% { transform: translate(-400px, 0) skew(-20deg, 30deg); }

1% { transform: translate(-400px, 0) skew(-20deg, 30deg); }

2% { transform: translate(-400px, 0) skew(-20deg, 30deg); }

3% { transform: translate(-400px, 0) skew(-20deg, 30deg); }

4% { transform: translate(-400px, 0) skew(-20deg, 30deg); }

45% { transform: translate(-140px, 0) skew(-20deg, 30deg); }

46% { transform: translate(-140px, 0) skew(-20deg, 30deg); }

48% { transform: translate(-140px, 0) skew(-20deg, 30deg); }

49% { transform: translate(-140px, 0) skew(-20deg, 30deg); }

50% { transform: translate(-140px, 0) skew(-20deg, 30deg); }

51% { transform: translate(-140px, 0) skew(-20deg, 30deg); }

52% { transform: translate(-120px, 0px) skew(-20deg, 30deg); }

52.4% { transform: translate(-140px, 20px) skew(-20deg, 30deg); }

52.8% { transform: translate(-120px, 3px) skew(-20deg, 30deg); }

53.2% { transform: translate(-140px, 20px) skew(-20deg, 30deg); }

53.7% { transform: translate(-140px, 0px) skew(-20deg, 30deg); }

62% { transform: translate(-400px, 0) skew(-20deg, 30deg); }

100% { transform: translate(-500px, 0) skew(-20deg, 30deg); }

}

#dots {

animation: skewAnimation 10s linear infinite;

transform-origin: top left; /* Specify the origin of skew */

}

</style>

</g>

</svg>

チラ見

変更takker.icon

不要そうなkeyframesを削った

skew変形を外に取り出した

SVG transformだとskew()がないので、skewX() skewY()で代替した

変形操作の都合で、もう一つg要素を挟んで<g id="dots"><g transform="skewX(-20) skewY(30)">...</g></g>とする必要があった

<g id="dots" transform="skewX(-20) skewY(30)">...</g>だと歪まない。おそらくCSS transformに上書きされるため

<g transform="skewX(-20) skewY(30)"><g id="dots">...</g></g>にするとどうなるかは読者の課題とする

背景色をsvgに直接指定した

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/glance.animation/t.svg

code:t.svg

<style>

svg {

background: #f6f6f6;

}

@keyframes skewAnimation {

0% { transform: translate(-400px, 0); }

45% { transform: translate(-140px, 0); }

51% { transform: translate(-140px, 0); }

52% { transform: translate(-120px, 0px); }

52.4% { transform: translate(-140px, 20px); }

52.8% { transform: translate(-120px, 3px); }

53.2% { transform: translate(-140px, 20px); }

53.7% { transform: translate(-140px, 0px); }

62% { transform: translate(-400px, 0); }

100% { transform: translate(-500px, 0); }

}

#dots {

animation: skewAnimation 10s linear infinite;

transform-origin: top left; /* Specify the origin of skew */

}

</style>

</g>

</svg>

なんか改造されているのに気づいたcFQ2f7LRuLYP.icon

すごい

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/glance.animation/s3.svg

code:s3.svg

<style>

svg {

background: #f6f6f6;

}

@keyframes skewAnimation {

0% { transform: translate(-400px, 0); }

20% { transform: translate(-300px, 0); }

21% { transform: translate(-300px, 0); }

22% { transform: translate(-300px, 0); }

23% { transform: translate(-300px, 0); }

24% { transform: translate(-300px, 0); }

25% { transform: translate(-300px, 0); }

26% { transform: translate(-300px, 0); }

27% { transform: translate(-300px, 0); }

47% { transform: translate(-130px, 0); }

48% { transform: translate(-130px, 0); }

49% { transform: translate(-130px, 0); }

50% { transform: translate(-130px, 0); }

51% { transform: translate(-130px, 0); }

52% { transform: translate(-110px, 0px); }

53.4% { transform: translate(-130px, 20px); }

53.8% { transform: translate(-110px, 3px); }

54.2% { transform: translate(-130px, 20px); }

54.7% { transform: translate(-130px, 0px); }

65% { transform: translate(-400px, 0); }

100% { transform: translate(-500px, 0); }

}

#dots {

animation: skewAnimation 6s linear infinite;

transform-origin: top left; /* Specify the origin of skew */

}

</style>

</g>

</svg>

2023-08-15 14:14

2023-08-16 21:45