Processing changes...
MaskCurver Pro v3.5
Ultimate Responsive SVG Curve, Mask & Keyframe Architect
01
Select Vector Geometry Strategy
02
Parameter Architect
Wave Settings
Mask Output Mode
Standard reveals inside path, Inverted cuts out inside path.
Frequency (Cycles)
3
Amplitude (Height)
60px
Phase Offset (Shift)
0°
03
Mask Processing Filters & Precision
Mask Soft Blur Feathering
0px
Drop Shadow Blur
0px
Alpha Opacity Level
100%
Retro Noise Texture Intensity
0%
Code Precision Optimizer (Decimals)
1 decimal place
04
Media Background Studio
#00B4D8
Select Image
05
Live Stage Studio
Viewport Resolution: 1920x1080 viewBox
Interactive Stage
06
Real-Time Morphing Engine
Modify your controls and capture two separate shapes (State A & State B). Our engine will dynamically calculate keyframe interpolation values to test live morph transitions!
07
Export Code Studio
/* Compiling CSS Output... */
Production Asset Downloads
Quick Curve & Shape Presets Studio
Click to apply professional web masks instantly (200 curated variations)
Category Filter:
Showing 200 unique preset configurations
ProDevZone Mask Engine v3.5
${preset.cat}
${preset.name}
${preset.desc}
Apply Mask
`;
container.appendChild(card);
});const matchCount = document.getElementById("preset-match-count");
if (matchCount) matchCount.innerText = masksPresetsDatabase.length;
}function applyPresetMask(id) {
const preset = masksPresetsDatabase.find(p => p.id === id);
if (!preset) return;const cat = preset.cat;
const p = preset.params;if (cat === "wave") {
document.getElementById("wave-side").value = p.side;
document.getElementById("wave-frequency").value = p.frequency;
document.getElementById("wave-amplitude").value = p.amplitude;
document.getElementById("wave-phase").value = p.phase;
updateParamValue("wave-freq-val", p.frequency);
updateParamValue("wave-amp-val", p.amplitude + "px");
updateParamValue("wave-phase-val", p.phase + "°");
}
else if (cat === "blob") {
document.getElementById("blob-complexity").value = p.complexity;
document.getElementById("blob-inner").value = p.inner;
document.getElementById("blob-variance").value = p.variance;
document.getElementById("blob-seed").value = p.seed;updateParamValue("blob-complex-val", p.complexity);
updateParamValue("blob-inner-val", p.inner + "px");
updateParamValue("blob-var-val", p.variance + "px");
}
else if (cat === "bezier") {
bezierHandles.p0y = p.p0;
bezierHandles.p1x = p.p1x;
bezierHandles.p1y = p.p1y;
bezierHandles.p2x = p.p2x;
bezierHandles.p2y = p.p2y;
bezierHandles.p3y = p.p3;document.getElementById("bez-p0").value = p.p0;
document.getElementById("bez-p1x").value = p.p1x;
document.getElementById("bez-p1y").value = p.p1y;
document.getElementById("bez-p2x").value = p.p2x;
document.getElementById("bez-p2y").value = p.p2y;
document.getElementById("bez-p3").value = p.p3;
}
else if (cat === "polygon") {
document.getElementById("poly-shape").value = p.shape;
document.getElementById("poly-scale").value = p.scale;
document.getElementById("poly-rotation").value = p.rotate;updateParamValue("poly-scale-val", p.scale + "%");
updateParamValue("poly-rot-val", p.rotate + "°");
}switchCategory(cat);
closePresetsModal();
showToast(`Preset "${preset.name}" applied!`);
}function filterPresets() {
const query = document.getElementById("preset-search").value.toLowerCase();
const cat = document.getElementById("preset-category-filter").value;
const cards = document.getElementsByClassName("preset-item-card");
let count = 0;Array.from(cards).forEach(card => {
const name = card.getAttribute("data-name");
const desc = card.getAttribute("data-desc");
const cardCat = card.getAttribute("data-category");const matchQuery = name.includes(query) || desc.includes(query);
const matchCategory = cat === "all" || cardCat === cat;if (matchQuery && matchCategory) {
card.classList.remove("hidden");
count++;
} else {
card.classList.add("hidden");
}
});const matchCount = document.getElementById("preset-match-count");
if (matchCount) matchCount.innerText = count;
}function openPresetsModal() {
const modal = document.getElementById("presets-modal");
const box = document.getElementById("presets-modal-box");
if (modal && box) {
modal.classList.remove("hidden");
modal.classList.add("flex");
setTimeout(() => {
modal.classList.add("opacity-100");
box.classList.remove("scale-95");
box.classList.add("scale-100");
}, 10);
}
}function closePresetsModal() {
const modal = document.getElementById("presets-modal");
const box = document.getElementById("presets-modal-box");
if (modal && box) {
modal.classList.remove("opacity-100");
box.classList.remove("scale-100");
box.classList.add("scale-95");
setTimeout(() => {
modal.classList.add("hidden");
modal.classList.remove("flex");
}, 150);
}
}window.onload = function() {
renderCornersInputs();
renderEdgesInputs();
switchCategory("wave");
switchParamPanel("base");
updatePreviewMedium();
generatePresetsDatabase();
populatePresetsList();
setupInteractiveDragListeners();
};