Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic.
1
vote
0answers
26 views
Line Graph animation with SVG and ES6 template strings
I've made this animation which shall be incorporated in the header of a webpage.
Demo with compiled Sass and uncompiled ES6 code:
...
5
votes
0answers
36 views
Loading an SVG into the canvas
The code below is loading an svg into the canvas via RaphaelJS. There are mouseover/mouseout events, on click on an element of the svg, and drag/zoom.
I would like to know, what are some good ...
1
vote
1answer
58 views
“Spinning wheels” - Animated spinner with SVG and Sass-CSS
I've made this little animation using SVG, CSS-keyframes and a bit of Sass.
...
1
vote
0answers
84 views
JSON schema visualizer
I have the following backbone function to read a JSON schema and draw the tree structure (as in the screenshot below). I want to make sure if checking against the type as object/array is alright or if ...
2
votes
0answers
70 views
Using d3.drag() to enable dragging on an SVG group
I'm using the following function to enable dragging on an SVG group.
...
1
vote
0answers
32 views
SVG filtering an image to stepped alpha grayscale
I have a variety of images that will be used in a style intended to mimic a dot-matrix LCD.
In a previous version, I rendered these images using a program and essentially ended up with a duplicate of ...
4
votes
1answer
493 views
SVG photo mosaic creator
I got this as part of some interview assignment. After some head scratching I think I have done quite well as the result can be seen here:
After transformation(10x10 tile):
More crisp picture with ...
1
vote
1answer
46 views
Render SVG background with Gradient
I'm new to and still fairly confounded by SVGs. I'm feeling pretty happy with the following hobbled together SCSS code demonstrated here:
...
0
votes
0answers
98 views
Creating components with SVG Icons
Right now I have code like this, where an svg is used via xlinkhref and the Icons tag needs to be also on the document. This ...
8
votes
1answer
275 views
2D colliding disks in JavaScript (ideal billiard balls)
I am implementing a simulation of colliding disks (ideal 2D billiard balls) in JavaScript.
I follow an event-driven algorithm that avoids discretizing time; the algorithm goes as follows at each step:...
1
vote
1answer
717 views
Converting an SVG polygon path from relative to absolute coordinates
This question was moved from StackOverflow as suggested by some users.
I developed a function that aims to (should) provide a simple and effective method to transform a polygon ...
7
votes
1answer
69 views
Git Insert Delete Graph
I attempted to recreate the github code frequency graph(example) with a daily granularity using perl and git log. How did I do, ...
3
votes
0answers
99 views
Hourglass path in SVG for Android
I've created my first Android drawable, a hourglass shaped image, and I'm curious what can be improved with it. It seems weird having to use 4 paths, but I couldn't get it to work any other way.
<...
4
votes
1answer
118 views
Cutting rectangle from circle
Can the following code snippet be optimized or am I doing it right?
...
9
votes
0answers
126 views
Separation of concerns in graph theory project [closed]
I'm working on a project to help with learning graph theory, but I'm having problems with separation of concerns in my directive. Below is the directive at fault. It uses d3.js to draw the SVG on the ...
68
votes
3answers
4k views
Shielding your CodeReview on GitHub
In response to a feature-request on meta, I spent a few hours today creating the feature in php.
This application adds a review shield to your GitHub repository (or wherever else you want it).
It ...
6
votes
1answer
1k views
Simple grid using SVG
I developed this grid which displays number of records for X & Y, user can click each number to see a list. (I didn't add list markup to fiddle yet - so lets not worried about it for now.)
What I ...
4
votes
1answer
1k views
D3.js interpolating line on circumference of circle
For now, I've tried to make a line rotate on the path of a circle, but used setInterval multiple times and there might be other ways of achieving the same.
I would ...
4
votes
1answer
670 views
CSS mask clipping and overlay SVG to achieve a two effect
I am currently attempting to create a two SVG overlay / masking like the image below:
I have created a SVG for the overlay. As it stands, I am trying to create two elements one for the green side and ...
0
votes
1answer
255 views
Colour-changing clock
I am fairly new to javascript and I would like to write my code on a more readable and efficient way. Any critique of what I've written would be greatly appreciated, especially the section of ...
2
votes
1answer
415 views
Generating SVG animation of falling leaves
This is a Python script I wrote to generate a SVG animation of falling leaves.
How can I simplify my script and also make the animation look more realistic?
...
6
votes
2answers
527 views
Parse floats from a string
While fixing some old code I came up with a class that parses floats from a string.
This is used for parsing svg files in xml format. Floats can be separated by comma, space or anything at all in ...
2
votes
1answer
67 views
SVG drawing code
How could I optimize this code / make it look better? Any advice on things I'm doing wrong?
...
1
vote
1answer
290 views
Is the Button, an <a> element with svg code and hidden link content inside, ARIA conform and well laid out?
I have an a element for a button. The SVG snippet inside links to the containing SVG file at the top of the body.
...
2
votes
1answer
488 views
Google Map, SVG Graph and ruler
I would like to get feedback on the code. It is working and can be seen here.
I welcome any kind of feedback, since I am just starting to use JavaScript. Epecially in the case of performance, there ...
2
votes
0answers
1k views
Optimizing snap SVG animation with collision detection
I have a snap SVG animation which animates a bunch of circles, and draws a line between them if they are within a certain proximity of each other. However, I realize that there is a lot of optimizing ...
8
votes
1answer
11k views
HTML / JS Slot Machine Simulator
This code is a slot machine simulator that uses elements of both HTML and JavaScript. Please pardon the lack of comments.
...
0
votes
1answer
226 views
Optimizing this SVG animation for size
I'd like to code review generated svg animation, while this might stretch definition of this site, I really hope this is interesting and revelant topic, as this SVG file is really like any other ...
3
votes
2answers
351 views
Python Barcode Generator v2
This is a complete rewrite of the code posted for review in this question. The question is identical.
...
10
votes
1answer
10k views
Making lines with SVG and JavaScript
I just started trying out SVG the other day. Eventually I hope to be able to know how to do what SE does with their reputation graphs.
For now, I've just been trying to set up an easier way to make ...
3
votes
1answer
881 views
Displaying overlapping blocks using d3.js
The code takes in nodes with different start time as input and assigns the position such that they will not overlap. As I have coded with too many loops and conditions. Can anyone review the code and ...
0
votes
1answer
121 views
Perl Hash mapping SVG elements to their attributes
Is there a more reliable way of building a hash of the attributes associated with each SVG element?
...
0
votes
1answer
131 views
Perl hash mapping SVG elements to content elements
Is there a more reliable way of getting the content elements for each SVG element?
...
7
votes
2answers
2k views
SVG path parsing
I have a module in Python for dealing with SVG paths. One of the problems with this is that the SVG spec is obsessed with saving characters to a pointless extent. As such, this path is valid:
...
1
vote
1answer
2k views
5
votes
2answers
562 views
Optimizing mouse in/out
I have this code that places a marker and on mouse-over this marker is scaled out and then back to the 'original' scale:
...
3
votes
1answer
979 views
Best way to create SVG from database? (Using PHP)
I've got a SQL database that keeps track of which services a client has. I need to create an image using SVG that only displays the services that the client has. The database stores the services in ...
2
votes
2answers
1k views
Optimize coloring book built with Raphaël and jQuery
I've been building a coloring book for kids: http://coloringbook.core.ba.lightburncloud.com/
It's got to work on an iPad, so I decided to try out Raphaël JS. I want to try and make this as efficient ...
8
votes
1answer
794 views
First attempt at a SVG parser
I figured it's about time to jump into some Haskell, so here's a first attempt at an oddly specific SVG parser:
...
