<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>SVG アーカイブ - HP作成：inada</title>
	<atom:link href="https://inada.ico21lab.com/category/lightningpro/svg/feed/" rel="self" type="application/rss+xml" />
	<link>https://inada.ico21lab.com/category/lightningpro/svg/</link>
	<description>HP作成と求人のお手伝い</description>
	<lastBuildDate>Fri, 06 Feb 2026 03:09:44 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.4</generator>

<image>
	<url>https://inada.ico21lab.com/wp-content/uploads/2026/08/cropped-inadalogo-32x32.webp</url>
	<title>SVG アーカイブ - HP作成：inada</title>
	<link>https://inada.ico21lab.com/category/lightningpro/svg/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>画像をsvgで動かす</title>
		<link>https://inada.ico21lab.com/memo-54/</link>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Tue, 20 Jan 2026 07:51:22 +0000</pubDate>
				<category><![CDATA[SVG]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=2107</guid>

					<description><![CDATA[<p>投稿 <a href="https://inada.ico21lab.com/memo-54/">画像をsvgで動かす</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<svg width="600" height="150" xmlns="http://www.w3.org/2000/svg">
  <!-- 画像1 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant1.webp" 
         x="0" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="0s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="0s" fill="freeze"/>
  </image>

  <!-- 画像2 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant2.webp" 
         x="120" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="1s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="1s" fill="freeze"/>
  </image>

  <!-- 画像3 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant3.webp" 
         x="240" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="2s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="2s" fill="freeze"/>
  </image>

  <!-- 画像4 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant4.webp" 
         x="360" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="3s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="3s" fill="freeze"/>
  </image>

  <!-- 画像5 -->
  <image href="https://inada.ico21lab.com/wp-content/uploads/2025/12/plant5.webp" 
         x="480" y="150" width="100" height="100" opacity="0">
    <animate attributeName="y" from="150" to="0" dur="1s" begin="4s" fill="freeze"/>
    <animate attributeName="opacity" from="0" to="1" dur="1s" begin="4s" fill="freeze"/>
  </image>
</svg>

<p>投稿 <a href="https://inada.ico21lab.com/memo-54/">画像をsvgで動かす</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>svgを使ったアニメーション（css不要）</title>
		<link>https://inada.ico21lab.com/memo-53/</link>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Fri, 16 Jan 2026 08:10:58 +0000</pubDate>
				<category><![CDATA[SVG]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=2080</guid>

					<description><![CDATA[<p>カスタムHTMLブロックにコードを記述する（CSSは不要）</p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-53/">svgを使ったアニメーション（css不要）</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">カスタムHTMLブロックにコードを記述する（CSSは不要）</p>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       sky
  ====================== -->
  <rect x="0" y="0" width="800" height="170" fill="#EAF4FF"/>

  <!-- =====================
       far background : mountains
  ====================== -->
  <g opacity="0.4">
    <polygon points="0,120 120,60 240,120" fill="#BFD6C5"/>
    <polygon points="200,120 360,50 520,120" fill="#C7DECD"/>
    <polygon points="480,120 640,70 800,120" fill="#BFD6C5"/>
    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-800 0"
      dur="60s"
      repeatCount="indefinite"/>
  </g>

  <g opacity="0.4">
    <polygon points="800,120 920,60 1040,120" fill="#BFD6C5"/>
    <polygon points="1000,120 1160,50 1320,120" fill="#C7DECD"/>
  </g>

  <!-- =====================
       mid background : trees
  ====================== -->
  <g opacity="0.7">
    <circle cx="100" cy="120" r="18" fill="#6FAF8E"/>
    <rect x="96" y="120" width="8" height="20" fill="#5B8C6E"/>

    <circle cx="260" cy="120" r="20" fill="#78B999"/>
    <rect x="256" y="120" width="8" height="22" fill="#5B8C6E"/>

    <circle cx="420" cy="120" r="18" fill="#6FAF8E"/>
    <rect x="416" y="120" width="8" height="20" fill="#5B8C6E"/>

    <circle cx="580" cy="120" r="22" fill="#78B999"/>
    <rect x="576" y="120" width="8" height="24" fill="#5B8C6E"/>

    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-800 0"
      dur="30s"
      repeatCount="indefinite"/>
  </g>

  <g opacity="0.7">
    <circle cx="900" cy="120" r="20" fill="#78B999"/>
    <rect x="896" y="120" width="8" height="22" fill="#5B8C6E"/>
  </g>

  <!-- =====================
       ground & road
  ====================== -->
  <rect x="0" y="150" width="800" height="20" fill="#7EC850"/>
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite"/>
  </rect>

  <!-- =====================
       car (always centered)
  ====================== -->
  <defs>
    <style>
      .car-color { fill:#E94E77; }
    </style>
  </defs>

  <!-- 中央アンカー -->
  <g transform="translate(400 0)">
    <!-- 車幅120pxの半分を戻す -->
    <g id="car" transform="translate(-60 0)">

      <!-- shadow -->
      <ellipse cx="60" cy="165" rx="42" ry="6" fill="#000" opacity="0.18"/>

      <!-- exhaust -->
      <circle r="7" fill="#999" opacity="0">
        <animate attributeName="cx" values="0;-35" dur="1.4s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="140;115" dur="1.4s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.7;0" dur="1.4s" repeatCount="indefinite"/>
      </circle>

      <circle r="5" fill="#aaa" opacity="0">
        <animate attributeName="cx" values="0;-45" dur="1.7s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="140;120" dur="1.7s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.6;0" dur="1.7s" repeatCount="indefinite"/>
      </circle>

      <!-- body -->
      <rect x="0" y="120" width="120" height="30" rx="8" class="car-color"/>
      <rect x="20" y="95" width="60" height="30" rx="8" class="car-color"/>

      <!-- windows -->
      <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
      <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

      <!-- wheel back -->
      <g>
        <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
        <line x1="30" y1="145" x2="30" y2="165" stroke="#fff" stroke-width="1"/>
        <line x1="20" y1="155" x2="40" y2="155" stroke="#fff" stroke-width="1"/>
        <line x1="23" y1="148" x2="37" y2="162" stroke="#fff" stroke-width="1"/>
        <line x1="23" y1="162" x2="37" y2="148" stroke="#fff" stroke-width="1"/>
        <line x1="26" y1="146" x2="34" y2="164" stroke="#fff" stroke-width="1"/>
        <line x1="26" y1="164" x2="34" y2="146" stroke="#fff" stroke-width="1"/>
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 30 155"
          to="360 30 155"
          dur="0.8s"
          repeatCount="indefinite"/>
      </g>

      <!-- wheel front -->
      <g>
        <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
        <line x1="90" y1="145" x2="90" y2="165" stroke="#fff" stroke-width="1"/>
        <line x1="80" y1="155" x2="100" y2="155" stroke="#fff" stroke-width="1"/>
        <line x1="83" y1="148" x2="97" y2="162" stroke="#fff" stroke-width="1"/>
        <line x1="83" y1="162" x2="97" y2="148" stroke="#fff" stroke-width="1"/>
        <line x1="86" y1="146" x2="94" y2="164" stroke="#fff" stroke-width="1"/>
        <line x1="86" y1="164" x2="94" y2="146" stroke="#fff" stroke-width="1"/>
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 90 155"
          to="360 90 155"
          dur="0.8s"
          repeatCount="indefinite"/>
      </g>

    </g>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate
      attributeName="x"
      from="800"
      to="-40"
      dur="1s"
      repeatCount="indefinite" />
  </rect>

  <!-- car : always centered -->
  <g transform="translate(400 0)">
    <g id="car" transform="translate(-60 0)">

      <!-- car body -->
      <rect x="0" y="120" width="120" height="30" rx="8" fill="#4A90E2"/>
      <rect x="20" y="95" width="60" height="30" rx="8" fill="#4A90E2"/>

      <!-- windows -->
      <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
      <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

      <!-- wheels -->
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>

    </g>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- cloud -->
  <ellipse cy="60" rx="40" ry="16" fill="#EAEAEA">
    <animate
      attributeName="cx"
      from="-40"
      to="840"
      dur="12s"
      repeatCount="indefinite"/>
  </ellipse>

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate
      attributeName="x"
      from="800"
      to="-40"
      dur="1s"
      repeatCount="indefinite"/>
  </rect>

  <!-- car + shadow : always centered -->
  <g transform="translate(400 0)">

    <!-- shadow -->
    <ellipse cx="0" cy="160" rx="50" ry="6" fill="rgba(0,0,0,0.15)"/>

    <!-- car -->
    <g id="car" transform="translate(-60 0)">

      <!-- car body -->
      <rect x="0" y="120" width="120" height="30" rx="8" fill="#4A90E2"/>
      <rect x="20" y="95" width="60" height="30" rx="8" fill="#4A90E2"/>

      <!-- windows -->
      <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
      <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

      <!-- wheels -->
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>

    </g>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- color settings -->
  <defs>
    <style>
      .car-color { fill:#E94E77; }
    </style>
  </defs>

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite" />
  </rect>

  <!-- car -->
  <g id="car">

    <!-- exhaust smoke BIG -->
    <circle r="7" fill="#999" opacity="0">
      <animate attributeName="cx"
               values="0;-35"
               dur="1.4s"
               repeatCount="indefinite"/>
      <animate attributeName="cy"
               values="140;115"
               dur="1.4s"
               repeatCount="indefinite"/>
      <animate attributeName="opacity"
               values="0;0.7;0"
               dur="1.4s"
               repeatCount="indefinite"/>
    </circle>

    <circle r="5" fill="#aaa" opacity="0">
      <animate attributeName="cx"
               values="0;-45"
               dur="1.7s"
               repeatCount="indefinite"/>
      <animate attributeName="cy"
               values="140;120"
               dur="1.7s"
               repeatCount="indefinite"/>
      <animate attributeName="opacity"
               values="0;0.6;0"
               dur="1.7s"
               repeatCount="indefinite"/>
    </circle>

    <!-- car body -->
    <rect x="0" y="120" width="120" height="30" rx="8" class="car-color"/>
    <rect x="20" y="95" width="60" height="30" rx="8" class="car-color"/>

    <!-- windows -->
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

    <!-- wheel back -->
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 155"
        to="360 30 155"
        dur="0.6s"
        repeatCount="indefinite"
        additive="sum" />
    </g>

    <!-- wheel front -->
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 155"
        to="360 90 155"
        dur="0.6s"
        repeatCount="indefinite"
        additive="sum" />
    </g>

    <!-- car move -->
    <animateTransform
      attributeName="transform"
      type="translate"
      from="-150 0"
      to="850 0"
      dur="4s"
      repeatCount="indefinite" />

  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite" />
  </rect>

  <!-- car -->
  <g id="car">

    <!-- exhaust smoke -->
    <circle r="7" fill="#999" opacity="0">
      <animate attributeName="cx" values="0;-35" dur="1.4s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;115" dur="1.4s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;0.7;0" dur="1.4s" repeatCount="indefinite"/>
    </circle>

    <circle r="5" fill="#aaa" opacity="0">
      <animate attributeName="cx" values="0;-45" dur="1.7s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;120" dur="1.7s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;0.6;0" dur="1.7s" repeatCount="indefinite"/>
    </circle>

    <!-- car body (GREEN) -->
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#4CAF50"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#4CAF50"/>

    <!-- windows -->
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

    <!-- wheel back -->
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 155"
        to="360 30 155"
        dur="0.6s"
        repeatCount="indefinite" />
    </g>

    <!-- wheel front -->
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 155"
        to="360 90 155"
        dur="0.6s"
        repeatCount="indefinite" />
    </g>

    <!-- car move -->
    <animateTransform
      attributeName="transform"
      type="translate"
      from="-150 0"
      to="850 0"
      dur="4s"
      repeatCount="indefinite" />

    <!-- suspension -->
    <animateTransform
      attributeName="transform"
      type="translate"
      values="0 0; 0 2; 0 0"
      dur="0.4s"
      repeatCount="indefinite"
      additive="sum" />

  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite" />
  </rect>

  <!-- car 1 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#4A90E2"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#4A90E2"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="0s"/>
  </g>

  <!-- car 2 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#E94E77"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#E94E77"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#FFE4E6"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#FFE4E6"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="0.8s"/>
  </g>

  <!-- car 3 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#F5A623"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#F5A623"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#FFF6E5"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#FFF6E5"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="1.6s"/>
  </g>

  <!-- car 4 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#50E3C2"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#50E3C2"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFFDF9"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFFDF9"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="2.4s"/>
  </g>

  <!-- car 5 -->
  <g>
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#B552E5"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#B552E5"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#EADFFF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#EADFFF"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4s" repeatCount="indefinite" begin="3.2s"/>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ground -->
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <!-- road line -->
  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite" />
  </rect>

  <!-- car 1: 青、大きめ、速め -->
  <g transform="scale(1.0)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#4A90E2"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#4A90E2"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="3.8s" repeatCount="indefinite" begin="0s"/>
  </g>

  <!-- car 2: ピンク、少し小さめ、少し遅め -->
  <g transform="scale(0.95)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#E94E77"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#E94E77"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#FFE4E6"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#FFE4E6"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4.0s" repeatCount="indefinite" begin="0.6s"/>
  </g>

  <!-- car 3: オレンジ、中サイズ、標準速度 -->
  <g transform="scale(0.9)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#F5A623"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#F5A623"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#FFF6E5"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#FFF6E5"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4.2s" repeatCount="indefinite" begin="1.2s"/>
  </g>

  <!-- car 4: 緑、水色寄り、小さめ、少し遅め -->
  <g transform="scale(0.85)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#50E3C2"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#50E3C2"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFFDF9"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFFDF9"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4.4s" repeatCount="indefinite" begin="1.8s"/>
  </g>

  <!-- car 5: 紫、奥に小さめ、遅め -->
  <g transform="scale(0.8)">
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#B552E5"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#B552E5"/>
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#EADFFF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#EADFFF"/>
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 30 155" to="360 30 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#ffffff" stroke-width="2"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#ffffff" stroke-width="2"/>
      <animateTransform attributeName="transform" type="rotate"
                        from="0 90 155" to="360 90 155"
                        dur="0.6s" repeatCount="indefinite" additive="sum"/>
    </g>
    <animateTransform attributeName="transform" type="translate"
                      from="-150 0" to="850 0"
                      dur="4.6s" repeatCount="indefinite" begin="2.4s"/>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       sky
  ====================== -->
  <rect x="0" y="0" width="800" height="170" fill="#EAF4FF"/>

  <!-- =====================
       far background : mountains
  ====================== -->
  <g opacity="0.4">
    <polygon points="0,120 120,60 240,120" fill="#BFD6C5"/>
    <polygon points="200,120 360,50 520,120" fill="#C7DECD"/>
    <polygon points="480,120 640,70 800,120" fill="#BFD6C5"/>

    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-800 0"
      dur="60s"
      repeatCount="indefinite"/>
  </g>

  <g opacity="0.4">
    <polygon points="800,120 920,60 1040,120" fill="#BFD6C5"/>
    <polygon points="1000,120 1160,50 1320,120" fill="#C7DECD"/>
  </g>

  <!-- =====================
       mid background : trees
  ====================== -->
  <g opacity="0.7">
    <circle cx="100" cy="120" r="18" fill="#6FAF8E"/>
    <rect x="96" y="120" width="8" height="20" fill="#5B8C6E"/>

    <circle cx="260" cy="120" r="20" fill="#78B999"/>
    <rect x="256" y="120" width="8" height="22" fill="#5B8C6E"/>

    <circle cx="420" cy="120" r="18" fill="#6FAF8E"/>
    <rect x="416" y="120" width="8" height="20" fill="#5B8C6E"/>

    <circle cx="580" cy="120" r="22" fill="#78B999"/>
    <rect x="576" y="120" width="8" height="24" fill="#5B8C6E"/>

    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-800 0"
      dur="30s"
      repeatCount="indefinite"/>
  </g>

  <g opacity="0.7">
    <circle cx="900" cy="120" r="20" fill="#78B999"/>
    <rect x="896" y="120" width="8" height="22" fill="#5B8C6E"/>
  </g>

  <!-- =====================
       ground & road
  ====================== -->
  <rect x="0" y="150" width="800" height="20" fill="#7EC850"/>
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite"/>
  </rect>

  <!-- =====================
       car (centered & fixed)
  ====================== -->

  <defs>
    <style>
      .car-color { fill:#E94E77; }
    </style>
  </defs>

  <!-- 中央配置 -->
  <g id="car" transform="translate(340 0)">

    <!-- shadow -->
    <ellipse cx="60" cy="165" rx="42" ry="6"
             fill="#000"
             opacity="0.18"/>

    <!-- exhaust -->
    <circle r="7" fill="#999" opacity="0">
      <animate attributeName="cx" values="0;-35" dur="1.4s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;115" dur="1.4s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;0.7;0" dur="1.4s" repeatCount="indefinite"/>
    </circle>

    <circle r="5" fill="#aaa" opacity="0">
      <animate attributeName="cx" values="0;-45" dur="1.7s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;120" dur="1.7s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0;0.6;0" dur="1.7s" repeatCount="indefinite"/>
    </circle>

    <!-- body -->
    <rect x="0" y="120" width="120" height="30" rx="8" class="car-color"/>
    <rect x="20" y="95" width="60" height="30" rx="8" class="car-color"/>

    <!-- windows -->
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

    <!-- wheel back -->
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>

      <line x1="30" y1="145" x2="30" y2="165" stroke="#fff" stroke-width="1"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#fff" stroke-width="1"/>
      <line x1="23" y1="148" x2="37" y2="162" stroke="#fff" stroke-width="1"/>
      <line x1="23" y1="162" x2="37" y2="148" stroke="#fff" stroke-width="1"/>
      <line x1="26" y1="146" x2="34" y2="164" stroke="#fff" stroke-width="1"/>
      <line x1="26" y1="164" x2="34" y2="146" stroke="#fff" stroke-width="1"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 155"
        to="360 30 155"
        dur="0.8s"
        repeatCount="indefinite"/>
    </g>

    <!-- wheel front -->
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>

      <line x1="90" y1="145" x2="90" y2="165" stroke="#fff" stroke-width="1"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#fff" stroke-width="1"/>
      <line x1="83" y1="148" x2="97" y2="162" stroke="#fff" stroke-width="1"/>
      <line x1="83" y1="162" x2="97" y2="148" stroke="#fff" stroke-width="1"/>
      <line x1="86" y1="146" x2="94" y2="164" stroke="#fff" stroke-width="1"/>
      <line x1="86" y1="164" x2="94" y2="146" stroke="#fff" stroke-width="1"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 155"
        to="360 90 155"
        dur="0.8s"
        repeatCount="indefinite"/>
    </g>

  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       SKY (day → evening → night)
  ====================== -->
  <rect x="0" y="0" width="800" height="170">
    <animate attributeName="fill"
      values="#EAF4FF;#FFD6A5;#0F172A;#EAF4FF"
      dur="30s"
      repeatCount="indefinite"/>
  </rect>

  <!-- =====================
       FAR BACKGROUND
  ====================== -->
  <g opacity="0.45">
    <polygon points="0,120 160,60 320,120" fill="#BFD6C5"/>
    <polygon points="320,120 480,50 640,120" fill="#C7DECD"/>
    <polygon points="640,120 800,70 960,120" fill="#BFD6C5"/>
    <animateTransform
      attributeName="transform"
      type="translate"
      from="0 0"
      to="-320 0"
      dur="20s"
      repeatCount="indefinite"/>
  </g>

  <!-- =====================
       GROUND & ROAD
  ====================== -->
  <rect x="0" y="150" width="800" height="20" fill="#7EC850"/>
  <rect x="0" y="170" width="800" height="6" rx="3" fill="#5FA043"/>

  <rect y="172" height="3" width="40" fill="#ffffff">
    <animate attributeName="x"
             from="800"
             to="-40"
             dur="1s"
             repeatCount="indefinite"/>
  </rect>

  <!-- =====================
       EXHAUST（車直後）
  ====================== -->
  <g>
    <ellipse rx="9" ry="5" fill="#999" opacity="0">
      <animate attributeName="cx" values="350;305" dur="1.6s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="140;112" dur="1.6s" repeatCount="indefinite"/>
      <animate attributeName="cx" values="350;340;355;330" dur="1.6s" repeatCount="indefinite"/>
      <animate attributeName="ry" values="5;4;5" dur="1.6s" repeatCount="indefinite"/>
      <animate attributeName="opacity"
               values="0;0.45;0.75;0.45;0"
               dur="30s"
               repeatCount="indefinite"/>
    </ellipse>

    <ellipse rx="7" ry="4" fill="#aaa" opacity="0">
      <animate attributeName="cx" values="340;290" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="142;118" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="cx" values="340;330;345;320" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="ry" values="4;3;4" dur="2s" repeatCount="indefinite"/>
      <animate attributeName="opacity"
               values="0;0.35;0.6;0.35;0"
               dur="30s"
               repeatCount="indefinite"/>
    </ellipse>
  </g>

  <!-- =====================
       CAR（中央）
  ====================== -->
  <g transform="translate(340 0)">
    <!-- body bob -->
    <animateTransform
      attributeName="transform"
      type="translate"
      values="340 0;340 -1;340 0"
      dur="1.2s"
      repeatCount="indefinite"/>

    <!-- shadow -->
    <ellipse cx="60" cy="165" rx="42" ry="6"
             fill="#000" opacity="0.15">
      <animate attributeName="opacity"
               values="0.12;0.18;0.12"
               dur="0.8s"
               repeatCount="indefinite"/>
    </ellipse>

    <!-- =====================
         HEADLIGHT（夜だけ）
    ====================== -->
    <g opacity="0">
      <!-- 光の円 -->
      <circle cx="120" cy="135" r="6" fill="#FFF6C5"/>
      <!-- 光の広がり -->
      <polygon points="120,130 180,110 180,160" fill="#FFF6C5" opacity="0.5"/>

      <animate attributeName="opacity"
               values="0;0;1;0"
               keyTimes="0;0.4;0.65;1"
               dur="30s"
               repeatCount="indefinite"/>
    </g>

    <!-- body -->
    <rect x="0" y="120" width="120" height="30" rx="8" fill="#E94E77"/>
    <rect x="20" y="95" width="60" height="30" rx="8" fill="#E94E77"/>

    <!-- windows -->
    <rect x="26" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>
    <rect x="52" y="100" width="22" height="18" rx="4" fill="#DFF1FF"/>

    <!-- rear wheel -->
    <g>
      <circle cx="30" cy="155" r="10" fill="#1F2A36"/>
      <line x1="30" y1="145" x2="30" y2="165" stroke="#fff"/>
      <line x1="20" y1="155" x2="40" y2="155" stroke="#fff"/>
      <line x1="23" y1="148" x2="37" y2="162" stroke="#fff"/>
      <line x1="23" y1="162" x2="37" y2="148" stroke="#fff"/>
      <line x1="26" y1="146" x2="34" y2="164" stroke="#fff"/>
      <line x1="26" y1="164" x2="34" y2="146" stroke="#fff"/>
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 155"
        to="360 30 155"
        dur="0.8s"
        repeatCount="indefinite"/>
    </g>

    <!-- front wheel -->
    <g>
      <circle cx="90" cy="155" r="10" fill="#1F2A36"/>
      <line x1="90" y1="145" x2="90" y2="165" stroke="#fff"/>
      <line x1="80" y1="155" x2="100" y2="155" stroke="#fff"/>
      <line x1="83" y1="148" x2="97" y2="162" stroke="#fff"/>
      <line x1="83" y1="162" x2="97" y2="148" stroke="#fff"/>
      <line x1="86" y1="146" x2="94" y2="164" stroke="#fff"/>
      <line x1="86" y1="164" x2="94" y2="146" stroke="#fff"/>
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 155"
        to="360 90 155"
        dur="0.8s"
        repeatCount="indefinite"/>
    </g>
  </g>

</svg>



<svg
  width="100%"
  height="240"
  viewBox="0 0 800 240"
  preserveAspectRatio="xMidYMid meet"
  xmlns="http://www.w3.org/2000/svg">

  <!-- ===== defs ===== -->
  <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0B1D33"/>
      <stop offset="70%" stop-color="#1E3355"/>
      <stop offset="100%" stop-color="#263D5F"/>
    </linearGradient>

    <filter id="smokeBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>

    <radialGradient id="headlightGlow">
      <stop offset="0%" stop-color="#FFF4B0" stop-opacity="0.9"/>
      <stop offset="50%" stop-color="#FFF4B0" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#FFF4B0" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <!-- ===== sky ===== -->
  <rect width="800" height="240" fill="url(#skyGrad)"/>

  <!-- ===== stars ===== -->
  <g fill="#fff">
    <circle cx="80" cy="40" r="1.5">
      <animate attributeName="opacity" values="0.3;1;0.3" dur="3s" repeatCount="indefinite"/>
    </circle>
    <circle cx="160" cy="70" r="1.2">
      <animate attributeName="opacity" values="1;0.2;1" dur="4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="260" cy="35" r="1.8">
      <animate attributeName="opacity" values="0.4;1;0.4" dur="5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="420" cy="50" r="1.4">
      <animate attributeName="opacity" values="1;0.3;1" dur="3.5s" repeatCount="indefinite"/>
    </circle>
    <circle cx="620" cy="30" r="1.6">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="4.5s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- ===== ground ===== -->
  <g fill="none" stroke="#3EDC88" stroke-width="2" stroke-linecap="round">
    <path d="M 0 192 C 25 190, 40 195, 65 193 C 85 191, 105 197, 130 194"/>
    <path d="M 155 195 C 180 191, 200 198, 225 194"/>
    <path d="M 255 196 C 280 192, 305 200, 330 195 C 350 191, 370 197, 395 194"/>
    <path d="M 430 195 C 455 190, 480 199, 505 194"/>
    <path d="M 540 196 C 565 191, 590 200, 615 194 C 640 190, 665 198, 690 195"/>
    <path d="M 720 196 C 745 191, 770 198, 800 194"/>
  </g>

  <!-- ===== car ===== -->
  <g id="car" transform="translate(0 14)">

    <!-- headlight -->
    <ellipse cx="130" cy="142" rx="110" ry="50"
             fill="url(#headlightGlow)"/>

    <!-- smoke -->
    <g filter="url(#smokeBlur)">
      <circle cx="-10" cy="165" r="18" fill="#fff" opacity="0">
        <animate attributeName="cx" values="-10;-70" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="165;90" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="r" values="18;45" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0;0.9;0" dur="2s" repeatCount="indefinite"/>
      </circle>
    </g>

    <!-- body -->
    <rect x="0" y="135" width="120" height="28" rx="8"
          fill="#FFD800" stroke="#222" stroke-width="2"/>
    <rect x="20" y="108" width="60" height="30" rx="8"
          fill="#FFD800" stroke="#222" stroke-width="2"/>

    <!-- windows -->
    <rect x="26" y="112" width="22" height="18" rx="4" fill="#CFE8FF"/>
    <rect x="52" y="112" width="22" height="18" rx="4" fill="#CFE8FF"/>

    <!-- ===== rear wheel ===== -->
    <g>
      <circle cx="30" cy="166" r="12" fill="#ffffff"/>
      <circle cx="30" cy="166" r="6" fill="#6C7A89"/>

      <line x1="30" y1="150" x2="30" y2="182" stroke="#6C7A89" stroke-width="2"/>
      <line x1="14" y1="166" x2="46" y2="166" stroke="#6C7A89" stroke-width="2"/>
      <line x1="19" y1="155" x2="41" y2="177" stroke="#6C7A89" stroke-width="2"/>
      <line x1="19" y1="177" x2="41" y2="155" stroke="#6C7A89" stroke-width="2"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 30 166"
        to="360 30 166"
        dur="0.5s"
        repeatCount="indefinite"
        additive="sum"/>
    </g>

    <!-- ===== front wheel ===== -->
    <g>
      <circle cx="90" cy="166" r="12" fill="#ffffff"/>
      <circle cx="90" cy="166" r="6" fill="#6C7A89"/>

      <line x1="90" y1="150" x2="90" y2="182" stroke="#6C7A89" stroke-width="2"/>
      <line x1="74" y1="166" x2="106" y2="166" stroke="#6C7A89" stroke-width="2"/>
      <line x1="79" y1="155" x2="101" y2="177" stroke="#6C7A89" stroke-width="2"/>
      <line x1="79" y1="177" x2="101" y2="155" stroke="#6C7A89" stroke-width="2"/>

      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 90 166"
        to="360 90 166"
        dur="0.5s"
        repeatCount="indefinite"
        additive="sum"/>
    </g>

    <!-- move -->
    <animateTransform
      attributeName="transform"
      type="translate"
      from="-350 0"
      to="900 0"
      dur="4s"
      repeatCount="indefinite"/>

    <!-- suspension -->
    <animateTransform
      attributeName="transform"
      type="translate"
      values="0 0; 0 2; 0 -1; 0 3; 0 0"
      dur="1.5s"
      repeatCount="indefinite"
      additive="sum"/>

    <!-- tilt -->
    <animateTransform
      attributeName="transform"
      type="rotate"
      values="0 60 160; -1 60 160; 1 60 160; 0 60 160"
      dur="1.5s"
      repeatCount="indefinite"
      additive="sum"/>

  </g>
</svg>



<p class="wp-block-paragraph"></p>
<p>投稿 <a href="https://inada.ico21lab.com/memo-53/">svgを使ったアニメーション（css不要）</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>svgでアイコンを作る</title>
		<link>https://inada.ico21lab.com/memo-55/</link>
		
		<dc:creator><![CDATA[inada]]></dc:creator>
		<pubDate>Fri, 06 Feb 2026 02:58:37 +0000</pubDate>
				<category><![CDATA[SVG]]></category>
		<guid isPermaLink="false">https://inada.ico21lab.com/?p=2203</guid>

					<description><![CDATA[<p>投稿 <a href="https://inada.ico21lab.com/memo-55/">svgでアイコンを作る</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- background -->
  <rect x="0" y="0" width="120" height="120" fill="#FAF8FF"/>

  <!-- cafeteria symbol (bowl + steam only) -->
  <g
    transform="translate(60 72)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.85">

    <!-- bowl -->
    <path d="M-26 0 Q0 22 26 0"/>

    <!-- steam (eyes / expression) -->
    <path d="M-10 -18 Q-4 -28 2 -18">
      <animate
        attributeName="opacity"
        values="0;0.6;0"
        dur="3s"
        repeatCount="indefinite"/>
    </path>

    <path d="M12 -18 Q18 -30 24 -18">
      <animate
        attributeName="opacity"
        values="0;0.6;0"
        dur="3.6s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- bowl + steam face -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.9">

    <!-- bowl (smile / dish) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam (eyes) -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animate
        attributeName="opacity"
        values="0;0.7;0"
        dur="3s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animate
        attributeName="opacity"
        values="0;0.7;0"
        dur="3.6s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- small firework (top-left) -->
  <g
    transform="translate(26 26)"
    stroke="#C6A3F2"
    stroke-width="1.2"
    opacity="0.6">

    <line x1="0" y1="-8" x2="0" y2="-14"/>
    <line x1="0" y1="8" x2="0" y2="14"/>
    <line x1="-8" y1="0" x2="-14" y2="0"/>
    <line x1="8" y1="0" x2="14" y2="0"/>
    <line x1="-6" y1="-6" x2="-11" y2="-11"/>
    <line x1="6" y1="6" x2="11" y2="11"/>
    <line x1="-6" y1="6" x2="-11" y2="11"/>
    <line x1="6" y1="-6" x2="11" y2="-11"/>

    <animate
      attributeName="opacity"
      values="0;0.6;0"
      dur="4.5s"
      repeatCount="indefinite"/>
  </g>

  <!-- bowl + steam face -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.9">

    <!-- bowl (smile / dish) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam (eyes) -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animate
        attributeName="opacity"
        values="0;0.7;0"
        dur="3s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animate
        attributeName="opacity"
        values="0;0.7;0"
        dur="3.6s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       background firework
  ====================== -->
  <g
    transform="translate(28 28)"
    stroke="#F2A1C0"
    stroke-width="1.4"
    fill="none"
    opacity="0">

    <line x1="0" y1="-10" x2="0" y2="-18"/>
    <line x1="0" y1="10" x2="0" y2="18"/>
    <line x1="-10" y1="0" x2="-18" y2="0"/>
    <line x1="10" y1="0" x2="18" y2="0"/>
    <line x1="-7" y1="-7" x2="-13" y2="-13"/>
    <line x1="7" y1="7" x2="13" y2="13"/>
    <line x1="-7" y1="7" x2="-13" y2="13"/>
    <line x1="7" y1="-7" x2="13" y2="-13"/>

    <!-- ゆっくり現れて、長めに滞在 -->
    <animate
      attributeName="opacity"
      values="0;0.7;0.7;0"
      keyTimes="0;0.25;0.75;1"
      dur="6s"
      repeatCount="indefinite"/>
  </g>

  <!-- =====================
       bowl + steam face
  ====================== -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.95">

    <!-- bowl (smile) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam eyes : 常に表示 -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.5s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.9s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       gradient background
  ====================== -->
  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#F6F0FD"/>
      <stop offset="100%" stop-color="#FFFFFF"/>
    </linearGradient>
  </defs>

  <rect
    x="0"
    y="0"
    width="120"
    height="120"
    rx="18"
    fill="url(#bgGrad)"/>

  <!-- =====================
       background firework
  ====================== -->
  <g
    transform="translate(28 28)"
    stroke="#F2A1C0"
    stroke-width="1.4"
    fill="none"
    opacity="0">

    <line x1="0" y1="-10" x2="0" y2="-18"/>
    <line x1="0" y1="10" x2="0" y2="18"/>
    <line x1="-10" y1="0" x2="-18" y2="0"/>
    <line x1="10" y1="0" x2="18" y2="0"/>
    <line x1="-7" y1="-7" x2="-13" y2="-13"/>
    <line x1="7" y1="7" x2="13" y2="13"/>
    <line x1="-7" y1="7" x2="-13" y2="13"/>
    <line x1="7" y1="-7" x2="13" y2="-13"/>

    <animate
      attributeName="opacity"
      values="0;0.7;0.7;0"
      keyTimes="0;0.25;0.75;1"
      dur="6s"
      repeatCount="indefinite"/>
  </g>

  <!-- =====================
       bowl + steam face
  ====================== -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.95">

    <!-- bowl (smile) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam eyes -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.5s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.9s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>



<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg">

  <!-- =====================
       radial gradient background
  ====================== -->
  <defs>
    <radialGradient
      id="bgGrad"
      cx="50%"
      cy="45%"
      r="65%">
      <stop offset="0%" stop-color="#FFFFFF"/>
      <stop offset="70%" stop-color="#F3ECFD"/>
      <stop offset="100%" stop-color="#E8DBFA"/>
    </radialGradient>
  </defs>

  <!-- background -->
  <rect
    x="0"
    y="0"
    width="120"
    height="120"
    rx="18"
    fill="url(#bgGrad)"/>

  <!-- =====================
       background firework
  ====================== -->
  <g
    transform="translate(28 28)"
    stroke="#F2A1C0"
    stroke-width="1.4"
    fill="none"
    opacity="0">

    <line x1="0" y1="-10" x2="0" y2="-18"/>
    <line x1="0" y1="10" x2="0" y2="18"/>
    <line x1="-10" y1="0" x2="-18" y2="0"/>
    <line x1="10" y1="0" x2="18" y2="0"/>
    <line x1="-7" y1="-7" x2="-13" y2="-13"/>
    <line x1="7" y1="7" x2="13" y2="13"/>
    <line x1="-7" y1="7" x2="-13" y2="13"/>
    <line x1="7" y1="-7" x2="13" y2="-13"/>

    <animate
      attributeName="opacity"
      values="0;0.7;0.7;0"
      keyTimes="0;0.25;0.75;1"
      dur="6s"
      repeatCount="indefinite"/>
  </g>

  <!-- =====================
       bowl + steam face
  ====================== -->
  <g
    transform="translate(60 78)"
    stroke="#8224e3"
    stroke-width="2"
    fill="none"
    opacity="0.95">

    <!-- bowl (smile) -->
    <path d="M-28 0 Q0 24 28 0"/>

    <!-- steam eyes -->
    <path d="M-12 -20 Q-6 -30 0 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.5s"
        repeatCount="indefinite"/>
    </path>

    <path d="M10 -20 Q16 -32 22 -20">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0; 0 -2; 0 0"
        dur="3.9s"
        repeatCount="indefinite"/>
    </path>

  </g>
</svg>

<p>投稿 <a href="https://inada.ico21lab.com/memo-55/">svgでアイコンを作る</a> は <a href="https://inada.ico21lab.com">HP作成：inada</a> に最初に表示されました。</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
