Semantic Pen AI

Create an SVG animation where ... || SVG Animation Generator

Generated on Apr 3, 2025, 4:29:18 AMgpt-4o-mini

User Prompt

Create an SVG animation where a car outline is drawn dynamically using a stroke effect over 3 seconds. Once the outline is complete, the headlights should blink on and off in a smooth pulse effect. Use an ease-in-out timing function for natural motion, and ensure the animation loops infinitely.

Generated Result

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .car-outline {
      fill: none;
      stroke: black;
      stroke-width: 2;
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      animation: draw 3s ease-in-out forwards, blink 1s ease-in-out infinite 3s;
    }
    .headlight {
      fill: yellow;
      opacity: 0;
      animation: pulse 1s ease-in-out infinite 3s;
    }
    @keyframes draw {
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes blink {
      0%, 100% { opacity: 0; }
      50% { opacity: 1; }
    }
    @keyframes pulse {
      0%, 100% { opacity: 0; }
      50% { opacity: 1; }
    }
  </style>
  <path class="car-outline" d="M10 70 L30 50 L170 50 L190 70 L190 90 L10 90 Z" />
  <circle class="headlight" cx="30" cy="50" r="5" />
  <circle class="headlight" cx="170" cy="50" r="5" />
</svg>

Free Access SVG Animation Generator