{"version":3,"file":"LinePattern_1.B1l4vutv.mjs","names":[],"sources":["https:/framerusercontent.com/modules/PWzki0TTWkqIgFl6XDuz/G3muomRvZ7SQLZqVGPkn/LinePattern_1.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önnen an deine Bedürfnisse angepasst werden:\n// - width/height: Größe des gesamten SVG (also deines Hintergrunds)\n// - cellSize: Größe einer Zelle im Schachbrettmuster\n// - fillProbability: Wahrscheinlichkeit, dass eine Zelle gefüllt 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äßig ohne Füllung\n            let fill = \"none\"\n\n            // Mit einer definierten Wahrscheinlichkeit füllen wir die Zelle\n            if (Math.random() < fillProbability) {\n                // Transparenz zufällig zwischen 0.2 und 0.8 wählen\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ünne 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{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ähle eine zufällige Transparenz zwischen 0.025 und 0.125\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(\"div\",{style:{width:\"100%\",height:\"100%\",background:\"transparent\",display:\"block\",position:\"relative\"},children:/*#__PURE__*/_jsxs(\"svg\",{width:\"100%\",height:\"100%\",style:{display:\"block\"},preserveAspectRatio:\"none\",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:\"100%\",height:\"100%\"};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_1.map"],"mappings":"oKAoGA,SAAS,EAAO,EAAM,CAAC,GAAG,OAAO,GAAQ,aAAa,EAAM,KAAK,IAAK,MAAM,CAAC,EAAE,SAAS,EAAM,MAAM,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,SAAS,EAAM,MAAM,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,SAAS,EAAM,MAAM,EAAE,EAAE,CAAC,GAAG,CAAC,SAAW,OAAO,GAAQ,UAAU,EAAM,IAAI,IAAA,GAAW,OAAO,EAAO,MAAM,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAE,SAAgB,EAAY,EAAM,CAAC,GAAK,CAAC,WAAS,kBAAgB,cAAY,WAAS,YAAU,YAAU,QAAM,UAAQ,EACjY,EAAU,EAAS,EAAkB,EAAW,EAAS,EAAe,EAAa,EAAO,EAAU,CAAK,EAAU,EAAE,CAAC,IAAI,IAAI,EAAI,EAAE,EAAI,EAAS,IAAO,IAAI,IAAI,EAAI,EAAE,EAAI,EAAY,IAAM,CAAC,IAAI,EAAK,OAAO,GAAG,KAAK,QAAQ,CAAC,EAAgB,CACtP,IAAM,GAAS,KAAK,QAAQ,CAAC,GAAG,MAAM,QAAQ,EAAE,CAAC,EAAK,QAAQ,EAAa,EAAE,IAAI,EAAa,EAAE,IAAI,EAAa,EAAE,IAAI,EAAQ,GAAI,EAAU,KAAkB,EAAK,OAAO,CAAC,EAAE,EAAI,EAAS,EAAE,EAAI,EAAS,MAAM,EAAS,OAAO,EAAc,OAAK,OAAO,EAAU,YAAY,OAAO,CAAC,GAAG,EAAI,GAAG,IAAM,CAAC,CAAG,OAAoB,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,WAAW,cAAc,QAAQ,QAAQ,SAAS,WAAW,CAAC,SAAsB,EAAM,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,MAAM,CAAC,QAAQ,QAAQ,CAAC,oBAAoB,OAAO,SAAS,CAAc,EAAK,OAAO,CAAC,SAAsB,EAAK,UAAU,CAAC,GAAG,eAAe,aAAa,iBAAiB,MAAM,EAAU,OAAO,EAAW,SAAS,EAAU,CAAC,CAAC,CAAC,CAAc,EAAK,OAAO,CAAC,MAAM,OAAO,OAAO,OAAO,KAAK,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAHzuB,IAAoD,CAGurB,EAAY,aAAa,CAAC,SAAS,GAAG,gBAAgB,GAAG,UAAU,UAAU,UAAU,UAAU,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,OAAO,OAAO,CAAC,EAAoB,EAAY,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,IAAI,GAAG,IAAI,IAAI,KAAK,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAY,OAAO,MAAM,aAAa,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAY,OAAO,MAAM,eAAe,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,CAAC,SAAS,CAAC,KAAK,EAAY,OAAO,MAAM,YAAY,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,CAAC,UAAU,CAAC,KAAK,EAAY,MAAM,MAAM,aAAa,CAAC,CAAC"}