A Pen by Charles Cai on CodePen.
Created
April 4, 2022 22:39
-
-
Save charles-cai/1ac90c6c9955d7b98655502f91f50336 to your computer and use it in GitHub Desktop.
svg1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- https://www.motiontricks.com/creating-dynamic-svg-elements-with-javascript/ --> | |
| <!-- https://greensock.com/ --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/gsap.min.js"></script> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="3840" height="2160" viewBox="0 0 3839 2159"> | |
| <rect width="100%" height="100%" fill="white" /> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // targeting the svg itself | |
| const svg = document.querySelector("svg"); | |
| // variable for the namespace | |
| const svgns = "http://www.w3.org/2000/svg"; | |
| console.log("starting..."); | |
| console.log("w=" + window.outerWidth + ", h=" + window.outerHeight + " scale=" + window.devicePixelRatio); | |
| var width = window.outerWidth * window.devicePixelRatio; | |
| var height = window.outerHeight * window.devicePixelRatio; | |
| let rect = document.createElementNS(svgns, "rect"); | |
| // set attributes of new rectangle | |
| gsap.set(rect, { | |
| attr: { x: width/4, y: height/4, width: width/2, height: height/2, fill: "#5cceee" } | |
| }); | |
| svg.appendChild(rect); | |
| /*for (var x = 0; x < width; x += 2) { | |
| var vline = document.createElementNS(svgns, "line"); | |
| vline.setAttribute("y1", "0") | |
| vline.setAttribute("y2", (height - 1).toString()); | |
| vline.setAttribute("x1", x.toString()); | |
| vline.setAttribute("x2", x.toString()); | |
| vline.setAttribute("stroke", "black"); | |
| vline.setAttribute("stroke-width", "1"); | |
| svg.appendChild(vline); | |
| } | |
| for (var y = 0; y < height; y += 2) { | |
| var hline = document.createElementNS(svgns, "line"); | |
| hline.setAttribute("x1", "0") | |
| hline.setAttribute("x2", width - 1); | |
| hline.setAttribute("y1", y.toString()); | |
| hline.setAttribute("y2", y.toString()); | |
| hline.setAttribute("stroke", "black"); | |
| hline.setAttribute("stroke-width", "1"); | |
| svg.appendChild(hline); | |
| } | |
| */ | |
| console.log("...done!"); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: 'Source Sans Pro', sans-serif; | |
| display: flex; | |
| overflow: hidden; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment