Art Deco SVG Divider Generator

Create beautiful Art Deco-style dividers with customizable parameters
Width (px)800
Height (px)100
Complexity3
Style
Density0.7
Stroke Width2
Symmetry
Preview

SVG Code

<svg width="800" height="100" viewBox="0 0 800 100" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="50" x2="800" y2="50" stroke="var(--color-primary)" stroke-width="2" opacity="0.6"/>
      <polygon points="400,20 430,50 400,80 370,50" 
                   fill="var(--color-primary)" stroke="var(--color-primary)" stroke-width="2"/>
      <polygon points="400,32 418,50 400,68 382,50" 
                   fill="none" stroke="var(--color-secondary)" stroke-width="2"/>
      <polygon points="445,38 457,50 445,62 433,50" 
                       fill="var(--color-accent)" stroke="var(--color-accent)" stroke-width="2" opacity="0.7"/>
      <polygon points="400,83 412,95 400,107 388,95" 
                       fill="var(--color-accent)" stroke="var(--color-accent)" stroke-width="2" opacity="0.7"/>
      <polygon points="355,38.00000000000001 367,50.00000000000001 355,62.00000000000001 343,50.00000000000001" 
                       fill="var(--color-accent)" stroke="var(--color-accent)" stroke-width="2" opacity="0.7"/>
      <polygon points="400,-7 412,5 400,17 388,5" 
                       fill="var(--color-accent)" stroke="var(--color-accent)" stroke-width="2" opacity="0.7"/>
      <line x1="430" y1="50" x2="436" y2="50" stroke="var(--color-text-secondary)" stroke-width="2" opacity="0.7"/>
      <line x1="421.2132034355964" y1="71.21320343559643" x2="425.4558441227157" y2="75.45584412271572" stroke="var(--color-text-secondary)" stroke-width="2" opacity="0.7"/>
      <line x1="400" y1="80" x2="400" y2="86" stroke="var(--color-text-secondary)" stroke-width="2" opacity="0.7"/>
      <line x1="378.7867965644036" y1="71.21320343559643" x2="374.5441558772843" y2="75.45584412271572" stroke="var(--color-text-secondary)" stroke-width="2" opacity="0.7"/>
      <line x1="370" y1="50.00000000000001" x2="364" y2="50.00000000000001" stroke="var(--color-text-secondary)" stroke-width="2" opacity="0.7"/>
      <line x1="378.7867965644036" y1="28.786796564403577" x2="374.5441558772843" y2="24.54415587728429" stroke="var(--color-text-secondary)" stroke-width="2" opacity="0.7"/>
      <line x1="400" y1="20" x2="400" y2="14" stroke="var(--color-text-secondary)" stroke-width="2" opacity="0.7"/>
      <line x1="421.2132034355964" y1="28.78679656440357" x2="425.4558441227157" y2="24.544155877284282" stroke="var(--color-text-secondary)" stroke-width="2" opacity="0.7"/>
      <line x1="190" y1="50" x2="210" y2="50" 
                         stroke="var(--color-accent)" stroke-width="3" opacity="0.7"/>
      <line x1="200" y1="40" x2="200" y2="60" 
                         stroke="var(--color-accent)" stroke-width="3" opacity="0.7"/>
      <circle cx="190" cy="50" r="2" fill="var(--color-accent)" opacity="0.7"/>
      <circle cx="210" cy="50" r="2" fill="var(--color-accent)" opacity="0.7"/>
      <line x1="590" y1="50" x2="610" y2="50" 
                         stroke="var(--color-accent)" stroke-width="3" opacity="0.7"/>
      <line x1="600" y1="40" x2="600" y2="60" 
                         stroke="var(--color-accent)" stroke-width="3" opacity="0.7"/>
      <circle cx="590" cy="50" r="2" fill="var(--color-accent)" opacity="0.7"/>
      <circle cx="610" cy="50" r="2" fill="var(--color-accent)" opacity="0.7"/>
      <line x1="215.07012091325953" y1="32.79505796166956" x2="215.07012091325953" y2="40.62175778138174" stroke="var(--color-accent)" stroke-width="2" opacity="0.4"/>
      <line x1="228.1872746942767" y1="34.517491889044436" x2="228.1872746942767" y2="45.35440034985781" stroke="var(--color-accent)" stroke-width="2" opacity="0.4"/>
      <rect x="592.0620376321078" y="10.701692656296776" width="10.471803422385744" height="10.471803422385744" fill="var(--color-text-secondary)" opacity="0.3"/>
      <line x1="287.23924398517147" y1="45.69343358863718" x2="292.90446387399606" y2="45.69343358863718" stroke="var(--color-accent)" stroke-width="2" opacity="0.4"/>
      <line x1="290.07185392958377" y1="42.8608236442249" x2="290.07185392958377" y2="48.52604353304945" stroke="var(--color-accent)" stroke-width="2" opacity="0.4"/>
      <circle cx="742.5349895764524" cy="4.756248311473343" r="3.6192166212424586" fill="var(--color-text-secondary)" opacity="0.3"/>
      <circle cx="629.8925966675835" cy="63.95153298447698" r="3.387314305470131" fill="var(--color-text-secondary)" opacity="0.3"/>
    </svg>
Preview

SVG Code

Themes
