{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/tnozyVRuN5kTDlGzw9eg/ubDgqYpSFjQcTBym4KW0/LinePattern.js"],
  "sourcesContent": ["/*import * as React from \"react\"\nimport { Frame, addPropertyControls, ControlType } from \"framer\"\n\nexport function LinePattern(props) {\n    const { lineColor, rotation, lineWidth, lineSpacing } = props\n\n    const patternStyle = {\n        background: `repeating-linear-gradient(${rotation}deg, ${lineColor}, ${lineColor} ${lineWidth}px, transparent ${lineWidth}px, transparent ${lineSpacing}px)`,\n        width: \"100%\",\n        height: \"100%\",\n    }\n\n    return <Frame size=\"100%\" background=\"transparent\" style={patternStyle} />\n}\n\nLinePattern.defaultProps = {\n    lineColor: \"#000000\",\n    rotation: 90,\n    lineWidth: 1,\n    lineSpacing: 11,\n}\n\naddPropertyControls(LinePattern, {\n    lineColor: {\n        type: ControlType.Color,\n        title: \"Line Color\",\n    },\n    rotation: {\n        type: ControlType.Number,\n        title: \"Rotation\",\n        min: 0,\n        max: 360,\n        step: 1,\n    },\n    lineWidth: {\n        type: ControlType.Number,\n        title: \"Line Width\",\n        min: 1,\n        max: 20,\n        step: 1,\n    },\n    lineSpacing: {\n        type: ControlType.Number,\n        title: \"Line Spacing\",\n        min: 1,\n        max: 50,\n        step: 1,\n    },\n})*//*import * as React from \"react\"\n\n// Parameter k\u00F6nnen an deine Bed\u00FCrfnisse angepasst werden:\n// - width/height: Gr\u00F6\u00DFe des gesamten SVG (also deines Hintergrunds)\n// - cellSize: Gr\u00F6\u00DFe einer Zelle im Schachbrettmuster\n// - fillProbability: Wahrscheinlichkeit, dass eine Zelle gef\u00FCllt wird (0 = nie, 1 = immer)\nexport function ChessboardPattern({\n    width = 800,\n    height = 600,\n    cellSize = 50,\n    fillProbability = 0.1,\n}) {\n    // Berechnung der Anzahl an Zeilen und Spalten\n    const cols = Math.ceil(width / cellSize)\n    const rows = Math.ceil(height / cellSize)\n\n    // Erzeuge alle Zellen als <rect>-Elemente\n    const cells = []\n    for (let row = 0; row < rows; row++) {\n        for (let col = 0; col < cols; col++) {\n            // Standardm\u00E4\u00DFig ohne F\u00FCllung\n            let fill = \"none\"\n\n            // Mit einer definierten Wahrscheinlichkeit f\u00FCllen wir die Zelle\n            if (Math.random() < fillProbability) {\n                // Transparenz zuf\u00E4llig zwischen 0.2 und 0.8 w\u00E4hlen\n                const opacity = (Math.random() * 0.6 + 0.2).toFixed(2)\n                // Hier verwenden wir als Beispiel Schwarz (du kannst auch eine andere Farbe verwenden)\n                fill = `rgba(134, 36, 255, ${opacity})`\n            }\n\n            cells.push(\n                <rect\n                    key={`${row}-${col}`}\n                    x={col * cellSize}\n                    y={row * cellSize}\n                    width={cellSize}\n                    height={cellSize}\n                    fill={fill}\n                    stroke=\"#8624FF\" // d\u00FCnne Linien als Rahmen\n                    strokeWidth=\"1\"\n                />\n            )\n        }\n    }\n\n    return (\n        <svg width={width} height={height}>\n            {cells}\n        </svg>\n    )\n}*/import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{Frame,addPropertyControls,ControlType}from\"framer\";// Hilfsfunktion, um einen Hex-Farbcode in ein RGB-Objekt umzuwandeln\nfunction getRgb(color){if(typeof color===\"string\"){if(color[0]===\"#\"){return{r:parseInt(color.slice(1,3),16),g:parseInt(color.slice(3,5),16),b:parseInt(color.slice(5,7),16)};}}else if(typeof color===\"object\"&&color.r!==undefined){return color;}return{r:134,g:36,b:255};}export function LinePattern(props){const{cellSize,fillProbability,tileColumns,tileRows,lineColor,fillColor,width,height}=props;// Berechne die Abmessungen des Pattern-Tiles\nconst tileWidth=cellSize*tileColumns;const tileHeight=cellSize*tileRows;const rgbFillColor=getRgb(fillColor);let tileCells=[];for(let row=0;row<tileRows;row++){for(let col=0;col<tileColumns;col++){let fill=\"none\";if(Math.random()<fillProbability){// W\u00E4hle eine zuf\u00E4llige Transparenz zwischen 0.2 und 0.8\nconst opacity=(Math.random()*.1+.025).toFixed(2);fill=`rgba(${rgbFillColor.r}, ${rgbFillColor.g}, ${rgbFillColor.b}, ${opacity})`;}tileCells.push(/*#__PURE__*/_jsx(\"rect\",{x:col*cellSize,y:row*cellSize,width:cellSize,height:cellSize,fill:fill,stroke:lineColor,strokeWidth:\"0.01\"},`${row}-${col}`));}}return /*#__PURE__*/_jsx(Frame,{size:\"100%\",background:\"transparent\",children:/*#__PURE__*/_jsxs(\"svg\",{width:\"100%\",height:\"100%\",style:{display:\"block\"},children:[/*#__PURE__*/_jsx(\"defs\",{children:/*#__PURE__*/_jsx(\"pattern\",{id:\"chessPattern\",patternUnits:\"userSpaceOnUse\",width:tileWidth,height:tileHeight,children:tileCells})}),/*#__PURE__*/_jsx(\"rect\",{width:\"100%\",height:\"100%\",fill:\"url(#chessPattern)\"})]})});}LinePattern.defaultProps={cellSize:50,fillProbability:.1,lineColor:\"#8624FF\",fillColor:\"#8624FF\",tileColumns:8,tileRows:8,width:400,height:400};addPropertyControls(LinePattern,{cellSize:{type:ControlType.Number,title:\"Cell Size\",min:10,max:200,step:1},fillProbability:{type:ControlType.Number,title:\"Fill Prob.\",min:0,max:1,step:.01},tileColumns:{type:ControlType.Number,title:\"Tile Columns\",min:1,max:20,step:1},tileRows:{type:ControlType.Number,title:\"Tile Rows\",min:1,max:20,step:1},lineColor:{type:ControlType.Color,title:\"Line Color\"},fillColor:{type:ControlType.Color,title:\"Fill Color\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"LinePattern\":{\"type\":\"reactComponent\",\"name\":\"LinePattern\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./LinePattern.map"],
  "mappings": "uGAoGA,SAASA,EAAOC,EAAM,CAAC,GAAG,OAAOA,GAAQ,UAAU,GAAGA,EAAM,CAAC,IAAI,IAAK,MAAM,CAAC,EAAE,SAASA,EAAM,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,SAASA,EAAM,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,SAASA,EAAM,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,UAAY,OAAOA,GAAQ,UAAUA,EAAM,IAAI,OAAW,OAAOA,EAAO,MAAM,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,CAAE,CAAQ,SAASC,EAAYC,EAAM,CAAC,GAAK,CAAC,SAAAC,EAAS,gBAAAC,EAAgB,YAAAC,EAAY,SAAAC,EAAS,UAAAC,EAAU,UAAAC,EAAU,MAAAC,EAAM,OAAAC,CAAM,EAAER,EACjYS,EAAUR,EAASE,EAAkBO,EAAWT,EAASG,EAAeO,EAAad,EAAOS,CAAS,EAAMM,EAAU,CAAC,EAAE,QAAQC,EAAI,EAAEA,EAAIT,EAASS,IAAO,QAAQC,EAAI,EAAEA,EAAIX,EAAYW,IAAM,CAAC,IAAIC,EAAK,OAAO,GAAG,KAAK,OAAO,EAAEb,EAAgB,CACtP,IAAMc,GAAS,KAAK,OAAO,EAAE,GAAG,MAAM,QAAQ,CAAC,EAAED,EAAK,QAAQJ,EAAa,CAAC,KAAKA,EAAa,CAAC,KAAKA,EAAa,CAAC,KAAKK,CAAO,GAAI,CAACJ,EAAU,KAAkBK,EAAK,OAAO,CAAC,EAAEH,EAAIb,EAAS,EAAEY,EAAIZ,EAAS,MAAMA,EAAS,OAAOA,EAAS,KAAKc,EAAK,OAAOV,EAAU,YAAY,MAAM,EAAE,GAAGQ,CAAG,IAAIC,CAAG,EAAE,CAAC,CAAE,CAAE,OAAoBG,EAAKC,EAAM,CAAC,KAAK,OAAO,WAAW,cAAc,SAAsBC,EAAM,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,MAAM,CAAC,QAAQ,OAAO,EAAE,SAAS,CAAcF,EAAK,OAAO,CAAC,SAAsBA,EAAK,UAAU,CAAC,GAAG,eAAe,aAAa,iBAAiB,MAAMR,EAAU,OAAOC,EAAW,SAASE,CAAS,CAAC,CAAC,CAAC,EAAeK,EAAK,OAAO,CAAC,MAAM,OAAO,OAAO,OAAO,KAAK,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,CAAClB,EAAY,aAAa,CAAC,SAAS,GAAG,gBAAgB,GAAG,UAAU,UAAU,UAAU,UAAU,YAAY,EAAE,SAAS,EAAE,MAAM,IAAI,OAAO,GAAG,EAAEqB,EAAoBrB,EAAY,CAAC,SAAS,CAAC,KAAKsB,EAAY,OAAO,MAAM,YAAY,IAAI,GAAG,IAAI,IAAI,KAAK,CAAC,EAAE,gBAAgB,CAAC,KAAKA,EAAY,OAAO,MAAM,aAAa,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,YAAY,CAAC,KAAKA,EAAY,OAAO,MAAM,eAAe,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,EAAE,SAAS,CAAC,KAAKA,EAAY,OAAO,MAAM,YAAY,IAAI,EAAE,IAAI,GAAG,KAAK,CAAC,EAAE,UAAU,CAAC,KAAKA,EAAY,MAAM,MAAM,YAAY,EAAE,UAAU,CAAC,KAAKA,EAAY,MAAM,MAAM,YAAY,CAAC,CAAC",
  "names": ["getRgb", "color", "LinePattern", "props", "cellSize", "fillProbability", "tileColumns", "tileRows", "lineColor", "fillColor", "width", "height", "tileWidth", "tileHeight", "rgbFillColor", "tileCells", "row", "col", "fill", "opacity", "p", "Frame", "u", "addPropertyControls", "ControlType"]
}