{
 "name": "wave-sawtooth",
 "title": "Wave sawtooth",
 "component": "WaveSawtoothIcon",
 "url": "https://gentleface.com/icons/wave-sawtooth",
 "category": "media",
 "motif": "wave-sawtooth",
 "added": "2026-11-06",
 "since": "0.4.0",
 "history": [
  {
   "date": "2026-11-06",
   "what": [
    "20 px drawn",
    "24 px drawn",
    "added",
    "released in 0.4.0"
   ]
  }
 ],
 "geometry_hash": "0c2b57bcadbf",
 "use_for": [
  "sawtooth wave",
  "sawtooth"
 ],
 "family": [],
 "tags": [
  "sawtooth-wave",
  "sawtooth",
  "wave",
  "waveform",
  "signal",
  "oscillator",
  "synth",
  "ramp"
 ],
 "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=\"M7.146 2.146C7.244 2.049 7.362 2 7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 11.293L12.146 7.146C12.244 7.049 12.362 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.707 8L7.854 12.854C7.756 12.951 7.638 13 7.5 13C7.359 13 7.241 12.952 7.144 12.856C7.048 12.759 7 12.641 7 12.5L7 3.707L2.854 7.854C2.756 7.951 2.638 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.293 7L7.146 2.146Z\"/></svg>",
  "line-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M7.146 2.146C7.244 2.049 7.362 2 7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 11.293L12.146 7.146C12.244 7.049 12.362 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.707 8L7.854 12.854C7.756 12.951 7.638 13 7.5 13C7.359 13 7.241 12.952 7.144 12.856C7.048 12.759 7 12.641 7 12.5L7 3.707L2.854 7.854C2.756 7.951 2.638 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.293 7L7.146 2.146Z\"/></svg>",
  "line-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M1 8L1 7L2.293 7L8 1.293L8 11.293L12.293 7L14 7L14 8L12.707 8L7 13.707L7 3.707L2.707 8L1 8Z\"/></svg>",
  "solid-round": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M7.146 2.146C7.244 2.049 7.362 2 7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 11.293L12.146 7.146C12.244 7.049 12.362 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.707 8L7.854 12.854C7.756 12.951 7.638 13 7.5 13C7.359 13 7.241 12.952 7.144 12.856C7.048 12.759 7 12.641 7 12.5L7 3.707L2.854 7.854C2.756 7.951 2.638 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.293 7L7.146 2.146Z\"/></svg>",
  "solid-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M7.146 2.146C7.244 2.049 7.362 2 7.5 2C7.638 2 7.756 2.049 7.854 2.146C7.951 2.244 8 2.362 8 2.5L8 11.293L12.146 7.146C12.244 7.049 12.362 7 12.5 7L13.5 7C13.641 7 13.759 7.048 13.856 7.144C13.952 7.241 14 7.359 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L12.707 8L7.854 12.854C7.756 12.951 7.638 13 7.5 13C7.359 13 7.241 12.952 7.144 12.856C7.048 12.759 7 12.641 7 12.5L7 3.707L2.854 7.854C2.756 7.951 2.638 8 2.5 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 7.359 1.048 7.241 1.144 7.144C1.241 7.048 1.359 7 1.5 7L2.293 7L7.146 2.146Z\"/></svg>",
  "solid-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M1 8L1 7L2.293 7L8 1.293L8 11.293L12.293 7L14 7L14 8L12.707 8L7 13.707L7 3.707L2.707 8L1 8Z\"/></svg>"
 },
 "svg_url": {
  "line-round": "https://gentleface.com/svg/line-round/16/wave-sawtooth.svg",
  "line-soft": "https://gentleface.com/svg/line-soft/16/wave-sawtooth.svg",
  "line-sharp": "https://gentleface.com/svg/line-sharp/16/wave-sawtooth.svg",
  "solid-round": "https://gentleface.com/svg/solid-round/16/wave-sawtooth.svg",
  "solid-soft": "https://gentleface.com/svg/solid-soft/16/wave-sawtooth.svg",
  "solid-sharp": "https://gentleface.com/svg/solid-sharp/16/wave-sawtooth.svg"
 },
 "png_url": {
  "line-round": {
   "16": "https://gentleface.com/png/line-round/16/wave-sawtooth.png",
   "32": "https://gentleface.com/png/line-round/32/wave-sawtooth.png",
   "48": "https://gentleface.com/png/line-round/48/wave-sawtooth.png"
  },
  "line-soft": {
   "16": "https://gentleface.com/png/line-soft/16/wave-sawtooth.png",
   "32": "https://gentleface.com/png/line-soft/32/wave-sawtooth.png",
   "48": "https://gentleface.com/png/line-soft/48/wave-sawtooth.png"
  },
  "line-sharp": {
   "16": "https://gentleface.com/png/line-sharp/16/wave-sawtooth.png",
   "32": "https://gentleface.com/png/line-sharp/32/wave-sawtooth.png",
   "48": "https://gentleface.com/png/line-sharp/48/wave-sawtooth.png"
  },
  "solid-round": {
   "16": "https://gentleface.com/png/solid-round/16/wave-sawtooth.png",
   "32": "https://gentleface.com/png/solid-round/32/wave-sawtooth.png",
   "48": "https://gentleface.com/png/solid-round/48/wave-sawtooth.png"
  },
  "solid-soft": {
   "16": "https://gentleface.com/png/solid-soft/16/wave-sawtooth.png",
   "32": "https://gentleface.com/png/solid-soft/32/wave-sawtooth.png",
   "48": "https://gentleface.com/png/solid-soft/48/wave-sawtooth.png"
  },
  "solid-sharp": {
   "16": "https://gentleface.com/png/solid-sharp/16/wave-sawtooth.png",
   "32": "https://gentleface.com/png/solid-sharp/32/wave-sawtooth.png",
   "48": "https://gentleface.com/png/solid-sharp/48/wave-sawtooth.png"
  }
 },
 "npm": {
  "react": "import { WaveSawtoothIcon } from '@gentleface/react';",
  "svg": "@gentleface/icons/svg/line-round/16/wave-sawtooth.svg",
  "cdn": "https://cdn.jsdelivr.net/npm/@gentleface/icons@0.6.0/svg/line-round/16/wave-sawtooth.svg",
  "version": "0.6.0"
 },
 "license": "MIT",
 "author": "Alexander Kiselev",
 "motion": {
  "name": "wave-sawtooth-trace",
  "does": "The trace clears from the left. A beam spot then redraws it as a scope does: it climbs each ramp at a steady pace and falls the full height in an instant.",
  "url": "https://gentleface.com/motion/wave-sawtooth-trace.svg",
  "style": "line-round",
  "size": 16,
  "duration": 2.8,
  "frames": [
   0.3,
   2.05
  ],
  "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\"><path d=\"M1.5 7.5L2.5 7.5L7.5 2.5L7.5 12.5L12.5 7.5L13.5 7.5\" pathLength=\"1\"><animate attributeName=\"stroke-dasharray\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.107;0.2;0.2;0.214;0.243;0.439;0.45;0.646;0.675;1\" values=\"1.05 2;1.05 2;.05 2;0 2;0 2;.038 2;.309 2;.691 2;.962 2;1.05 2;1.05 2\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .9 .4;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1\"/><animate attributeName=\"stroke-dashoffset\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.107;0.2;0.2;0.214;0.243;0.439;0.45;0.646;0.675;1\" values=\"0;0;-1;0;0;0;0;0;0;0;0\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .9 .4;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1\"/><animate attributeName=\"visibility\" calcMode=\"discrete\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.2;0.214\" values=\"visible;hidden;visible\"/></path><g visibility=\"hidden\"><animateMotion path=\"M1.5 7.5L2.5 7.5L7.5 2.5L7.5 12.5L12.5 7.5L13.5 7.5\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.214;0.243;0.439;0.45;0.646;0.675;1\" keyPoints=\"0;0;0.038;0.309;0.691;0.962;1;1\" calcMode=\"linear\"/><animate attributeName=\"visibility\" calcMode=\"discrete\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.214;0.696\" values=\"hidden;visible;hidden\"/><circle fill=\"currentColor\" stroke=\"none\" cx=\"0\" cy=\"0\" r=\"0.9\"><animate attributeName=\"r\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.214;0.243;0.646;0.696;1\" values=\"0.3;0.3;0.9;0.9;0.3;0.3\" calcMode=\"spline\" keySplines=\"0 0 1 1;.15 .75 .25 1;0 0 1 1;.6 0 .9 .4;0 0 1 1\"/></circle></g></svg>",
  "react": "// Gentleface \"wave-sawtooth\" animated (wave-sawtooth-trace), MIT. https://gentleface.com/icons/wave-sawtooth\n// Pass a ref to start and stop it: https://gentleface.com/animated-icons\nimport { forwardRef, type SVGProps } from 'react';\n\nexport const WaveSawtoothTraceIcon = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(function WaveSawtoothTraceIcon(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      <path d=\"M1.5 7.5L2.5 7.5L7.5 2.5L7.5 12.5L12.5 7.5L13.5 7.5\" pathLength=\"1\">\n      <animate attributeName=\"stroke-dasharray\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.107;0.2;0.2;0.214;0.243;0.439;0.45;0.646;0.675;1\" values=\"1.05 2;1.05 2;.05 2;0 2;0 2;.038 2;.309 2;.691 2;.962 2;1.05 2;1.05 2\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .9 .4;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1\"/>\n      <animate attributeName=\"stroke-dashoffset\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.107;0.2;0.2;0.214;0.243;0.439;0.45;0.646;0.675;1\" values=\"0;0;-1;0;0;0;0;0;0;0;0\" calcMode=\"spline\" keySplines=\"0 0 1 1;.6 0 .9 .4;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1\"/>\n      <animate attributeName=\"visibility\" calcMode=\"discrete\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.2;0.214\" values=\"visible;hidden;visible\"/>\n      </path>\n      <g visibility=\"hidden\">\n      <animateMotion path=\"M1.5 7.5L2.5 7.5L7.5 2.5L7.5 12.5L12.5 7.5L13.5 7.5\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.214;0.243;0.439;0.45;0.646;0.675;1\" keyPoints=\"0;0;0.038;0.309;0.691;0.962;1;1\" calcMode=\"linear\"/>\n      <animate attributeName=\"visibility\" calcMode=\"discrete\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.214;0.696\" values=\"hidden;visible;hidden\"/>\n      <circle fill=\"currentColor\" stroke=\"none\" cx=\"0\" cy=\"0\" r=\"0.9\">\n      <animate attributeName=\"r\" dur=\"2.8s\" repeatCount=\"indefinite\" keyTimes=\"0;0.214;0.243;0.646;0.696;1\" values=\"0.3;0.3;0.9;0.9;0.3;0.3\" calcMode=\"spline\" keySplines=\"0 0 1 1;.15 .75 .25 1;0 0 1 1;.6 0 .9 .4;0 0 1 1\"/>\n      </circle>\n      </g>\n    </svg>\n  );\n});",
  "how_to_play": "https://gentleface.com/animated-icons.md"
 }
}