Vue SVG Maker

Developer
Sarah Drasner
Size
5,814 Kb
Views
40,480
  1. Vue SVG Maker Previews
  2. Vue SVG Maker HTML Codes
  3. Vue SVG Maker CSS Codes
  4. Vue SVG Maker JS Codes

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 Previews
IQ Test

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
Vue SVG Maker - Script Codes
Home Page Home
Developer Sarah Drasner
Username sdras
Uploaded November 18, 2022
Rating 4.5
Size 5,814 Kb
Views 40,480
Do you need developer help for Vue SVG Maker?

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!

Sarah Drasner (sdras) Script Codes
Name
React Game- Elephant Taco Hunt
Anagoge
Responsive GreenSock-Teaching Monster
Simple Responsive Scroll Snap Point Demo
Animated viewBox Data Visualization
Gif masking in SVG
Responsive Animated Infographic.
Turn It Around
Money Printer
Chart made with Vue, Transitioning State
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!