# Stroke logo loader

> An abstract symbol that draws itself line by line, then undraws, over a faint outline of the full shape.

- Category: [Loaders](https://library.aimran.es/components/loaders)
- Built with: React + Motion
- Live editor: https://library.aimran.es/blocks/stroke-logo-loader
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

A logo that draws itself makes a lovely splash screen for a brand: the first seconds of a studio’s portfolio, the opening of a restaurant app or the wait while a SaaS dashboard boots. This SVG logo animation uses a simple abstract mark, and a faint guide stroke keeps the whole shape visible while the line travels.

The real win is swapping the path for your own logo. Single-line marks and outlined icons work best; filled logos with lots of small pieces lose the effect. Keep it for the first load, not every page change.

## Code

### React (Motion)

```tsx
import { motion } from "framer-motion";

const LOGO_PATH = "M18 77 42 20l14 34 12-25 16 48M30 59h48";

interface StrokeLogoLoaderProps {
  color?: string;
  size?: number;
  /** Segundos que tarda en dibujarse el trazo. */
  speed?: number;
}

export default function StrokeLogoLoader({
  color = "#0071e3",
  size = 100,
  speed = 1.8,
}: StrokeLogoLoaderProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      role="img"
      aria-label="Animated abstract symbol"
    >
      {/* Trazo guía: mantiene el símbolo visible mientras se dibuja */}
      <path
        d={LOGO_PATH}
        fill="none"
        className="stroke-black/15 dark:stroke-white/20"
        strokeWidth="6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <motion.path
        d={LOGO_PATH}
        fill="none"
        stroke={color}
        strokeWidth="6"
        strokeLinecap="round"
        strokeLinejoin="round"
        initial={{ pathLength: 0, opacity: 0.2 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{
          duration: speed,
          repeat: Infinity,
          repeatType: "reverse",
          ease: "easeInOut",
        }}
      />
    </svg>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Stroke logo loader” block (Loaders) from AIMRAN Library to my project.

## What it is
An abstract symbol that draws itself line by line, then undraws, over a faint outline of the full shape.

## Chosen settings
- Color: #0071e3
- Size: 100px (from 60 to 150px)
- Speed: 1.8s (from 0.8 to 3s)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with React + TypeScript, with framer-motion for the animation and lucide-react for the icons. If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
import { motion } from "framer-motion";

const LOGO_PATH = "M18 77 42 20l14 34 12-25 16 48M30 59h48";

interface StrokeLogoLoaderProps {
  color?: string;
  size?: number;
  /** Segundos que tarda en dibujarse el trazo. */
  speed?: number;
}

export default function StrokeLogoLoader({
  color = "#0071e3",
  size = 100,
  speed = 1.8,
}: StrokeLogoLoaderProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      role="img"
      aria-label="Animated abstract symbol"
    >
      {/* Trazo guía: mantiene el símbolo visible mientras se dibuja */}
      <path
        d={LOGO_PATH}
        fill="none"
        className="stroke-black/15 dark:stroke-white/20"
        strokeWidth="6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <motion.path
        d={LOGO_PATH}
        fill="none"
        stroke={color}
        strokeWidth="6"
        strokeLinecap="round"
        strokeLinejoin="round"
        initial={{ pathLength: 0, opacity: 0.2 }}
        animate={{ pathLength: 1, opacity: 1 }}
        transition={{
          duration: speed,
          repeat: Infinity,
          repeatType: "reverse",
          ease: "easeInOut",
        }}
      />
    </svg>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````