Designs created with shapes using HTML, CSS, and JavaScript

I've been given a challenge to reproduce the image shown below using only HTML, CSS, and JS - without utilizing any image files. Initially, I thought about creating the shapes with HTML elements and CSS, but I realize this might not be the best approach.

Does anyone have any suggestions on how to tackle this task? Would employing an HTML5 canvas be a better option? From my observation, the pattern consists of two layers: one with triangles and another layer with circles. How should I proceed if I intend to generate the triangles and circles randomly?

Thanks!

javascriptjquerycsshtml

Answer №1

Have you considered using d3.js to achieve this? The d3.js library is great for manipulating documents based on data, making it easy to create visualizations with precise positioning.

By providing the data and using D3's methods to append elements, you can create a visually appealing picture with exact coordinates for each element. The selection and manipulation process in D3 is similar to jQuery, so it may be familiar if you have experience with jQuery.

Check out the code snippet below for an example of how to use D3 to create elements with specific coordinates. With D3.js, you can easily customize the appearance and layout of your visualizations.

var margin        = { top: 50, right: 50, bottom: 50, left: 50}, 
    w             = 300 - margin.left - margin.right,
    h             = 600 - margin.top - margin.bottom,
    circleRadii   = 15,
    triData       = [{x: 20, y: 30}, {x: 50, y: 120}, {x: 140, y: 160}],
    circleData    = [{x: 10, y: 10}, {x: 40, y: 80}, {x: 160, y: 70}];
    
var svg = d3.select("body")
            .append("svg")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.left + margin.right)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            
var tri =  svg.selectAll(".point")
             .data(triData)
             .enter().append("path")
             .attr("class", "point")
             .attr("stroke", "none")
             .attr("fill", "rgba(30,110,160,.5)")
             .attr("d", d3.svg.symbol().type("triangle-up").size(1024*2))
             .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
             
var circles = svg.selectAll("circle")
                    .data(circleData)
                    .enter()
                    .append("circle");
                    
