Vue SVG Maker
How do I make an vue svg maker?
Showing how form bindings in Vue can be paired with generative SVG for some fun effects. What is a vue svg maker? How do you make a vue svg maker? This script and codes were developed by Sarah Drasner on 18 November 2022, Friday.
Vue SVG Maker - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vue SVG Maker</title> <link href="https://fonts.googleapis.com/css?family=Khula:300" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"> <div class="flex"> <div class="svg-contain"> <svg xmlns="http://www.w3.org/2000/svg" ref="figure"> <defs> <linearGradient id="lin-gradient1" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="objectBoundingBox"> <stop offset="0" stop-color="#77A1D3"/> <stop offset="0.5" stop-color="#79CBCA"/> <stop offset="1" stop-color="#E684AE"/> </linearGradient> <linearGradient id="lin-gradient2" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="objectBoundingBox"> <stop offset="0" stop-color="#FEAC5E"/> <stop offset="0.5" stop-color="#C779D0"/> <stop offset="1" stop-color="#4BC0C8"/> </linearGradient> <radialGradient id="rad-gradient1" x1="50%" y1="50%" x2="10%" y2="10%" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#000"/> <stop offset="0.3" stop-color="#2529bf"/> <stop offset="0.6" stop-color="#e93e3a"/> <stop offset="0.7" stop-color="#f3903f"/> <stop offset="0.8" stop-color="#fdc70c"/> <stop offset="0.9" stop-color="#fff33b"/> </radialGradient> <radialGradient id="rad-gradient2" x1="50%" y1="50%" x2="10%" y2="10%" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#000"/> <stop offset="0.3" stop-color="#2529bf"/> <stop offset="0.9" stop-color="#5BE2D4"/> </radialGradient> <radialGradient id="rad-gradient3" x1="50%" y1="50%" x2="10%" y2="10%" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#000"/> <stop offset="0.6" stop-color="#2529bf"/> <stop offset="0.85" stop-color="#e93e3a"/> <stop offset="0.93" stop-color="#f3903f"/> <stop offset="0.97" stop-color="#fdc70c"/> <stop offset="1" stop-color="#fff33b"/> </radialGradient> </defs> <rect x="0" y="0" width="800" height="800"></rect> <g ref="patterngroup"></g> <text x="50%" y="50%" :style="{fill: textFill, stroke: textStroke, fontSize: textSize}" font-family="Helvetica" text-anchor="middle">{{ type }}</text> </svg> </div> <!--svg-contain--> <div class="controls"> <div class="formarea"> <label for="textupdate">Update the text:</label> <input v-model="type" id="textupdate" type="text" /> </div> <div class="formarea"> <h3>Create Circles:</h3> <button @click="createSmCircles">Make small circles</button> <button @click="createBigCircles">Make big circles</button> </div> <div class="formarea"> <h3>Create Lines:</h3> <button @click="createBigLines">Make big lines</button> <button @click="createRandLines">Make random lines</button> </div> <div class="formarea"> <h3>Animation:</h3> <button @click="animation">Play Animation</button> <button @click="pauseAnim">Stop Animation</button> </div> <div class="formarea"> <h3>Change Text Color:</h3> <label for="fill">Fill color:</label> <input type="color" v-model="textFill" id="fill" /> <label for="stroke">Stroke color:</label> <input type="color" v-model="textStroke" id="stroke" /><br /> <label for="size">Text size:</label> <input type="number" v-model.number="textSize" id="size" step="5" /> </div> <a ref="dl" @click="downloadSVG"><button class="dlbtn">Download Image</button></a> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Vue SVG Maker - Script Codes CSS Codes
body { background: black; font-family: 'Khula', sans-serif; color: white; width: 100vw; height: 100vh;
}
button, input { font-family: 'Khula', sans-serif; margin: 10px 2px 0; border: 1px solid #555; padding: 8px 10px 4px; color: white;
}
button { background: #111; cursor: pointer; text-transform: uppercase;
}
input { background: #444;
}
input[type="color"] { padding: 0;
}
input[type="number"] { width: 50px;
}
.formarea { background: #212121; border: 1px solid #444; padding: 10px; margin-bottom: 20px;
}
.formarea h3 { margin: 10px 0 5px; font-size: 15px; text-transform: uppercase;
}
.dlbtn { background: #bc161c; border: #bc161c; margin-bottom: 40px;
}
label { text-transform: uppercase;
}
.flex { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.svg-contain { -webkit-box-flex: 3; -ms-flex-positive: 3; flex-grow: 3; padding: 40px; border-right: 1px solid #444;
}
.svg-contain svg { width: 90%; height: 90%;
}
.controls { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 100vh; padding: 50px;
}
@media (max-width: 600px) { .flex { display: block !important; } .svg-contain { width: 80%; } .controls { width: 90%; padding: 20px !important; }
}
Vue SVG Maker - Script Codes JS Codes
'use strict';
new Vue({ el: '#app', data: function data() { return { type: 'hi there', size: 800, numLines: 100, textFill: '#131562', textStroke: '#D7EfEC', textSize: 70, gradients: ['url(#rad-gradient1)', 'url(#rad-gradient3)', 'url(#rad-gradient2)'], gradients2: ['url(#lin-gradient1)', 'url(#lin-gradient2)'] }; }, methods: { downloadSVG: function downloadSVG() { var svgData = this.$refs.figure.outerHTML; var svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" }); var svgUrl = URL.createObjectURL(svgBlob); this.$refs.dl.href = svgUrl; this.$refs.dl.download = "funtimes.svg"; }, createRandLines: function createRandLines() { var svgNS = this.$refs.figure.namespaceURI; this.$refs.patterngroup.innerHTML = ''; for (var i = 0; i < this.numLines; i++) { var line = document.createElementNS(svgNS, 'line'); this.append(this.$refs.patterngroup, line); this.setAttributes(line, { 'x1': this.totesRando(this.size, 0), 'x2': this.totesRando(this.size, 0), 'y1': this.totesRando(this.size, 0), 'y2': this.totesRando(this.size, 0), 'stroke': this.gradients2[this.totesRando(1, 0)], 'stroke-width': 3 }); } }, createBigLines: function createBigLines() { var svgNS = this.$refs.figure.namespaceURI; this.$refs.patterngroup.innerHTML = ''; for (var i = 0; i < this.numLines; i++) { var line = document.createElementNS(svgNS, 'line'); this.append(this.$refs.patterngroup, line); this.setAttributes(line, { 'x1': this.size / 2, 'x2': this.totesRando(this.size, 0), 'y1': this.size / 2, 'y2': this.totesRando(this.size, 0), 'stroke': this.gradients[this.totesRando(2, 0)], 'stroke-width': 3 }); } }, createBigCircles: function createBigCircles() { var svgNS = this.$refs.figure.namespaceURI; this.$refs.patterngroup.innerHTML = ''; for (var i = 0; i < this.numLines / 2; i++) { var circ = document.createElementNS(svgNS, 'circle'); this.append(this.$refs.patterngroup, circ); this.setAttributes(circ, { 'cx': this.size / 2, 'cy': this.size / 2, 'r': this.totesRando(this.size / 2, 0), 'fill': 'none', 'stroke': this.gradients2[this.totesRando(1, 0)], 'stroke-width': 1 }); } }, createSmCircles: function createSmCircles() { var svgNS = this.$refs.figure.namespaceURI; this.$refs.patterngroup.innerHTML = ''; for (var i = 0; i < this.numLines; i++) { var circ = document.createElementNS(svgNS, 'circle'); this.append(this.$refs.patterngroup, circ); this.setAttributes(circ, { 'cx': this.totesRando(this.size, 0), 'cy': this.totesRando(this.size, 0), 'r': this.totesRando(10, 3), 'fill': 'none', 'stroke': this.gradients[this.totesRando(2, 0)], 'stroke-width': 1 }); } }, animation: function animation() { var tl = new TimelineMax(); tl.add('begin'); tl.to('line', 2, { rotation: 360, repeat: -1, transformOrigin: '50% 50%', ease: Sine.easeOut }, 'begin'); tl.staggerTo('circle', 1.6, { cycle: { y: [10, -10, -5, 5, -20, 3], x: [-5, 5, -20, 3, 10, -10] }, repeat: -1, yoyo: true, ease: Sine.easeOut }, 0.01, 'begin'); return tl; }, pauseAnim: function pauseAnim() { var tl = TimelineLite.exportRoot(); tl.pause(0); }, setAttributes: function setAttributes(el, attrs) { for (var key in attrs) { el.setAttribute(key, attrs[key]); } }, append: function append(el, addition) { el.appendChild(addition); }, totesRando: function totesRando(max, min) { return Math.floor(Math.random() * (1 + max - min) + min); } }, mounted: function mounted() { var svgNS = this.$refs.figure.namespaceURI, vbx = document.createElementNS(svgNS, 'viewBox'); this.setAttributes(this.$refs.figure, { "viewBox": '0 0 ' + this.size + ' ' + this.size }); this.createBigLines(); }
});
![Vue SVG Maker - Script Codes](http://shots.codepen.io/sdras/pen/LLvdQL-512.jpg)
Developer | Sarah Drasner |
Username | sdras |
Uploaded | November 18, 2022 |
Rating | 4.5 |
Size | 5,814 Kb |
Views | 40,480 |
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!
Name | Size |
React-Motion and Color Animation Experiment | 4,695 Kb |
Top 50 Codepen Users By Follower Count | 8,575 Kb |
Anagoge | 12,337 Kb |
Chart made with Vue, Transitioning State | 4,609 Kb |
Working with Chartist and Animations | 2,868 Kb |
Form with Animation That Assists in UX | 6,268 Kb |
Polyscape | 4,889 Kb |
Simple Responsive Scroll Snap Point Demo | 3,509 Kb |
Money Printer | 4,158 Kb |
React Animated Page Transitions | 20,930 Kb |
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!
Name | Username | Size |
Formations | Cantelope | 5,731 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Donald Trump - The New Yorker | Agbales | 2,502 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
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!