two.js is a motion graphics library for the browser
two.js is a motion graphics library for the browser. Find out more at http://jonobr1.github.io/two.js/.
Questions tagged [two.js]
50 questions
5
votes
1 answer
Can I add class to dynamically created two.js element?
I am using the code showed below to create 46 small circles within a wrapper (div) draw-shapes;
let elem = document.getElementById('draw-shapes');
let params = { width: 1024, height: 768 };
let two = new Two(params).appendTo(elem);
for (let i = 1;…
Jakub Moz
- 127
- 10
4
votes
1 answer
How to capture a click event on a shape or group in two.js?
I have drawn a shape using two.js and I want to write code to handle click events on that shape. Not the canvas, but on the shape itself.
front_left.domElement = $('#two-' + front_left.id)
.css('cursor', 'pointer')
.click(function(e){
…
Sled
- 18,541
- 27
- 119
- 168
3
votes
1 answer
Set center point for svg group with javascript
In a game I am currently making you are in a map which is build from nodes and you are warping to different nodes when you click on them. My current map looks like that (created with two.js it's a svg group where each circle and line is svg path…
Jakub Moz
- 127
- 10
3
votes
0 answers
Underscore undefined when using Two.js and Webpack
I am new to webpack and I am trying to write a web application using webpack and two.js. For completeness, these are my dependencies:
"devDependencies": {
"jasmine-core": "^2.8.0",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
…
Andry
- 16,172
- 27
- 138
- 246
3
votes
1 answer
Problems using webpack and two.js
I am writing a web application using webpack and two.js. For completeness, these are my dependencies:
"devDependencies": {
"jasmine-core": "^2.8.0",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.0",
…
Andry
- 16,172
- 27
- 138
- 246
3
votes
1 answer
Dynamically Adding SVG Mask using js
I'm using a combination of jquery and two.js to create an animated svg. I'm experiencing a weird bug whereby the markup is added incorrectly and not rendered by the browser.
The really strange part is that if I open up the inspector in chrome and…
Hello World
- 1,102
- 2
- 15
- 33
3
votes
1 answer
Poor performance - SVG animations
So I'm creating some animations for a client and I've been playing with two.js because I liked its SVG capabilities. Unfortunately I'm having issues with performance.
I'm plotting 100 circles on the screen. Each circle contains 6 further circles…
Ashmore11
- 178
- 1
- 1
- 12
3
votes
1 answer
How do I properly interpret an external SVG file for use with two.js?
If the object tag is not really suitable, then is there a more preferable method for grabbing an SVG file and manipulating it directly with two.js? Or will I have to go into the SVGs and just add them inline?
Using this question's code and some of…
Noel Quiles
- 31
- 4
2
votes
1 answer
Allowing eval in Electron?
I would like to write a small Electron application using Two.js but I realized Electron doesn't like anyone to use eval.
If I do this in renderer.js:
let u = eval('1 + 1');
I get this issue:
Uncaught EvalError: Refused to evaluate a string as…
nowox
- 25,978
- 39
- 143
- 293
2
votes
3 answers
Create chart using css, css-doodle, or bootstrap
I am looking to generate a rectangle shape of 12 houses chart using CSS. The best I could use is CSS-doodle code below; even that it is nowhere perfect.
How can the example images below can be accomplished? The structure has to be a single…
Majoris
- 2,963
- 6
- 47
- 81
2
votes
0 answers
Two.js webgl is too slow for many objects
I use Two.js + Vue.js to display my svg in webgl to optimize its rendering, but the render function takes longer than calling svg via Vue
I tried to use Pixi, but it doesn’t have rounding at the paths
Two has this but in webgl mode because of the…
Electrum18
- 21
- 4
2
votes
0 answers
Is it possible to find character width in a string (sentence or word) in SVG
I am trying to make a dynamic text editor in SVG using two.js, I have a custom blinking cursor (cursor functionality, it is same as input field in HTML like I can move around the cursor in sentence edit, add, delete characters). I want to place the…
Vishma V Shetty
- 21
- 2
2
votes
2 answers
Y-axis to be inverted
I am using two.js library in javascript to make a system coordinates, and i want the Y-axis to be inverted. Now 0,0 is at the top left but I want it to be at the bottom left
logar khan
- 21
- 2
2
votes
1 answer
Is it possible to scale two.js groups in one direction
Two.js seems to only support a single value for a scale, not x,y components. Is it possible to just stretch something horizontally?
msfeldstein
- 1,080
- 1
- 9
- 18
2
votes
1 answer
How can I interpret an extrenal svg file in two.js
Is there any way I can interpret an external svg file with object tag in two.js?
I tried in the way below but..
HTML
JS
var mySvg =…
leccmo
- 329
- 4
- 16