{
 "name": "crop-sparkle",
 "title": "Crop sparkle",
 "component": "CropSparkleIcon",
 "url": "https://gentleface.com/icons/crop-sparkle",
 "category": "design",
 "motif": "crop",
 "added": "2026-11-06",
 "since": "0.4.0",
 "history": [
  {
   "date": "2026-11-06",
   "what": [
    "added",
    "released in 0.4.0"
   ]
  }
 ],
 "geometry_hash": "0b3b1e505079",
 "use_for": [
  "smart crop",
  "auto crop",
  "ai crop"
 ],
 "example": "Auto-crop a photo to its subject",
 "base": "crop",
 "modifier": "sparkle",
 "family": [
  "crop"
 ],
 "tags": [
  "crop",
  "trim",
  "cut",
  "frame",
  "resize",
  "image",
  "sparkle"
 ],
 "size": 16,
 "styles": [
  "line-round",
  "line-soft",
  "line-sharp",
  "solid-round",
  "solid-soft",
  "solid-sharp"
 ],
 "default_style": "line-round",
 "svg": {
  "line-round": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M5.856 10.144C5.952 10.241 6 10.359 6 10.5C6 10.641 5.952 10.759 5.856 10.856C5.759 10.952 5.641 11 5.5 11L3.5 11C3.359 11 3.241 10.952 3.144 10.856C3.048 10.759 3 10.641 3 10.5L3 4L0.5 4C0.359 4 0.241 3.952 0.144 3.856C0.048 3.759 0 3.641 0 3.5C0 3.359 0.048 3.241 0.144 3.144C0.241 3.048 0.359 3 0.5 3L3 3L3 0.5C3 0.359 3.048 0.241 3.144 0.144C3.241 0.048 3.359 0 3.5 0C3.641 0 3.759 0.048 3.856 0.144C3.952 0.241 4 0.359 4 0.5L4 3L10.5 3C10.641 3 10.759 3.048 10.856 3.144C10.952 3.241 11 3.359 11 3.5L11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6C10.359 6 10.241 5.952 10.144 5.856C10.048 5.759 10 5.641 10 5.5L10 4L4 4L4 10L5.5 10C5.641 10 5.759 10.048 5.856 10.144ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z\"/></svg>",
  "line-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M5.856 10.144C5.952 10.241 6 10.359 6 10.5C6 10.641 5.952 10.759 5.856 10.856C5.759 10.952 5.641 11 5.5 11L3.5 11C3.359 11 3.241 10.952 3.144 10.856C3.048 10.759 3 10.641 3 10.5L3 4L0.5 4C0.359 4 0.241 3.952 0.144 3.856C0.048 3.759 0 3.641 0 3.5C0 3.359 0.048 3.241 0.144 3.144C0.241 3.048 0.359 3 0.5 3L3 3L3 0.5C3 0.359 3.048 0.241 3.144 0.144C3.241 0.048 3.359 0 3.5 0C3.641 0 3.759 0.048 3.856 0.144C3.952 0.241 4 0.359 4 0.5L4 3L10.5 3C10.641 3 10.759 3.048 10.856 3.144C10.952 3.241 11 3.359 11 3.5L11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6C10.359 6 10.241 5.952 10.144 5.856C10.048 5.759 10 5.641 10 5.5L10 4L4 4L4 10L5.5 10C5.641 10 5.759 10.048 5.856 10.144ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z\"/></svg>",
  "line-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M6 11L3 11L3 4L0 4L0 3L3 3L3 0L4 0L4 3L11 3L11 6L10 6L10 4L4 4L4 10L6 10L6 11ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z\"/></svg>",
  "solid-round": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M5.856 10.144C5.952 10.241 6 10.359 6 10.5C6 10.641 5.952 10.759 5.856 10.856C5.759 10.952 5.641 11 5.5 11L3.5 11C3.359 11 3.241 10.952 3.144 10.856C3.048 10.759 3 10.641 3 10.5L3 4L0.5 4C0.359 4 0.241 3.952 0.144 3.856C0.048 3.759 0 3.641 0 3.5C0 3.359 0.048 3.241 0.144 3.144C0.241 3.048 0.359 3 0.5 3L3 3L3 0.5C3 0.359 3.048 0.241 3.144 0.144C3.241 0.048 3.359 0 3.5 0C3.641 0 3.759 0.048 3.856 0.144C3.952 0.241 4 0.359 4 0.5L4 3L10.5 3C10.641 3 10.759 3.048 10.856 3.144C10.952 3.241 11 3.359 11 3.5L11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6C10.359 6 10.241 5.952 10.144 5.856C10.048 5.759 10 5.641 10 5.5L10 4L4 4L4 10L5.5 10C5.641 10 5.759 10.048 5.856 10.144ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z\"/></svg>",
  "solid-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M5.856 10.144C5.952 10.241 6 10.359 6 10.5C6 10.641 5.952 10.759 5.856 10.856C5.759 10.952 5.641 11 5.5 11L3.5 11C3.359 11 3.241 10.952 3.144 10.856C3.048 10.759 3 10.641 3 10.5L3 4L0.5 4C0.359 4 0.241 3.952 0.144 3.856C0.048 3.759 0 3.641 0 3.5C0 3.359 0.048 3.241 0.144 3.144C0.241 3.048 0.359 3 0.5 3L3 3L3 0.5C3 0.359 3.048 0.241 3.144 0.144C3.241 0.048 3.359 0 3.5 0C3.641 0 3.759 0.048 3.856 0.144C3.952 0.241 4 0.359 4 0.5L4 3L10.5 3C10.641 3 10.759 3.048 10.856 3.144C10.952 3.241 11 3.359 11 3.5L11 5.5C11 5.641 10.952 5.759 10.856 5.856C10.759 5.952 10.641 6 10.5 6C10.359 6 10.241 5.952 10.144 5.856C10.048 5.759 10 5.641 10 5.5L10 4L4 4L4 10L5.5 10C5.641 10 5.759 10.048 5.856 10.144ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z\"/></svg>",
  "solid-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M4 10L6 10L6 11L3 11L3 4L0 4L0 3L3 3L3 0L4 0L4 3L11 3L11 6L10 6L10 4L4 4L4 10ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z\"/></svg>"
 },
 "svg_url": {
  "line-round": "https://gentleface.com/svg/line-round/16/crop-sparkle.svg",
  "line-soft": "https://gentleface.com/svg/line-soft/16/crop-sparkle.svg",
  "line-sharp": "https://gentleface.com/svg/line-sharp/16/crop-sparkle.svg",
  "solid-round": "https://gentleface.com/svg/solid-round/16/crop-sparkle.svg",
  "solid-soft": "https://gentleface.com/svg/solid-soft/16/crop-sparkle.svg",
  "solid-sharp": "https://gentleface.com/svg/solid-sharp/16/crop-sparkle.svg"
 },
 "png_url": {
  "line-round": {
   "16": "https://gentleface.com/png/line-round/16/crop-sparkle.png",
   "32": "https://gentleface.com/png/line-round/32/crop-sparkle.png",
   "48": "https://gentleface.com/png/line-round/48/crop-sparkle.png"
  },
  "line-soft": {
   "16": "https://gentleface.com/png/line-soft/16/crop-sparkle.png",
   "32": "https://gentleface.com/png/line-soft/32/crop-sparkle.png",
   "48": "https://gentleface.com/png/line-soft/48/crop-sparkle.png"
  },
  "line-sharp": {
   "16": "https://gentleface.com/png/line-sharp/16/crop-sparkle.png",
   "32": "https://gentleface.com/png/line-sharp/32/crop-sparkle.png",
   "48": "https://gentleface.com/png/line-sharp/48/crop-sparkle.png"
  },
  "solid-round": {
   "16": "https://gentleface.com/png/solid-round/16/crop-sparkle.png",
   "32": "https://gentleface.com/png/solid-round/32/crop-sparkle.png",
   "48": "https://gentleface.com/png/solid-round/48/crop-sparkle.png"
  },
  "solid-soft": {
   "16": "https://gentleface.com/png/solid-soft/16/crop-sparkle.png",
   "32": "https://gentleface.com/png/solid-soft/32/crop-sparkle.png",
   "48": "https://gentleface.com/png/solid-soft/48/crop-sparkle.png"
  },
  "solid-sharp": {
   "16": "https://gentleface.com/png/solid-sharp/16/crop-sparkle.png",
   "32": "https://gentleface.com/png/solid-sharp/32/crop-sparkle.png",
   "48": "https://gentleface.com/png/solid-sharp/48/crop-sparkle.png"
  }
 },
 "npm": {
  "react": "import { CropSparkleIcon } from '@gentleface/react';",
  "svg": "@gentleface/icons/svg/line-round/16/crop-sparkle.svg",
  "cdn": "https://cdn.jsdelivr.net/npm/@gentleface/icons@0.6.0/svg/line-round/16/crop-sparkle.svg",
  "version": "0.6.0"
 },
 "license": "MIT",
 "author": "Alexander Kiselev",
 "motion": {
  "name": "crop-sparkle-aspect",
  "does": "The sparkle twinkles out. The crop frame tries a portrait cut, its left bracket stepping in, then a landscape cut, its top bracket stepping down, and settles back on the square as the sparkle twinkles in.",
  "url": "https://gentleface.com/motion/crop-sparkle-aspect.svg",
  "style": "line-round",
  "size": 16,
  "duration": 3,
  "frames": [
   0.2,
   1.85
  ],
  "svg": "<svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.001\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><g><animateTransform attributeName=\"transform\" type=\"translate\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.15;0.2;0.22;0.267;0.317;1\" values=\"0 0;0 0;1.6 0;1.5 0;1.5 0;0 0;0 0\" calcMode=\"spline\" keySplines=\"0 0 1 1;.15 .75 .25 1;.37 0 .63 1;0 0 1 1;.6 0 .25 1;0 0 1 1\"/><path d=\"M3.5 0.5L3.5 10.5L13.5 10.5\" stroke-dasharray=\"12 22\" stroke-dashoffset=\"0\"><animate attributeName=\"stroke-dasharray\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.092;0.1;0.108;0.117;0.125;0.133;0.142;0.15;0.44;0.448;0.456;0.465;0.473;0.481;0.489;0.498;0.506;0.514;0.522;0.531;0.539;0.547;0.555;0.564;0.572;0.58;1\" values=\"12 22;12 22;12 22;12 22;12 22;12 22;13 22;14 22;15 22;20 22;20 22;15 22;15 22;15 22;13 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22\"/><animate attributeName=\"stroke-dashoffset\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.092;0.1;0.108;0.117;0.125;0.133;0.142;0.15;0.44;0.448;0.456;0.465;0.473;0.481;0.489;0.498;0.506;0.514;0.522;0.531;0.539;0.547;0.555;0.564;0.572;0.58;1\" values=\"0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0\"/></path></g><g><animateTransform attributeName=\"transform\" type=\"translate\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.267;0.317;0.337;0.373;0.427;1\" values=\"0 0;0 0;0 1.6;0 1.5;0 1.5;0 0;0 0\" calcMode=\"spline\" keySplines=\"0 0 1 1;.15 .75 .25 1;.37 0 .63 1;0 0 1 1;.6 0 .25 1;0 0 1 1\"/><path d=\"M0.5 3.5L10.5 3.5L10.5 13.5\" stroke-dasharray=\"12 22\" stroke-dashoffset=\"0\"><animate attributeName=\"stroke-dasharray\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.092;0.1;0.108;0.117;0.125;0.133;0.142;0.15;0.44;0.448;0.456;0.465;0.473;0.481;0.489;0.498;0.506;0.514;0.522;0.531;0.539;0.547;0.555;0.564;0.572;0.58;1\" values=\"12 22;12 22;13 22;13 22;14 22;14 22;15 22;15 22;16 22;20 22;20 22;15 22;13 22;12 22;13 22;14 22;14 22;14 22;14 22;14 22;14 22;14 22;14 22;14 22;14 22;13 22;13 22;12 22;12 22\"/><animate attributeName=\"stroke-dashoffset\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.092;0.1;0.108;0.117;0.125;0.133;0.142;0.15;0.44;0.448;0.456;0.465;0.473;0.481;0.489;0.498;0.506;0.514;0.522;0.531;0.539;0.547;0.555;0.564;0.572;0.58;1\" values=\"0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0\"/></path></g><g transform=\"translate(11.5 11.5)\"><g><animateTransform attributeName=\"transform\" type=\"scale\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.15;0.44;0.507;1\" values=\"1;1;0;0;1;1\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .9 .4;0 0 1 1;.15 .75 .25 1;0 0 1 1\"/><animate attributeName=\"visibility\" calcMode=\"discrete\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.15;0.44\" values=\"visible;hidden;visible\"/><g><animateTransform attributeName=\"transform\" type=\"rotate\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.15;0.44;0.527;0.58;1\" values=\"0;0;45;-90;12;0;0\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .9 .4;0 0 1 1;.15 .75 .25 1;.37 0 .63 1;0 0 1 1\"/><g transform=\"translate(-11.5 -11.5)\"><path fill=\"currentColor\" stroke=\"none\" d=\"M16 11.5C13 12 12 13 11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5Z\"></path></g></g></g></g></svg>",
  "react": "// Gentleface \"crop-sparkle\" animated (crop-sparkle-aspect), MIT. https://gentleface.com/icons/crop-sparkle\n// Pass a ref to start and stop it: https://gentleface.com/animated-icons\nimport { forwardRef, type SVGProps } from 'react';\n\nexport const CropSparkleAspectIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(function CropSparkleAspectIcon(props, ref) {\n  return (\n    <svg ref={ref} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.001\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\" {...props}>\n      <g>\n      <animateTransform attributeName=\"transform\" type=\"translate\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.15;0.2;0.22;0.267;0.317;1\" values=\"0 0;0 0;1.6 0;1.5 0;1.5 0;0 0;0 0\" calcMode=\"spline\" keySplines=\"0 0 1 1;.15 .75 .25 1;.37 0 .63 1;0 0 1 1;.6 0 .25 1;0 0 1 1\"/>\n      <path d=\"M3.5 0.5L3.5 10.5L13.5 10.5\" strokeDasharray=\"12 22\" strokeDashoffset=\"0\">\n      <animate attributeName=\"stroke-dasharray\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.092;0.1;0.108;0.117;0.125;0.133;0.142;0.15;0.44;0.448;0.456;0.465;0.473;0.481;0.489;0.498;0.506;0.514;0.522;0.531;0.539;0.547;0.555;0.564;0.572;0.58;1\" values=\"12 22;12 22;12 22;12 22;12 22;12 22;13 22;14 22;15 22;20 22;20 22;15 22;15 22;15 22;13 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22;12 22\"/>\n      <animate attributeName=\"stroke-dashoffset\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.092;0.1;0.108;0.117;0.125;0.133;0.142;0.15;0.44;0.448;0.456;0.465;0.473;0.481;0.489;0.498;0.506;0.514;0.522;0.531;0.539;0.547;0.555;0.564;0.572;0.58;1\" values=\"0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0\"/>\n      </path>\n      </g>\n      <g>\n      <animateTransform attributeName=\"transform\" type=\"translate\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.267;0.317;0.337;0.373;0.427;1\" values=\"0 0;0 0;0 1.6;0 1.5;0 1.5;0 0;0 0\" calcMode=\"spline\" keySplines=\"0 0 1 1;.15 .75 .25 1;.37 0 .63 1;0 0 1 1;.6 0 .25 1;0 0 1 1\"/>\n      <path d=\"M0.5 3.5L10.5 3.5L10.5 13.5\" strokeDasharray=\"12 22\" strokeDashoffset=\"0\">\n      <animate attributeName=\"stroke-dasharray\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.092;0.1;0.108;0.117;0.125;0.133;0.142;0.15;0.44;0.448;0.456;0.465;0.473;0.481;0.489;0.498;0.506;0.514;0.522;0.531;0.539;0.547;0.555;0.564;0.572;0.58;1\" values=\"12 22;12 22;13 22;13 22;14 22;14 22;15 22;15 22;16 22;20 22;20 22;15 22;13 22;12 22;13 22;14 22;14 22;14 22;14 22;14 22;14 22;14 22;14 22;14 22;14 22;13 22;13 22;12 22;12 22\"/>\n      <animate attributeName=\"stroke-dashoffset\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.092;0.1;0.108;0.117;0.125;0.133;0.142;0.15;0.44;0.448;0.456;0.465;0.473;0.481;0.489;0.498;0.506;0.514;0.522;0.531;0.539;0.547;0.555;0.564;0.572;0.58;1\" values=\"0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0\"/>\n      </path>\n      </g>\n      <g transform=\"translate(11.5 11.5)\">\n      <g>\n      <animateTransform attributeName=\"transform\" type=\"scale\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.15;0.44;0.507;1\" values=\"1;1;0;0;1;1\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .9 .4;0 0 1 1;.15 .75 .25 1;0 0 1 1\"/>\n      <animate attributeName=\"visibility\" calcMode=\"discrete\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.15;0.44\" values=\"visible;hidden;visible\"/>\n      <g>\n      <animateTransform attributeName=\"transform\" type=\"rotate\" dur=\"3s\" repeatCount=\"indefinite\" keyTimes=\"0;0.083;0.15;0.44;0.527;0.58;1\" values=\"0;0;45;-90;12;0;0\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .9 .4;0 0 1 1;.15 .75 .25 1;.37 0 .63 1;0 0 1 1\"/>\n      <g transform=\"translate(-11.5 -11.5)\">\n      <path fill=\"currentColor\" stroke=\"none\" d=\"M16 11.5C13 12 12 13 11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5Z\">\n      </path>\n      </g>\n      </g>\n      </g>\n      </g>\n    </svg>\n  );\n});",
  "how_to_play": "https://gentleface.com/animated-icons.md"
 }
}