ホームページ楽々講座249

■249.svg

<svg> <g transform="translate(160 150)"> <circle id="circle1" style="fill:#3333ff;stroke-width:1;opacity:.8" cx="0" cy="0" r="30"> <animateTransform attributeName="transform" type="rotate" values="0;360" additive="sum" dur="3s" repeatDur="indefinite"/> <animateTransform attributeName="transform" type="scale" values="4 1;0.5 1;4 1" additive="sum" dur="4s" repeatDur="indefinite"/> </circle> <circle id="circle2" style="fill:#99cc66;stroke-width:3;opacity:.7" cx="0" cy="0" r="30"> <animateTransform attributeName="transform" type="rotate" values="0;-360" additive="sum" dur="12s" repeatDur="indefinite"/> <animateTransform attributeName="transform" type="rotate" values="0;30;-40;190;90;170;320;290;210;170;0" additive="sum" dur="7s" repeatDur="indefinite"/> <animateTransform attributeName="transform" type="scale" values="1 5;3 0.5;1 5" additive="sum" dur="3s" repeatDur="indefinite"/> </circle> <circle id="circle3" style="fill:#ccff33;stroke-width:3;opacity:.5" cx="0" cy="0" r="30"> <animateTransform attributeName="transform" type="rotate" values="0;-360" additive="sum" dur="12s" repeatDur="indefinite"/> <animateTransform attributeName="transform" type="rotate" values="0;20;-30;190;90;170;220;190;210;170;0" additive="sum" dur="7s" repeatDur="indefinite"/> <animateTransform attributeName="transform" type="scale" values="1 5;3 0.5;1 5" additive="sum" dur="3s" repeatDur="indefinite"/> </circle> <circle id="circle4" style="fill:#6666ff;stroke-width:3;opacity:.7" cx="0" cy="0" r="20"> <animateTransform attributeName="transform" type="rotate" values="0;-360" additive="sum" dur="12s" repeatDur="indefinite"/> <animateTransform attributeName="transform" type="rotate" values="0;30;-30;190;90;70;120;290;110;170;0" additive="sum" dur="8s" repeatDur="indefinite"/> <animateTransform attributeName="transform" type="scale" values="4 1;0.5 1;4 1" additive="sum" dur="3s" repeatDur="indefinite"/> </circle> </g> </svg>