Appearance
cube动画
html
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" overflow="hidden" xmlns="http://www.w3.org/2000/svg">
<use href="#cube" x="128" y="320" stroke-width="2" opacity="0.3">
<animate attributeName="stroke" dur="6s" repeatCount="indefinite"
values="#FF9AA2;#FFB7B2;#FFDAC1;#E2F0CB;#B5EAD7;#C7CEEA;#FF9AA2"/>
</use>
<rect width="512" height="512" y="384" fill="url(#fade)"/>
<use href="#cube" x="128" y="128" stroke-width="2">
<animate attributeName="stroke" dur="6s" repeatCount="indefinite"
values="#FF9AA2;#FFB7B2;#FFDAC1;#E2F0CB;#B5EAD7;#C7CEEA;#FF9AA2"/>
</use>
<defs>
<!-- EVERYTHING TOGETHER -->
<g id="cube">
<use href="#cube_outline" stroke-linejoin="round" stroke-width="16" fill="url(#stars)"/>
<use href="#cube_base" stroke-width=".5"/>
<use href="#cube_outline" stroke-linejoin="round" stroke-width="6" stroke="#141417"/>
</g>
<g id="cube_outline">
<path>
<animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;0.5;1"
keySplines="0.8 0.2 0.6 0.9;
0.8 0.2 0.6 0.9;
0.8 0.2 0.6 0.9"
values="M10 64 L128 0 L246 64 L246 192 L128 256 L10 192Z;
M40 20 L216 20 L216 108 L216 236 L40 236 L40 172Z;
M216 20 L40 20 L40 108 L40 236 L216 236 L216 172Z;
M246 64 L128 0 L10 64 L10 192 L128 256 L246 192Z"/>
</path>
</g>
<g id="cube_base">
<path fill="#fff1"> <!-- TOP SIDE -->
<animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1"
keySplines="0.8 0.2 0.6 0.9;
0.8 0.2 0.6 0.9"
values="M10 64 L128 0 L246 64 L128 128Z;
M40 20 L216 20 L216 108 L40 108Z;
M128 0 L246 64 L128 128 L10 64Z"/>
</path>
<path> <!-- LEFT SIDE -->
<animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;0.5;1"
keySplines="0.8 0.2 0.6 0.9;
0.8 0.2 0.6 0.9;
0.8 0.2 0.6 0.9"
values="M10 64 L128 128 L128 256 L10 192Z;
M40 20 L40 108 L40 236 L40 172Z;
M216 20 L216 108 L216 236 L216 172Z;
M246 64 L128 128 L128 256 L246 192Z"/>
<animate attributeName="fill" dur="1.5s" repeatCount="indefinite" keyTimes="0;0.5;0.5;1"
values="#fff0;#fff0;#fff2;#fff2"/>
</path>
<path fill="#407080"> <!-- LEFT SIDE -->
<animate attributeName="d" dur="1.5s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1"
keySplines="0.8 0.2 0.6 0.9;
0.8 0.2 0.6 0.9"
values="M246 64 L128 128 L128 256 L246 192Z;
M216 108 L40 108 L40 236 L216 236Z;
M128 128 L10 64 L10 192 L128 256Z"/>
<animate attributeName="fill" dur="1.5s" repeatCount="indefinite" keyTimes="0;0.5;1"
values="#fff2;#fff1;#fff0"/>
</path>
</g>
<linearGradient id="fade" gradientTransform="rotate(90)">
<stop offset="0" stop-color="#14141700"/>
<stop offset="0.25" stop-color="#141417ff"/>
</linearGradient>
<linearGradient id="sky" gradientTransform="rotate(90)">
<stop offset="0.5" stop-color="#141417"/>
<stop offset="1" stop-color="#40354a"/>
</linearGradient>
<!-- STARS PATTERN -->
<pattern id="stars" x="0" y="0" width="50%" height="50%" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
<rect width="256" height="256" fill="url(#sky)"/>
<use href="#star01" x="24" y="32" fill="white"/>
<use href="#star01" x="64" y="96" fill="#ad9dcb" transform="rotate(90 80 112)"/>
<use href="#star01" x="224" y="102" fill="#ad9dcb"/>
<use href="#star01" x="192" y="112" fill="#E0E8EA" transform="rotate(90 80 112)"/>
<use href="#star02" x="16" y="64" fill="#ad9dcb"/>
<use href="#star03" x="96" y="16" fill="#E0E8EA"/>
<use href="#star04" x="64" y="64" fill="white"/>
<use href="#star04" x="8" y="16" fill="#ad9dcb"/>
<use href="#star04" x="110" y="96" fill="#E0E8EA"/>
<use href="#star02" x="160" y="24" fill="#ad9dcb"/>
<use href="#star03" x="196" y="60" fill="#E0E8EA"/>
<use href="#star04" x="64" y="212" fill="white"/>
<use href="#star04" x="218" y="216" fill="#ad9dcb"/>
<use href="#star03" x="228" y="220" fill="#E0E8EA"/>
<use href="#star02" x="140" y="128" fill="#ad9dcb"/>
<use href="#star03" x="24" y="140" fill="#E0E8EA"/>
<use href="#star04" x="95" y="160" fill="white"/>
<use href="#star04" x="180" y="128" fill="#ad9dcb"/>
<use href="#star03" x="200" y="136" fill="#E0E8EA"/>
<use href="#star10" x="120" y="120" stroke="#E0E8EA"/>
<use href="#star11" x="48" y="64" stroke="#ad9dcb"/>
</pattern>
<path id="star01" transform="scale(0.5)">
<animate attributeName="d" dur="3s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9"
values="M16 0 Q16 16 24 16 Q16 16 16 32 Q16 16 8 16 Q16 16 16 0Z;
M16 8 Q16 16 32 16 Q16 16 16 24 Q16 16 0 16 Q16 16 16 8Z;
M16 0 Q16 16 24 16 Q16 16 16 32 Q16 16 8 16 Q16 16 16 0Z"/>
</path>
<circle id="star02">
<animate attributeName="r" dur="3s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9"
values="0;2;0"/>
</circle>
<circle id="star03">
<animate attributeName="r" dur="6s" repeatCount="indefinite" calcMode="spline"
keyTimes="0;0.5;1" keySplines="0.8 0.2 0.6 0.9; 0.8 0.2 0.6 0.9"
values="3;1;3"/>
</circle>
<circle id="star04" r="1"/>
<path id="star10" stroke-width="2">
<animate attributeName="d" dur="5s" repeatCount="indefinite"
keyTimes="0;0.90;0.97;1"
keySplines="0 0.4 1 0.2; 0 0.4 1 0.2; 0 0.4 1 0.2"
values="M64 0 L64 0Z; M64 0 L64 0Z; M48 12 L0 48Z; M0 48 L0 48Z"/>
<animate attributeName="opacity" dur="5s" repeatCount="indefinite"
keyTimes="0;0.90;0.97;1"
values="1; 1; 0.6; 0"/>
</path>
<path id="star11" stroke-width="3">
<animate attributeName="d" dur="6s" repeatCount="indefinite" delay="3s"
keyTimes="0;0.90;0.95;1"
keySplines="0 0.4 1 0.2; 0 0.4 1 0.2; 0 0.4 1 0.2"
values="M64 0 L64 0Z; M64 0 L64 0Z; M48 12 L0 48Z; M0 48 L0 48Z"/>
<animate attributeName="opacity" dur="6s" repeatCount="indefinite" delay="3s"
keyTimes="0;0.90;0.95;1"
values="1; 1; 0.6; 0"/>
</path>
</defs>
</svg>