人が生きていくためにはデジタルなんて無くてもいいという事は重々承知なのだが、ITにどっぷりつかっている自分がなんとなくリア充に感じている、ユゲタです。
もはや、今後未来において、ITが無くなるなんてことは有り得ないし、ITによって、想像もできない世界になる事も否めません。
でも、人は衣食住があれば生きていけるし、それだけで十分に幸せも得られます。
ITは生活必需品ですが、無くても生きていけるというのは矛盾してますね。
エンタメ要素が大きいですが、IoTのように、より生活が便利に快適になる事を体験すると、人は過去に戻りづらくなるんでしょうね。
そんな過去にたくさんあったけど最近あまりみなくなった「座布団」をアニメーションにしたのが今回のSVG素材です。
ソース
<svg class="zabuton" width="64px" height="64px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<style>
svg.zabuton .square-scale{
transform-origin:32px 32px;
transform:scale(0.6);
}
svg.zabuton .square{
transform-origin:32px 32px;
animation: roll 0.5s linear infinite;
}
svg.zabuton .shadow{
transform-origin: 32px 78px;
animation: shadow 0.5s linear infinite;
}
@keyframes roll {
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes shadow {
0%, 100% {
transform: scale(0.9, 1);
}
50% {
transform: scale(1.1, 1);
}
}
</style>
<g class="square-scale">
<ellipse class="shadow" cx="32" cy="76" rx="38" ry="4" fill="rgba(0,0,0,0.3)" />
<path class="square" fill="#1A6844">
<animate attributeName="d" bugin="0.25s" dur="0.5s" repeatCount="indefinite" values="
M0,4 Q0,0 4,0 L60,0 Q64,0 64,4 L64,60 Q64,64 60,64 L4,64 Q0,64 0,60 z;
M0,4 Q0,0 4,0 L60,0 Q64,0 64,4 L64,20 Q56,56 20,64 L4,64 Q0,64 0,60 z;
M0,4 Q0,0 4,0 L60,0 Q64,0 64,4 L64,60 Q64,64 60,64 L4,64 Q0,64 0,60 z;
"/>
</path>
</g>
</svg>
See the Pen svg-loading square-zabuton by YugetaKoji (@geta1972) on CodePen.
0 件のコメント:
コメントを投稿