SVG Customizer Part#5: Importing & Exporting Patterns
How do I make an svg customizer part#5: importing & exporting patterns?
What is a svg customizer part#5: importing & exporting patterns? How do you make a svg customizer part#5: importing & exporting patterns? This script and codes were developed by Alex Raven on 19 September 2022, Monday.
SVG Customizer Part#5: Importing & Exporting Patterns Previews
SVG Customizer Part#5: Importing & Exporting Patterns - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Customizer Part#5: Importing & Exporting Patterns</title> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/451895/spectrum.css'>
<link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/451895/rangeslider.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="svg" xmlns='http://www.w3.org/2000/svg'> <defs> <pattern id="custom" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"> <circle id="circle" cx="25" cy="25" r="20" fill="#eee" stroke-width="2" stroke="#e4e4e4" /> </pattern> </defs> <rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#custom)" />
</svg>
<div id="controls"> <h4>Customize a Pattern</h4> <!-- spectrum.js controls --> <input id="spectrum-fill" type='text' /> <input id="spectrum-stroke" type='text' /> <hr class="divider-clear"> <!-- rangeslider.js controls --> <input id="rangeslider-size" type="range" min="10" max="120" value="50"> <input id="rangeslider-radius" type="range" min="2" max="80" value="20"> <input id="rangeslider-stroke" type="range" min="0" max="50" value="2"> <hr class="divider"> <h4>Import/Export a Pattern</h4> <input id="export-btn" class="btn" type="button" value="Export Preset" /> <input id="import-btn" class="btn" type="button" value="Import Preset" /> <textarea id="textarea"></textarea>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/451895/rangeslider.js'></script> <script src="js/index.js"></script>
</body>
</html>SVG Customizer Part#5: Importing & Exporting Patterns - Script Codes CSS Codes
body { height: 100%; width: 100%; position: relative; padding: 0; margin: 0;
}
h4 { font-family: "open sans", sans-serif; line-height: 1.5; color: #444; font-weight: normal; margin-top: 0; margin-bottom: 20px;
}
#svg { height: 100%; width: 100%; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px;
}
#controls { text-align: center; //margin: 60px auto; padding: 30px; width: 50%; max-width: 300px; background: #fff; box-shadow: 0 0 60px rgba(0, 0, 0, .15); border-radius: 4px; position: relative;
}
.rangeslider { margin-bottom: 30px;
}
.rangeslider__fill { background: #666;
}
.divider { background: none; border: 1px solid #eee; margin: 30px -30px
}
.divider-clear { background: none; border: none; height: 20px;
}
#textarea{ display:block; width:90%; height:100px; padding: 5px 10px; border-radius: 4px; margin: 5px auto; border: none; background: #666; color: #eee;
}
.btn { padding: 5px 10px; border-radius: 4px; margin: 4px 1px; border: none; background: #666; color: #eee;
}
.btn:hover { color: #fff; background: #363636; transition: all .5s ease; cursor: pointer;
}SVG Customizer Part#5: Importing & Exporting Patterns - Script Codes JS Codes
$("#export-btn").click(function() { // grab the customized pattern & stick it in the export textarea var customizedPattern = $('#custom').prop('outerHTML'); $("#textarea").val(customizedPattern);
});
$("#import-btn").click(function() { // load pattern from textarea & convert to object var presetPattern = $($("#textarea").val()); var presetPatternCircle = presetPattern.find('circle'); // extract relevant attribute values var valueFill = presetPatternCircle.attr("fill"); var valueStroke = presetPatternCircle.attr("stroke"); var valueSize = presetPattern.attr("width"); var valueRadius = presetPatternCircle.attr("r"); var valueStrokeWidth = presetPatternCircle.attr("stroke-width"); // update the controls $("#spectrum-fill").spectrum("set", valueFill); $("#spectrum-stroke").spectrum("set", valueStroke); $("#rangeslider-stroke").val(valueStrokeWidth).change(); $("#rangeslider-radius").val(valueRadius).change(); $("#rangeslider-size").val(valueSize).change(); // update the pattern $("#custom circle").attr({ fill: valueFill, stroke: valueStroke }); $("#custom").attr({ width: valueSize, height: valueSize }); $("#custom circle").attr({ "stroke-width": valueStrokeWidth, r: valueRadius, cx: valueSize / 2, cy: valueSize / 2 });
});
// spectrum.js controls
$("#spectrum-fill").spectrum({ move: function(color) { $("#custom circle").attr('fill', color.toHexString()); }, showButtons: false, preferredFormat: "hex", showInitial: true, showInput: true, color: "#eee"
});
$("#spectrum-stroke").spectrum({ move: function(color) { $("#custom circle").attr('stroke', color.toHexString()); }, showButtons: false, preferredFormat: "hex", showInitial: true, showInput: true, color: "#ddd"
});
// rangeslider.js controls
$("#rangeslider-stroke").rangeslider({ polyfill: false, onSlide: function(position, value) { $("#custom circle").attr('stroke-width', value); }
});
$("#rangeslider-radius").rangeslider({ polyfill: false, onSlide: function(position, value) { $("#custom circle").attr('r', value ); }
});
$("#rangeslider-size").rangeslider({ polyfill: false, onSlide: function(position, value) { $("#custom").attr({ width: value, height: value }); $("#custom circle").attr({ cx: value / 2, cy: value / 2 }); }
});
| Developer | Alex Raven |
| Username | asraven |
| Uploaded | September 19, 2022 |
| Rating | 3 |
| Size | 3,123 Kb |
| Views | 36,432 |
Do you need developer help for SVG Customizer Part#5: Importing & Exporting Patterns?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Alex Raven (asraven) Script Codes
| Name | Size |
| Screen Capture an HTML Element and Save as a Downloadable PNG | 60,592 Kb |
| Autogenerated Collapsible Directory Tree from a UL | 3,364 Kb |
| MacBook with scrolling screenshot animation on hover | 2,401 Kb |
| CSS3 Content Callouts | 2,356 Kb |
| Hover Morphing CSS Line Icons | 2,576 Kb |
| OffScreen Panel With Tabbed Nav | 2,932 Kb |
| CSS Counter Auto Numbered Steps | 2,111 Kb |
| AWWWards Inspired Animated Heart Share Icon | 3,330 Kb |
| A Directory Tree List Style | 2,856 Kb |
| IMac with scrolling screenshot animation on hover | 3,165 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Slide In Panel | Vikvarg | 2,811 Kb |
| A Pen by lizz | Lizz | 10,068 Kb |
| Buttons for autumn | Nikazawila | 1,795 Kb |
| Simple Responsive Text | Fbrz | 2,282 Kb |
| Roman Numerical Converter | Vhall_io | 2,102 Kb |
| Scroll to top button | DominicFrancois | 3,743 Kb |
| CSS3 Butterfly | Timohausmann | 3,430 Kb |
| RWD Conversion Practice | Jxqr97 | 2,743 Kb |
| Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
| About Mazano | Kiti | 2,585 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!