var circleAttr = circles
                    .attr("cx", function (d) { return d.x; })
                    .attr("cy", function (d) { return d.y; })
                    .attr("r", circleRadii)
                    .style("fill", "rgba(10,100,0,.5)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Does the layout.tsx file in Next JS only affect the home page, or does it impact all other pages as well?

UPDATE After some troubleshooting, I've come to realize that the issue with my solution in Next JS 13 lies in the structure of the app. Instead of using _app.tsx or _document.tsx, the recommended approach is to utilize the default layout.tsx. Althou ...

javascriptreactjsnext.jsroutes

The transmission of data is not initiated by Ajax

Hey there, So I'm a bit new to Ajax and I've got this PHP script that's working fine. I know I need to upgrade it with PDOs, but I also want to implement Ajax to avoid the reloading and to learn something new. Here's the PHP script: ...

phpjqueryajaxpost

Having to click twice in order to close the jQuery dialog box can be frustrating

I've been attempting to set up a div that pops up using jQuery dialog. Initially, when the user clicks on the button and opens the dialog, it closes with the first click. The second time they try to close the dialog, it will reopen the same popup, r ...

javascriptjqueryjquery-ui-dialog

Modifying Selectize Ajax data in real-time

How can the student_id be changed each time the modal is opened? This is the code: $('#relationshipModal input[name=existing_user]').selectize({ valueField: 'id', searchField: 'name', options: [], create: fal ...

javascriptjqueryajaxselectize.js

Unleashing the power of XPath and wildcards in AJAX

Can anyone explain why the variable objProperties, which contains an xpath with a wildcard, is coming up empty in this scenario? function getXMLServerObject (httpType, cmd, isAsync) { var object = new Array(); $.ajax({ type: httpType, ...

javascriptajaxxmlxpathwildcard

Inter-component communication within nested structures in Angular 2

Working on an Angular2 project that involves multiple nested components, I have successfully sent data from a child component to its immediate parent. However, when dealing with three levels of nesting, the question arises: How can I send or modify data ac ...

javascriptangulartypescriptcomponents

Preventing autoscrolling in Ionic's dual side menu template when additional content is added

Could anyone kindly assist me in figuring out why the autoscrolling of the content is not functioning correctly? Whenever the button on the header is clicked, a new message will be included in the main content. However, once the number of lines exceeds wha ...

javascriptangularjsionic-framework

Issue: ParserError encountered due to a Syntax Error found at line 1, column 32

As a beginner in programming, I am encountering an issue. When I run "npm run build" in the Terminal to compress my project in React.js, I encounter this error. Interestingly, I have previously created another project without facing this problem, and I can ...

javascriptnode.jsjsonreactjsnpm

What is the method to trigger the alt + f4 combination in AngularJS when a button is clicked?

Is there a way to manually close the current tab in AngularJS by simulating Alt+F4 key press? $scope.cancel = function (event) { var keycode = event.keycode; }; <button class="btn btn-outline-primary" ng-click="cancel($event);">OK</button&g ...

javascripthtmlangularjs

Sending back numerous information in the catch block

Recently, I was testing out the fetch API and encountered an issue with logging a fetch error. I tried catching the error and logging it within the catch block. Strangely, even when I added additional console.log statements in the catch block, they would ...

javascriptnode.js

The state in useState is failing to update correctly following selections made within the dropdown menus

I am currently facing an issue with my dropdown disabling function, which is not enabling the dropdown properly. I suspect that this is due to asynchronous problems stemming from the use of useState. const [homeSelect, setHomeSelect] = useState('Home& ...

javascriptreactjsreact-hooksuse-stateuse-reducer

Place a material-ui React component at the center of a footer section

I'm facing a challenge with centering a material-ui Simple Breadcrumbs component within a footer as opposed to having it aligned to the left. Even though I'm new to this, I thought it would be straightforward but I can't seem to figure it ou ...

javascripthtmlcssreactjsmaterial-ui

Tips for ensuring my website displays consistently on different screen sizes

Is there a way to ensure that my website, informatiestuderen.nl, appears consistent on both small screens (such as phones) and large screens (like desktop computers)? Currently, my website is not functional on mobile devices. Take, for instance, carriere ...

phphtmlwebresponsivedesktop

Customizing active-class in Vuetify

How do I customize the appearance of my v-list-item-group when it is in the active state? <v-list> <v-list-item-group v-model="day" color="green"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-content& ...

cssvue.jsvuejs2vuetify.js

What's the quickest method for duplicating an array?

What is the quickest method for duplicating an array? I wanted to create a game, but I found that Array.filter was performing too slowly, so I developed a new function: Array.prototype.removeIf = function(condition: Function): any[] { var copy: any[] ...

javascriptarraystypescriptcopy

If an AngularJS Form Item is hidden with jQuery's hide() method, will it still be validated?

Even though we're in 2020, I'm still working with AngularJS 1.x instead of the newer version due to work requirements. Despite this limitation, I am facing a challenge with setting up a form that requires exclusive-or validation between two field ...

javascripthtmljqueryangularjsangularjs-forms

Navigating through a large number of distinct items in Three.JS

I have hit a roadblock in my project development. I am striving to create a level using various phong materials on objects of unique sizes and shapes. However, Three.JS's default texture handling causes them to stretch out and look distorted on meshes ...

javascriptthree.js

Challenges faced when subscribing to global events in JavaScript

I have some questions about the JavaScript code snippet below: What does .events.slice(-1)[0][0] signify? Similarly, could you explain the purpose of nodes_params += "&ns=" + GLOBAL_EVENT + "," + start_from + ",-,-";? Could you elaborate on what is m ...

javascriptjquery

Menu Tabs with Rounded Edges

Seeking help to round the corners of a tabbed dynamic menu using Drupal and the dynamic-persistent-menu module. The code provided below is almost perfect, with 99% accuracy. View the current state of the menu here: . Can anyone assist in achieving the rema ...

cssimagebackground

What is the best way to retrieve the values of various input fields using their numbered IDs and then store them in a MySQL

I attempted to design a form that allows for multiple inserts, where users can add as many titles and languages as they desire by entering a number. The display of titles and languages is functioning correctly, but I am struggling to retrieve the individua ...

javascriptphpjquerymysqli